/*!* ==========================================================================*/
/*   HEADER*/
/*   ========================================================================== *!*/

header {
    width: 100%;
    background: var(--main-text-color);
    color: var(--button-text-color);
    padding: 8px 12px 0 16px;
    height: 64px;
}

.navigationWrap {
    flex-grow: 1;
    position: relative;
}

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

.navigationItem {
    width: 48px;
    height: 48px;
    margin: 0 4px;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
}
.lmsCoursesGrid {
    display: none;
}
.lmsCoursesGrid.active {
    display: block;
}

.navigation li.active rect {
    fill: var(--menu-active-color);
}

.navigationItem:focus-visible {
    border: none;
    outline: 0 none;
}

.navigationItem:focus-visible rect {
    fill: var(--menu-active-color);
}

.navName {
    display: none;
    background: var(--button-text-color);
    color: var(--main-text-color);
    position: absolute;
    top: -3px;
    right: 35px;
    padding: 5px 10px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    border-radius: 30px;
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.badge {
    font-weight: 700;
    font-size: 11px;
    line-height: 1.09;
    display: inline-block;
    text-align: center;
    background: var(--green-color-badges);
    color: var(--button-text-color);
    border-radius: 40px;
    position: absolute;
    top: 0px;
    left: 32px;
    padding: 2px 6px;
}

.badge.red {
    background: var(--red-color);
}

.navigationItem:active .navName {
    color: var(--main-text-color);
}

@media (hover: hover) {
    .navigationItem:hover rect {
        fill: var(--menu-hover-color);
    }

    .navigationItem:hover .navName {
        display: block;
    }
}

.mobileNavBtn {
    display: none;
}

.headerUserInfo {
    margin-left: 27px;
}

.headerUserName {
    align-items: flex-end;
}

.headerUserRole {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.17;
    color: var(--light-text-color);
}

.headerUserPhoto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 0 0 8px;
    overflow: hidden;
    cursor: pointer;
}

.headerUserPhoto img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.noPhoto {
    background-image: url(../../images/pages/no-photo.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.headerUserMore {
    cursor: pointer;
    position: relative;
}

.dots {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    margin-right: 5px;
    padding-left: 9px;
}

.dots.moreMenuOpen circle,
.dots:hover circle {
    fill: var(--menu-hover-color);
}

.moreMenuOpen ~ .headerUserMoreMenu {
    display: block;
}

.headerUserMoreMenu {
    display: none;
    position: absolute;
    top: 50px;
    right: -3px;
    z-index: 11;
    border-radius: var(--border-radius-lg);
    padding: 8px 4px 8px 8px;
    background: var(--button-text-color);
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    width: 222px;
}

.userMoreMenuWrap {
    padding: 0 4px 0 0;
    align-items: stretch;
    max-height: calc(100vh - 95px);
    overflow-y: auto;
}

.userMoreMenuLink {
    color: var(--main-text-color);
    font-size: var(--sub-title-font-size);
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    padding: 10px 16px 12px 16px;
    column-gap: 15px;
    justify-content: flex-start;
    align-items: center;
}

.userMoreMenuLink span {
    flex-grow: 1;
}

.moreSubMenuOpen .userMoreLinkWithSub svg:last-child path {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
}

.moreSubMenu {
    display: none;
}

.moreSubMenuOpen .moreSubMenu {
    display: block;
}

.moreSubMenuLink {
    color: var(--secondary-menu-color);
    font-size: var(--sub-title-font-size);
    font-weight: 500;
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    padding: 11px 16px 11px 47px;
    border-radius: 6px;
    display: block;
}

.moreSubMenuLink.active {
    background: var(--menu-active-color);
}

@media (hover: hover) {
    .userMoreMenuLink:hover {
        background: var(--menu-hover-color);
        border-radius: 6px;
        color: var(--button-text-color);
    }

    .userMoreMenuLink:hover path,
    .userMoreMenuLink:hover circle {
        stroke: var(--button-text-color);
    }

    .moreSubMenuLink:hover {
        background: var(--menu-hover-color);
        color: var(--button-text-color);
    }
}

.moreSubMenuLink:active,
.moreSubMenuLink.active {
    background: var(--menu-active-color);
    color: var(--button-text-color);
}

.moreSubMenuLink::before {
    position: absolute;
    left: 17px;
    top: 12px;
}

.en.moreSubMenuLink::before {
    content: url(../../images/flags/english.svg);
}

.pt.moreSubMenuLink::before {
    content: url(../../images/flags/portugal.svg);
}

.fr_FR.moreSubMenuLink::before {
    content: url(../../images/flags/france.svg);
}

.il.moreSubMenuLink::before {
    content: url(../../images/flags/hebrew.svg);
}

.es_MX.moreSubMenuLink::before {
    content: url(../../images/flags/spanish-mexico.svg);
}

.ro.moreSubMenuLink::before {
    content: url(../../images/flags/romanian.svg);
}

.es_CL.moreSubMenuLink::before {
    content: url(../../images/flags/chile.svg);
}

.es.moreSubMenuLink::before {
    content: url(../../images/flags/spanish.svg);
}

.en_GB.moreSubMenuLink::before {
    content: url(../../images/flags/english-uk.svg);
}

.de.moreSubMenuLink::before {
    content: url(../../images/flags/germany.svg);
}

.cs.moreSubMenuLink::before {
    content: url(../../images/flags/czech\ republic.svg);
}

.nl.moreSubMenuLink::before {
    content: url(../../images/flags/dutch.svg);
}

.nestedMenuLink {
    color: var(--secondary-menu-color);
    font-weight: 500;
}

.mobileburger {
    display: none;
}

.navigationItem.active rect {
    fill: var(--menu-active-color);
}

.hidden {
    display: none !important;
}

.mainLogo {
    max-width: 100px;
    padding-top: 8px;
}

.mainLogo img {
    width: 100%;
}

@media only screen and (max-width: 1024px) {
    .mainLogo {
        width: 32px;
        height: 37px;
        overflow: hidden;
        margin-left: 0;
    }

    .mainLogo img {
        width: 100px;
        height: auto;
    }

    .headerUserName {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    header {
        padding: 8px 12px 0 18px;
        z-index: 14;
        position: fixed;
        left: 0;
        right: 0;
    }

    .headerUserInfo {
        margin-left: 0;
    }

    .navigationWrap {
        height: 48px;
        display: flex;
        justify-content: flex-end;
    }

    .navigationOpen .navigationItem {
        display: flex;
    }

    .navigationOpen .navigation {
        width: 184px;
        padding: 12px 16px;
    }

    .navigation {
        position: absolute;
        top: 64px;
        right: -89px;
        flex-direction: column;
        padding: 0;
        background: var(--main-text-color);
        border-radius: var(--border-radius-lg);
        width: 0;
        box-sizing: border-box;
        z-index: 10;
    }

    .navigation li:not(:first-child) {
        width: 100%;
    }

    .navigationItem {
        margin: 0;
        display: none;
    }

    .navigation li .navigationItem {
        margin-bottom: 8px;
    }

    .navigation li:last-child .navigationItem {
        margin-bottom: 0px;
    }

    .navigation li .navigationItem:not(.mobileburger) {
        width: 100%;
        justify-content: flex-start;
    }

    @media (hover: hover) {
        .navigationItem:hover .navName {
            color: var(--button-hover-color);
        }
    }

    .navName {
        display: block;
        box-sizing: border-box;
        background: transparent;
        color: var(--button-text-color);
        position: absolute;
        top: 0;
        left: 57px;
        padding: 15px 8px;
        box-shadow: none;
        border-radius: 0;
        font-size: var(--sub-title-font-size);
        line-height: 1.2;
        width: 98px;
        text-align: left;
    }

    .navigationItem:active .navName {
        color: var(--button-text-color);
    }

    .navigationItem.active,
    .navigationItem.defaultActive {
        display: flex;
        position: fixed;
        top: 8px;
        right: 130px;
        background: var(--button-background-color);
    }

    .navigationItem.active .navName,
    .navigationItem.defaultActive .navName {
        display: none;
    }

    .mobileNavBtn {
        width: 32px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navigationOpen .mobileNavBtn path {
        stroke: var(--menu-hover-color);
        transform: rotate(180deg);
        transform-origin: 50% 50%;
    }

    .mobileburger {
        display: block;
    }


}

/* ==========================================================================
   SIDEBAR NAVIGATION
   ========================================================================== */
.sidebarNav {
    min-width: 280px;
    width: 280px;
    box-shadow: 2px 0px 24px rgba(0, 0, 0, 0.1);
    height: calc(100vh - 64px);
    padding: 24px 8px 8px;
    position: relative;
    z-index: 5;
}

.sidebarScroll {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100% - 58px);
    width: 100%;
}

.sidebarBtn {
    position: absolute;
    top: 4px;
    right: -26px;
    width: 32px;
    height: 56px;
    background-color: transparent;
    cursor: pointer;
}

.sidebarCircle {
    width: 16px;
    height: 32px;
    background-color: var(--button-text-color);
    border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;
    border-left: 0;
    position: absolute;
    right: -16px;
    top: 17px;
    box-shadow: 10px 0px 10px rgba(0 0 0 / 4%);
    z-index: -2;
}

.sidebarCircle svg {
    position: absolute;
    top: 10px;
    left: 1px;
    z-index: 10;
}

.sidebarCircle:before {
    position: absolute;
    top: -17px;
    left: 0;
    content: "";
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 15px solid #fff;
    filter: drop-shadow(5px -4px 4px rgba(0, 0, 0, 0.06));
    z-index: 0;
}

.sidebarCircle:after {
    position: absolute;
    top: 21px;
    left: 0;
    content: "";
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 15px solid #fff;
    z-index: 0;
    filter: drop-shadow(5px 3px 4px rgba(0, 0, 0, 0.06));
}

.sideMenuBlock {
    padding-bottom: 13px;
    padding-right: 8px;
}

.sidebarHead {
    padding: 0px 8px 9px;
    margin-bottom: 0;
}


.sideMenuLink {
    color: var(--main-text-color);
    font-size: var(--sub-title-font-size);
    font-weight: 700;
    line-height: 1.6;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    padding: 8px 16px;
    border-radius: 6px;
    align-items: center;
    column-gap: 15px;
    cursor: pointer;
}

.sideMenuLink span {
    flex-grow: 1;
}

.sideSubMenuOpen svg:last-child {
    transform: rotate(-180deg);
}

.sideSubMenuOpen .sideSubMenu {
    display: block;
    position: static;
    box-shadow: none;
    padding: 0;
    width: auto;
}

.sideSubMenu {
    display: none;
}

.sideSubMenuLink {
    color: var(--secondary-menu-color);
    font-size: var(--sub-title-font-size);
    font-weight: 500;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    padding: 8px 40px 8px 47px;
    border-radius: 6px;
    display: block;
}

.padding-top-15 {
    padding-top: 15px;
}

@media (hover: hover) {
    .sideMenuLink:hover {
        background: var(--menu-hover-color);
        color: var(--button-text-color);
    }

    .sideSubMenu .sideMenuLinkWrap:hover {
        background: var(--menu-hover-color);
        color: var(--button-text-color);
        border-radius: 6px;
    }

    .sideMenuLink.active:hover {
        background: var(--menu-hover-color);
        color: var(--button-text-color);
    }

    .sideMenuLink:hover circle,
    .sideMenuLink:hover path,
    .sideMenuLink:hover rect {
        stroke: white;
    }

    .sideMenuLink.active:hover circle,
    .sideMenuLink.active:hover path,
    .sideMenuLink.active:hover rect {
        stroke: white;
    }

    .sideSubMenuLink:hover {
        background: var(--menu-hover-color);
        color: var(--button-text-color);
    }

    .sideSubMenuLink.active:hover {
        background: var(--menu-hover-color);
        color: var(--button-text-color);
    }

    .sideMenuLinkWrap.active .sideMenuLink.hasSubs:hover {
        background: var(--menu-hover-color);
        color: var(--button-text-color);
    }


    .sideMenuLinkWrap.active .sideMenuLink.hasSubs:hover path,
    .sideMenuLinkWrap.active .sideMenuLink.hasSubs:hover rect,
    .sideMenuLinkWrap.active .sideMenuLink.hasSubs:hover circle {
        stroke: var(--button-text-color);
    }

    .sideMenuLinkWrap.active .sideMenuLink.hasSubs:hover svg:last-child path {
        stroke: var(--button-text-color);
    }
}

.sideMenuLinkWrap.active .sideMenuLink {
    background: var(--menu-active-color);
    color: var(--button-text-color);
}

.sideMenuLinkWrap.active .sideMenuLink.hasSubs {
    background-color: transparent;
    color: var(--main-text-color);
}

.sideMenuLinkWrap.active .sideMenuLink.hasSubs path,
.sideMenuLinkWrap.active .sideMenuLink.hasSubs rect,
.sideMenuLinkWrap.active .sideMenuLink.hasSubs circle {
    stroke: var(--menu-active-color);
}

.sideMenuLinkWrap.active .sideMenuLink.hasSubs svg:last-child path {
    stroke: var(--main-text-color);
}

.sideMenuClose .sideMenuLinkWrap.active .sideMenuLink.hasSubs path,
.sideMenuClose .sideMenuLinkWrap.active .sideMenuLink.hasSubs rect,
.sideMenuClose .sideMenuLinkWrap.active .sideMenuLink.hasSubs circle {
    stroke: var(--button-text-color);
}

.sideMenuClose .sideMenuLinkWrap.active .sideMenuLink.hasSubs {
    background: var(--menu-active-color);
    color: var(--button-text-color);
}


.sideMenuLinkWrap.active .sideMenuLink path, .sideMenuLinkWrap.active .sideMenuLink rect, .sideMenuLinkWrap.active .sideMenuLink circle {
    stroke: var(--button-text-color);
}


.sideMenuLinkWrap.active .sideMenuLinkWrap.active .sideSubMenuLink {
    background: var(--menu-active-color);
    color: var(--button-text-color);
}

.sideMenuLinkWrap.active .sideMenuLinkWrap.active:hover .sideSubMenuLink {
    background: var(--menu-hover-color);
    color: var(--button-text-color);
}

.sideSubMenuLink:active,
.sideSubMenuLink.active,
.sideMenuLink:active,
.sideMenuLink.active {
    background: var(--menu-active-color);
    color: var(--button-text-color);
}

.sideSubMenuLink:active circle,
.sideSubMenuLink.active circle,
.sideMenuLink:active circle,
.sideMenuLink.active circle,
.sideSubMenuLink:active path,
.sideSubMenuLink.active path,
.sideMenuLink:active path,
.sideMenuLink.active path,
.sideSubMenuLink:active rect,
.sideSubMenuLink.active rect,
.sideMenuLink:active rect,
.sideMenuLink.active rect {
    stroke: white;
}

.sidebarFooter {
    font-weight: 500;
    font-size: 8px;
    line-height: 2;
    color: var(--main-text-color);
    padding: 16px 24px 0 8px;
}

.sideMenuClose.sidebarNav {
    padding-top: 16px;
}

.sideMenuClose .sidebarCircle svg {
    transform: rotate(-180deg);
}

.sideMenuClose {
    min-width: 64px;
    width: 64px;
}

.sideMenuClose .sidebarHead {
    display: none;
}

.sideMenuClose .sideMenuBlock {
    padding: 0;
}

.sideMenuClose .sideMenuLink {
    width: 48px;
    height: 40px;
    overflow: hidden;
    padding: 8px 24px;
}

.sideMenuClose .sideMenuLink span {
    display: none;
}

.sideMenuClose .sideMenuLink svg:first-child {
    position: absolute;
    top: 10px;
    left: 16px;
}

.sideMenuClose .sidebarFooter {
    display: none;
}

.sideMenuClose .sidebarScroll {
    height: 100%;
}

.sideMenuClose .sideSubMenuOpen .sideSubMenu {
    display: none;
}

@media only screen and (min-width: 768px) {

    .sideMenuClose .sidebarScroll {
        overflow: visible;
    }

    .sideMenuLinkWrap {
        position: relative;
    }

    @media (hover: hover) {
        .sideMenuClose .sideMenuLinkWrap:hover .sideMenuLinkWithSub ~ .sideSubMenu {
            display: block;
            position: absolute;
            top: 0px;
            left: 40px;
            z-index: 11;
            border-radius: var(--border-radius-lg);
            padding: 8px;
            background: var(--button-text-color);
            box-shadow: 0px 1px 20px rgb(0 0 0 / 15%);
            width: 216px;
            box-sizing: border-box;
        }

        .sideMenuClose
        .sideMenuLinkWrap:hover
        .sideMenuLinkWithSub
        ~ .sideSubMenu
        .sideSubMenuLink {
            padding: 8px 8px 8px 16px;
        }

        .sideMenuClose
        .sideMenuBlock:last-child
        .sideMenuLinkWrap:last-child:hover
        .sideMenuLinkWithSub
        ~ .sideSubMenu {
            top: auto;
            bottom: 0;
        }
    }
}

@media only screen and (max-width: 768px) {
    .sidebarNav {
        position: fixed;
        top: 64px;
        left: 0;
        background-color: var(--button-text-color);
    }

    .sideMenuClose {
        min-width: 8px;
        width: 8px;
        padding: 0;
    }

    .sideMenuClose .sidebarScroll {
        height: 100%;
        display: none;
    }
}

/* ==========================================================================
   MAIN WRAPPER
   ========================================================================== */

.mainWrap {
    flex-grow: 4;
    padding: 8px 0;
    height: calc(100vh - 64px);
    overflow: hidden;
    background-color: var(--manual-bg);
}

.container {
    padding: 0 24px;
    width: 100%;
    max-width: 100%;
}

@media only screen and (max-width: 768px) {
    .container {
        padding-right: 8px;
        padding-left: 31px;
    }
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.breadcrumb {
    padding: 12px 16px;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 1.14;
    color: var(--triple-text-color);
}

.breadcrumb ul {
    display: flex;
    justify-content: flex-start;
}

.breadcrumb li {
    padding: 8px 12px 0 24px;
    position: relative;
    max-height: 40px;
}

.breadcrumb li a {
    display: block;
    max-height: 33px;
    overflow: hidden;
    color: var(--triple-text-color);
}

.breadcrumb li:last-child {
    color: var(--main-text-color);
}

.breadcrumb li::before {
    background-image: url(../../images/pages/breadcrumbs-arrow.svg);
    position: absolute;
    right: -13px;
    width: 16px;
    height: 16px;
    content: "";
}

.breadcrumb li:last-child::before {
    background-image: none;
}

@media only screen and (max-width: 768px) {
    .breadcrumb li {
        display: none;
    }

    .breadcrumb li:nth-last-child(-n + 3) {
        display: flex;
        padding: 12px 12px 0px 24px;
        position: relative;
    }

    .breadcrumb ul li:nth-last-child(3) {
        padding: 12px 12px 12px 0px;
    }
}

/* ==========================================================================
     END BREADCRUMBS
     ========================================================================== */

/* ==========================================================================
   PAGE HEAD
   ========================================================================== */

.pageHeading {
    justify-content: flex-start;
    margin-top: 13px;
    align-items: center;
    column-gap: 14px;
}

.pageHeadingInner {
    align-items: center;
    column-gap: 8px;
    margin-top: 13px;
}

.plusIcon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    cursor: pointer;
}

@media (hover: hover) {
    .plusIcon:hover path {
        fill: var(--button-hover-color);
    }
}

.plusIcon:active path {
    fill: var(--button-active-color);
}

.plusIcon:disabled path {
    fill: var(--button-disabled-color);
}

.plusIcon.disabled path {
    fill: var(--button-disabled-color);
}

.contentWrap .plusIcon, .contentWrap .uploadIcon {
    position: absolute;
    top: -32px;
    left: calc(100% - 32px - 24px);
}

.contentWrap .plusIcon.disabled {
    display: none;
}

.btn.fileinput-button input[type="file"] {
    display: none;
}

.filtersIcon {
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
}

.filtersIcon.disabled {
    display: none;
}

.filtersIcon:hover path {
    stroke: var(--button-hover-color);
}

.filtersIcon.disabled path {
    stroke: var(--button-disabled-color);
}

@media only screen and (max-width: 768px) {
    .pageHeading {
        margin-top: 0;
        width: 100%;
    }

    .pageHeadingInner {
        column-gap: 12px;
        margin-top: 0;
    }

    .contentWrap .plusIcon, .contentWrap .uploadIcon {
        position: absolute;
        top: -32px;
        left: calc(100% - 32px - 12px);
    }
}

/* ==========================================================================
   END PAGE HEAD
   ========================================================================== */

/* ==========================================================================
       FILTERS
       ========================================================================== */
.filtersWrap {
    padding-top: 8px;
    padding-left: 16px;
    padding-right: 8px;
    width: 100%;
}

.filtersWrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: var(--button-text-color);
    padding: 24px 8px 32px;
    transition: none;
    width: 100%;
    max-width: 500px;
    box-shadow: 0px 1px 20px rgb(0 0 0 / 15%);
    border-radius: var(--border-radius-lg);
    z-index: 13;
    max-height: calc(100vh - 128px);
    margin-top: 8px;
}

.filtersWrap.active {
    transform: translate(-50%, -50%) scale(1);
    transition: none;
}

.filtersScroll {
    overflow-y: visible;
    height: 100%;
    max-height: calc(100vh - 233px);
    padding-right: 8px;
}

.filtersWrap .editHeading {
    display: block;
    padding-top: 14px;
    padding-bottom: 12px;
}

.filtersWrap .closePopup {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
}

.datepickerFilterScroll > .containerColumn {
    row-gap: 8px;
    align-items: center;
}

.filtersWrap .inputWrap {
    padding-top: 5px;
    width: 100%;
}

.filtersWrap .btn {
    margin-top: 24px;
}

.filtersWrap.active + .popupBg {
    opacity: 1;
    pointer-events: all;
    transition: none;
}

@media only screen and (max-width: 768px) {
    .filtersWrap {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        border-radius: 0;
        height: 100%;
        max-height: calc(100vh - 64px);
        margin-top: 0;
        transform: translate(-50%) scale(0);
        z-index: 1;
    }

    .filtersWrap.active {
        top: 64px;
        transform: translate(-50%) scale(1);
        transition: none;
        padding-bottom: 40px;
    }

    .filtersScroll {
        max-height: calc(100vh - 162px);
    }
}

/* ==========================================================================
         NOTES
         ========================================================================== */

.contentWrap {
    width: 100%;
    padding: 16px 8px 4px 0;
}

.itemsWrap {
    padding: 0;
    width: 100%;
    row-gap: 8px;
    height: 100%;
    overflow-y: hidden;
}

.itemsWrapScroll {
    overflow-y: scroll;
    padding: 0 8px 16px 24px;
    margin: 0;
    width: 100%;
    row-gap: 8px;
    height: 100%;
}

.itemDetailWrapOpen.itemsWrap .itemsWrapScroll {
    padding: 0 16px 16px 24px;
}

.itemDetailWrapOpen.itemsWrap,
.itemEditOpen.itemsWrap {
    width: 72.2%;
}

.item {
    width: 100%;
    justify-content: flex-start;
    background: var(--button-text-color);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    padding: 7px 0;
    border: 1px solid var(--button-text-color);
    cursor: pointer;
}

@media (hover: hover) {
    .item:hover {
        border: 1px solid var(--button-active-color);
    }
}

.itemInnerWrap {
    width: calc(100% - 56px);
}

.itemUserInfo {
    width: 143px;
    align-items: center;
}

.itemUserInfoImgWrap {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    border-radius: 50%;
    overflow: hidden;
}

.itemUserImg {
    object-fit: cover;
    width: 100%;
    border-radius: 50%;
}

.itemUserInfoText {
    align-items: center;
}

.itemUserName {
    font-style: normal;
    font-weight: 600;
    font-size: var(--main-font-size);
    line-height: 1.14;
    text-align: center;
    color: var(--main-text-color);
    padding-top: 2px;
}

.itemDate {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.16;
    color: var(--secondary-text-color);
    padding-top: 2px;
}

.itemText {
    flex-grow: 1;
    width: calc(100% - 56px - 143px);
}

.itemTextInnerWrap {
    width: calc(100%);
}

.itemText span {
    width: calc(100%);
    color: var(--secondary-text-color);
}

.itemText strong {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 1.71;
    color: var(--main-text-color);
}

.visibilityIcon,
.attachedIcon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    position: relative;
}

.itemParams {
    padding: 8px 0;
    column-gap: 8px;
    justify-content: flex-start;
    width: 100%;
}

.noteTypePrivateText {
    width: auto;
}

.visibilityPrivate {
    background-color: var(--red-color);
}

.visibilityPrivate:before {
    content: url(../../images/pages/locked.svg);
    position: absolute;
    top: 2px;
    left: 6px;
}

.visibilityPublicGreen {
    background-color: var(--green-public);
}

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

.visibilityPublicGreen:before,
.visibilityPublicBlue:before {
    content: url(../../images/pages/unlock.svg);
    position: absolute;
    top: 0px;
    left: 0px;
}

.attachedIcon {
    background-color: #e2a00e;
}

.attachedIcon:before {
    content: url(../../images/pages/attached.svg);
    position: absolute;
    top: 0px;
    left: 8px;
}

.noteTypeIcon {
    background-color: #bd3a8a;
    padding: 7px 9px 7px 30px;
    border-radius: 4px;
    position: relative;
    color: var(--button-text-color);
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 0.8;
}

.noteTypePrivateIcon:before {
    content: url(../../images/pages/eye.svg);
    position: absolute;
    top: 6px;
    left: 8px;
}

.noteTypeBoardIcon {
    background-color: #31aca1;
}

.noteTypeBoardIcon:before {
    content: url(../../images/pages/eye-board.svg);
    position: absolute;
    top: 6px;
    left: 8px;
}

.itemControls {
    width: 56px;
    align-items: flex-end;
    row-gap: 8px;
    padding-right: 8px;
}

.iconControl {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
    cursor: pointer;
}

.iconControl svg,
.itemControlFavorite svg,
.dcsfContorlFavorite svg {
    pointer-events: none;
}

.iconControl:active rect,
.iconControl.active rect {
    fill: var(--button-active-color);
    opacity: 1;
}

.iconControl.itemControlClose:active rect,
.iconControl.itemControlEditClose:active rect {
    stroke: var(--button-text-color);
    opacity: 1;
}

.iconControl:active path,
.iconControl.active path {
    fill: var(--button-text-color);
    opacity: 1;
}

.iconControl.itemControlClose:active path,
.iconControl.itemControlEditClose:active path,
.iconControl.itemControlExpand:active path {
    fill: none;
    stroke: var(--button-text-color);
    opacity: 1;
}

.itemControlExpand {
    display: none;
}

.itemControlFavorite {
    height: 24px;
    cursor: pointer;
}

.dcsfContorlFavorite {
    height: 24px;
    cursor: pointer;
}

@media (hover: hover) {
    .iconControl:hover rect {
        fill: var(--button-hover-color);
        opacity: 1;
    }

    .iconControl:hover path {
        fill: var(--button-text-color);
        opacity: 1;
    }

    .iconControl.itemControlClose:hover path,
    .iconControl.itemControlEditClose:hover path,
    .iconControl.itemControlExpand:hover path {
        fill: none;
        stroke: var(--button-text-color);
        opacity: 1;
    }

    .itemControlFavorite:hover svg rect {
        fill: #feb912;
        opacity: 1;
    }

    .dcsfContorlFavorite:hover svg rect {
        fill: #feb912;
        opacity: 1;
    }
}

.itemControlFavorite.active svg rect {
    fill: #feb912;
    opacity: 1;
}

.dcsfContorlFavorite.active svg rect {
    fill: #feb912;
    opacity: 1;
}

@media only screen and (min-width: 1024px) {
    .itemControls {
        width: 120px;
    }

    .item .itemControls {
        width: 56px;
    }

    .itemControlExpand.expand {
        display: block;
    }

    .itemControlExpand.collapse {
        display: none;
    }

    .expanded .itemControlExpand.expand {
        display: none;
    }

    .expanded .itemControlExpand.collapse {
        display: block;
    }
}

@media only screen and (max-width: 1416px) {
    .itemDetailWrapOpen.itemsWrap,
    .itemEditOpen.itemsWrap {
        width: 65%;
    }
}

@media only screen and (max-width: 1200px) {
    .itemDetailWrapOpen.itemsWrap,
    .itemEditOpen.itemsWrap {
        width: 56%;
    }

    .noteTypePrivateText,
    .noteTypeBoardText {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 65%;
        max-width: 176px;
    }

    .noteTypeBoardText {
        max-width: 118px;
    }
}

@media only screen and (max-width: 1024px) {
    .itemDetailWrapOpen.itemsWrap,
    .itemEditOpen.itemsWrap {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .mainWrap {
        height: auto;
        margin-top: 64px;
        min-height: calc(100vh - 64px);
    }

    .contentWrap:not(.accContainer) {
        padding-top: 8px;
        padding-right: 4px;
    }

    .itemsWrapScroll {
        padding-left: 0;
        padding-right: 4px;
    }

    .itemsWrap,
    .itemsWrap.scroll.containerColumn.itemWrapper {
        padding: 0 0 8px 16px;
    }

    .item {
        padding: 8px;
        position: relative;
    }

    .itemInnerWrap {
        flex-direction: column;
        width: 100%;
    }

    .itemUserInfo {
        flex-direction: row;
        align-items: flex-start;
        width: 90%;
    }

    .itemUserName br {
        display: none;
    }

    .noteTypeIcon {
        width: 24px;
        height: 24px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        padding: 0;
    }

    .itemsWrap .itemControls {
        padding-right: 0;
        width: 24px;
        position: absolute;
        right: 8px;
        top: 8px;
    }

    .itemUserInfoText {
        padding-left: 8px;
        padding-top: 10px;
        align-items: flex-start;
    }

    .itemUserName {
        text-align: left;
        padding-top: 0px;
    }

    .itemText {
        width: 100%;
        padding-right: 0;
    }

    .itemParams {
        padding: 8px 0 0;
    }

    .attachedIcon:before {
        top: 1px;
    }

    .noteTypePrivateIcon:before {
        top: 7px;
        left: -9px;
    }

    .noteTypeBoardIcon:before {
        left: -9px;
    }
}

/* ==========================================================================
           NOTES DETAILS
           ========================================================================== */

.itemDetailWrap.expanded {
    background: var(--bg);
}

.itemDetailWrap,
.itemEditWrap {
    padding: 8px 8px 16px 16px;
    width: 27.8%;
    height: 100%;
    overflow-y: auto;
}

.itemDetailWrapScroll,
#edit_block,
.rightSectionWrapper {
    height: 100%;
}

.itemDetailUserInfo {
    width: 100%;
    max-width: 100%;
}

#edit_block.pjaxLoader::after,
.rightSectionWrapper.pjaxLoader::after {
    top: -8px;
    left: -8px;
    right: 0;
    bottom: auto;
    height: 600%;
    border-radius: var(--border-radius-lg);
}

#edit_block.pjaxLoader::before,
.rightSectionWrapper.pjaxLoader::before {
    left: 50%;
    margin-left: -16px;
}

.itemDetailUserName {
    flex-grow: 4;
    padding-left: 8px;
}

.itemDetailUserName .itemUserName {
    text-align: left;
    padding-top: 0;
}

.itemDetailUserName .itemUserName br {
    display: inline;
}

.itemDetailWrap {
    display: none;
}

.itemDetailWrap .itemControls {
    padding-right: 0;
    justify-content: flex-end;
    column-gap: 8px;
}

.itemDetailWrap .itemText {
    padding-top: 8px;
    padding-right: 0;
    width: 100%;
}

.itemDetailWrap .itemText span {
    width: auto;
}

.itemDetailWrapOpen + .itemDetailWrap {
    display: block;
}

.attachedFilesTable.table-striped {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}


.attachedFilesTable.table-striped > tbody > tr:nth-of-type(odd),
.attachedFilesTable.table-striped > tbody > tr {
    --bs-table-accent-bg: white;
    color: var(--button-active-color);
    background-color: var(--button-text-color);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border: none;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.attachedFilesTable.table > :not(caption) > * > * {
    border: none;
    box-shadow: none;
}

.attachedFilesTable.table-striped > tbody > tr > td {
    padding: 0;
    width: auto;
}

.attachedFilesTable .name {
    width: calc(100%);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.attachedFilesTable .name a {
    max-width: calc(100%);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.attachedFilesTable.table-striped > tbody > tr > :nth-last-child(4) {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.attachedFilesTable .preview-upload-img {
    display: block;
    text-align: center;
}

.attachedFilesTable .preview-upload-file {
    width: 24px;
    height: 24px;
    position: relative;
    visibility: hidden;
}

.attachedFilesTable .preview-upload-file::before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../images/pages/jpeg-icon.svg);
    visibility: visible;
}

.template-upload .preview {
    width: 24px;
    height: 24px;
    position: relative;
    background: red;
}

.template-upload .preview::before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../images/pages/jpeg-icon.svg);
    visibility: visible;
}

.template-upload .preview img {
    display: none;
}

.preview-upload-img img {
    max-width: 24px;
    max-height: 24px;
    height: auto;
    width: auto;
    font-size: var(--main-font-size-lg);
}

.attachedFilesTable canvas {
    width: 24px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: none;
}

.attachedFilesTable .text-danger {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
    color: var(--warning-red) !important;
}

.attachedFilesTable .upload-error {
    display: table-row;
}

.attachedFilesTable .upload-error > * {
    display: table-cell;
}

.removeAttachments {
    padding: 4px;
}


.attachedFilesTable .upload-error .label-danger {
    text-align: center;
    width: 20px;
}

.attachedFilesTable .upload-error .label-danger-text {
    text-align: left;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
    color: var(--secondary-text-color);
    padding-left: 0;
    padding-top: 5px;
    vertical-align: top;
}

.attachedFilesTable.table-striped > tbody > tr > td:nth-last-child(3) {
    width: calc(100% - 24px - 16px);
    overflow: hidden;
}

.attachedFilesTable.table-striped > tbody > tr > td:nth-last-child(2) {
    padding: 0;
    width: 0;
}

.attachedFilesTable.table-striped > tbody > tr > td:nth-last-child(2) p,
.attachedFilesTable.table-striped > tbody > tr > td:nth-last-child(2) span {
    display: none;
}

.progress.progress-striped.active {
    position: absolute;
    width: 95%;
    bottom: 0px;
    height: 1px;
    left: 8px;
    background: white;
    border-radius: 50%;
}

.progress-bar {
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--input-active-color);
    transition: width 0.6s ease;
}

.attachedFilesTable.table-striped > tbody > tr > td p {
    margin-bottom: 0;
}

.attachedFilesTable.table-striped > tbody > tr > td .name a {
    color: var(--button-active-color);
}

.attachedFilesTable.table-striped > tbody > tr > td:last-child {
    width: 16px;
    margin-left: 8px;
}

.fileupload-buttonbar .fileinput-button {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #3264E8;
    font-size: var(--main-font-size);
    font-weight: 700;
    text-decoration-line: underline;
    cursor: pointer;
}

.fileupload-buttonbar .fileinput-button input {
    width: 100%;
    cursor: pointer;
    padding: 12px;
    height: 40px;
    left: 0;
    bottom: 0;
    font-size: inherit !important;
}

.editDetailsBtnWrap,
.submitEditForm {
    display: flex;
    justify-content: center;
    padding: 16px 0 32px;
    width: 100%;
    position: sticky;
    bottom: -16px;
    left: -16px;
    right: -8px;
    background: var(--manual-bg);

}

.attachedFiles {
    padding-top: 8px;
    padding-bottom: 4px;
    width: 100%;
}

.attachedFileItem {
    width: 100%;
    padding: 8px;
    background-color: var(--button-text-color);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    margin-bottom: 8px;

    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
}

.attachedFileItem:nth-child(2) {
    margin-bottom: 10px;
}

.attachedFileItem span {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
    color: var(--button-active-color);
    cursor: pointer;
    flex-grow: 1;
}

.attachedFileItem span:hover {
    color: var(--button-hover-color);
}

.downloadAttached,
.deleteAttached,
.cancelAttached {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    cursor: pointer;
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.downloadAttached svg,
.deleteAttached svg,
.cancelAttached svg {
    pointer-events: none;
}

@media (hover: hover) {
    .downloadAttached:hover path {
        fill: var(--button-hover-color);
    }

    .deleteAttached:hover path {
        stroke: var(--button-hover-color);
    }

    .cancelAttached:hover g {
        fill: var(--button-hover-color);
    }
}

.downloadAttached:active path {
    fill: var(--button-active-color);
}

.deleteAttached:active path {
    stroke: var(--button-active-color);
}

.cancelAttached:active g {
    fill: var(--button-active-color);
}

.downloadAttached:disabled path {
    fill: var(--button-disabled-color);
}

.deleteAttached:disabled path {
    stroke: var(--button-disabled-color);
}

.itemDetailBack {
    display: none;
}

@media only screen and (max-width: 1416px) {
    .itemDetailWrap,
    .itemEditWrap {
        padding: 8px 8px 16px 18px;
        width: 35%;
        height: 100%;
        overflow-y: auto;
    }
}

@media only screen and (max-width: 1200px) {
    .itemDetailWrap,
    .itemEditWrap {
        width: 44%;
    }
}

@media only screen and (max-width: 1024px) {
    .itemDetailWrap,
    .itemEditWrap {
        background: var(--button-text-color);
        padding: 24px 8px 24px 0px;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .editDetailsBtnWrap,
    .submitEditForm {
        background: var(--button-text-color);
    }

    .itemDetailWrapScroll {
        overflow-y: auto;
        height: 100%;
        max-height: calc(100vh - 176px);
        padding: 0 8px 0 16px;
    }
}

@media only screen and (max-width: 768px) {
    .itemDetailWrap,
    .itemEditWrap {
        padding: 24px 8px 24px;
        height: 100%;
    }

    .itemDetailWrapScroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        max-height: calc(100vh - 113px);
        padding: 0 8px 0 16px;
        position: relative;
    }

    .notesPage .itemDetailWrapScroll {
        padding: 0 8px 0 8px;
        position: relative;
    }

    .itemUserInfoWrap {
        flex-direction: column-reverse;
        row-gap: 8px;
    }

    .itemDetailWrap .itemControls {
        width: 100%;
    }

    .itemEditWrapControls.itemControls {
        right: 8px;
        top: 0px;
        position: absolute;
    }

    .notesPage .itemDetailWrap .itemUserInfo {
        align-items: center;
        width: 100%;
    }

    .attachedFiles {
        padding-top: 16px;
    }

    .attachedFileItem:nth-child(2) {
        margin-bottom: 4px;
    }

    .itemDetailBack {
        display: flex;
        justify-content: center;
        width: 100%;
        padding-top: 24px;
    }

    .itemDetailWrap .noteTypePrivateIcon {
        width: auto;
        text-indent: 0;
        padding: 7px 9px 7px 30px;
    }

    .itemDetailWrap .noteTypePrivateIcon::before {
        top: 8px;
        left: 8px;
    }

    .editDetailsBtnWrap,
    .submitEditForm {
        justify-content: flex-start;

    }

    .itemEditForm {
        padding-bottom: 100px;
    }
}

/* ==========================================================================
             NOTES EDIT
             ========================================================================== */
.itemEditWrap {
    display: none;
}

.itemEditWrapOpen.itemEditWrap {
    display: block;
}

.editHeading {
    display: none;
}

.itemEditWrapControls.itemControls {
    padding-right: 0;
    width: 100%;
    justify-content: flex-end;
    column-gap: 8px;
}

.itemEditForm {
    width: 100%;
    row-gap: 12px;
    position: relative;
}

.itemEditInnerWrap {
    width: 100%;
    justify-content: space-between;
    column-gap: 8px;
}

.itemEditForm label {
    color: var(--main-text-color);
}

.itemEditForm .form-group,
.itemEditForm .filtersDate {
    margin-bottom: 7px;
}

.itemEditForm .inputWrap {
    width: 100%;
}

.visibilitySwitch {
    width: 64px;
    height: 32px;
    align-self: flex-end;
    margin-bottom: 16px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 32px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--red-color);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:after {
    content: url(../../images/pages/locked.svg);
    position: absolute;
    right: 15px;
    bottom: 1px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

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

input:focus + .slider {
    box-shadow: 0 0 1px var(--green-public);
}

input:checked + .slider:before {
    -webkit-transform: translateX(32px);
    -ms-transform: translateX(32px);
    transform: translateX(32px);
}

input:checked + .slider:after {
    content: url(../../images/pages/unlock.svg);
    position: absolute;
    left: 10px;
    bottom: -3px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider.round {
    border-radius: 34px;
}

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

.itemEditWrap .attachedFiles {
    padding-top: 4px;
}

@media (hover: hover) {
    .addAttachment a:hover path {
        fill: var(--button-hover-color);
    }
}

.addAttachment a:active path {
    fill: var(--button-active-color);
}

.addAttachment a:disabled path {
    fill: var(--button-disabled-color);
}

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

@media only screen and (max-width: 768px) {
    .editHeading {
        display: block;
        text-align: center;
        line-height: 0.9;
        padding-bottom: 16px;
    }

    .itemEditWrap .itemControls {
        right: 8px;
        top: 0px;
        position: absolute;
    }

    .itemEditWrap .addAttachment {
        padding-top: 8px;
    }
}

@media only screen and (min-width: 769px) {
    .expanded.itemDetailWrapOpen.itemsWrap,
    .expanded.itemEditOpen.itemsWrap {
        width: 0;
        overflow: hidden;
        padding: 0 !important;
    }

    .itemDetailWrap.expanded {
        width: 100%;
        margin-left: 24px;
        background: var(--bg);
        border-radius: var(--border-radius-lg);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    }

    .itemDetailWrap.expanded .editDetailsBtnWrap,
    .itemDetailWrap.expanded .submitEditForm {
        background: var(--bg);
    }
}


/* ==========================================================================
             MEETINGS HEAD
             ========================================================================== */
.meeteingsHead {
    align-items: flex-end;
    row-gap: 16px;
    width: 100%;
    padding: 0 24px 29px;
}

.filtersIconGap {
    align-items: center;
    column-gap: 8px;
}

.meetingReportSelect .inputWrap {
    flex-direction: row-reverse;
    margin-right: 8px;
    align-items: center;
    width: 184px;
    max-width: 184px;
}

.meetingReportSelect .inputWrap .select-css {
    padding-left: 16px;
}

.meetingBoardSelect.inputWrap {
    margin-right: 24px;
    padding-left: 0;
    max-width: 200px;
}

.meeteingsHead .selectIcon::after {
    bottom: 10px;
}

.meetingBoardSelect label {
    padding-left: 0;
    padding-right: 8px;
    font-size: var(--main-font-size);
    font-weight: 400;
    color: var(--secondary-text-color);
}

@media only screen and (max-width: 1200px) {
    .meeteingsHead .btnMobileIcon {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        width: 40px;
        height: 40px;
        min-width: 40px;
        padding: 0;
    }

    .meeteingsHead .btnMobileIcon::before {
        display: block;
        width: 40px;
        height: 40px;
        background-image: url(../../images/pages/reports-icon-mobile.svg);
    }
}

@media only screen and (max-width: 1024px) {
    .meeteingsHead {
        flex-direction: column;
        align-items: initial;
        padding: 0 8px 0 16px;
    }

    .meeteingsHead .pageHeading {
        padding-left: 17px;
    }

    .meetingReportSelect {
        width: 100%;
    }

    .meetingBoardSelect.inputWrap {
        padding-left: 8px;
        max-width: 200px;
    }
}

@media only screen and (max-width: 768px) {
    .meetingReportSelect {
        width: 100%;
    }

    .meetingReportSelect .inputWrap {
        width: auto;
    }

    .meetingBoardSelect.inputWrap {
        margin-right: 16px;
        padding-left: 0;
        max-width: 200px;
        min-width: 80px;
    }

    .meeteingsHead .filtersIcon {
        margin-right: 0;
        width: 40px;
    }
}

@media (max-width: 480px) {
    .meetingBoardSelect.inputWrap label {
        display: none;
    }

    .meetingBoardSelect.inputWrap {
        max-width: 150px;
        min-width: 80px;
    }

    .itemControlSort {
        display: none;
    }

    .jstree-default .jstree-anchor {
        min-width: 290px;
    }
}

/* ==========================================================================
             MEETINGS TABS
             ========================================================================== */

.meetingsTabs {
    column-gap: 16px;
    align-items: flex-end;
}

.meetingsTabs .plusIcon {
    margin-top: 0;
}

@media only screen and (max-width: 768px) {
    .meetingsTabs {
        padding-top: 5px;
    }

    .meetingsTabs.container {
        padding-left: 16px;
    }

    .meetingsTabs .plusIcon {
        margin-right: 4px;
    }
}

/* ==========================================================================
             Board Topics & Commitments
             ========================================================================== */
.commitmentTab .item {
    padding-top: 14px;
    padding-bottom: 12px;
}

.commitmentTab .itemUserName {
    padding-top: 8px;
}

.commitmentStatus {
    font-weight: 700;
    font-size: var(--small-text-font-size);
    line-height: 1.16;
    position: relative;
    padding-left: 25px;
    padding-right: 14px;
    padding-bottom: 16px;
    padding-top: 8px;
    align-self: flex-start;
    margin-left: 22px;
}

.commitmentStatus::before {
    position: absolute;
    top: 7px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
    content: "";
    background-repeat: no-repeat;
    background-position: 50%;
}

.commitmentStatus.completed {
    color: var(--success-green);
}

.commitmentStatus.completed::before {
    background-image: url(../../images/pages/completed-icon.svg);
    background-color: var(--success-green);
}

.commitmentStatus.started {
    color: var(--attention-yellow);
}

.commitmentStatus.started::before {
    background-image: url(../../images/pages/started-icon.svg);
    background-color: var(--attention-yellow);
}

.commitmentStatus.notPursued {
    color: var(--warning-red);
}

.commitmentStatus.notPursued::before {
    background-image: url(../../images/pages/not-pursued.svg);
    background-color: var(--warning-red);
}

.commitmentStatus.notStarted {
    color: var(--triple-text-color);
}

.commitmentStatus.notStarted::before {
    background-image: url(../../images/pages/not-started.svg);
    background-color: var(--triple-text-color);
}

.commitmentStatus.notCompleted {
    color: var(--triple-text-color);
}

.commitmentStatus.notCompleted::before {
    background-image: url(../../images/pages/not-completed.svg);
    background-color: var(--triple-text-color);
}

.itemDetailWrap .commitmentStatus {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 9px;
}

.itemDetailWrap .commitmentStatus::before {
    top: 0;
}

.commitmentTab .itemDetailWrap .itemUserName {
    padding-top: 0px;
}

.list p {
    margin-bottom: 0;
    margin-top: 0;
    text-indent: 12px;
    position: relative;
}

.list p::before {
    content: "\2022";
    font-size: 29px;
    position: absolute;
    top: 2px;
    left: -12px;
    color: inherit;
}

.commitmentTab .itemEditWrap textarea,
.meetingTab .itemEditWrap textarea,
.feedbackTab .itemEditWrap textarea {
    height: 88px;
    max-width: 100%;
    min-width: 100%;
    padding-right: 8px;
}

.meetingTab textarea,
.meetingTab textarea.form-control {
    height: 88px;
    min-height: 88px;
    max-width: 100%;
    min-width: 100%;
    padding-right: 8px;
    resize: vertical;
}

@media only screen and (max-width: 768px) {
    .commitmentTab .itemDetailWrap .itemDetailWrapScroll,
    .meetingTab .itemDetailWrap .itemDetailWrapScroll,
    .feedbackTab .itemDetailWrap .itemDetailWrapScroll,
    .eventsTab .itemDetailWrap .itemDetailWrapScroll,
    .boardLinksTab .itemDetailWrap .itemDetailWrapScroll {
        padding-top: 32px;
    }

    .commitmentTab .itemDetailWrapScroll,
    .meetingTab .itemDetailWrapScroll,
    .feedbackTab .itemDetailWrapScroll,
    .eventsTab .itemDetailWrapScroll,
    .boardLinksTab .itemDetailWrapScroll {
        position: relative;
        padding-left: 8px;
    }

    .commitmentTab .itemDetailWrap .itemControls,
    .meetingTab .itemDetailWrap .itemControls,
    .feedbackTab .itemDetailWrap .itemControls,
    .eventsTab .itemDetailWrap .itemControls,
    .boardLinksTab .itemDetailWrap .itemControls {
        position: absolute;
        top: 0;
        right: 8px;
    }

    .commitmentStatus {
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 9px;
    }

    .commitmentStatus::before {
        top: 0;
    }

    .commitmentItemUserInfo {
        width: 90%;
    }

    .commitmentTab .itemDetailWrap .itemUserInfo,
    .meetingTab .itemDetailWrap .itemUserInfo,
    .feedbackTab .itemDetailWrap .itemUserInfo {
        width: 100%;
        align-items: center;
    }

    .commitmentTab .itemUserName {
        padding-top: 2px;
    }
}

/* ==========================================================================
             Board Meeting Updates
             ========================================================================== */

.meetingTab .item .itemUserInfo,
.feedbackTab .item .itemUserInfo {
    padding-top: 2px;
}

.meetingTab .itemInnerWrap,
.feedbackTab .itemInnerWrap {
    padding-top: 6px;
}

.itemSliderWrap {
    width: 100%;
    justify-content: flex-start;
    column-gap: 8px;
    align-items: stretch;
}

.itemSliderWrap strong {
    white-space: nowrap;
    min-width: 115px;
}

.itemDetailWrap .rangeSlider {
    width: calc(100% - 8px);
}

.winAmount {
    color: var(--button-active-color);
    margin-bottom: 12px;
}

.meetingTab .itemEditForm .slideContainer,
.feedbackTab .itemEditForm .slideContainer {
    flex-grow: 1;
    position: relative;
    line-height: 22px;
    padding-right: 6px;
}

.itemEditForm .help-block {
    margin: 0;
}

/* The slider itself */
.sliderRangeWrapper .rangeSlider,
.meetingTab .itemEditForm .rangeSlider,
.feedbackTab .itemEditForm .rangeSlider {
    -webkit-appearance: none;
    width: 100%;
    max-width: none;
    height: 4px;
    background: transparent;
    border-radius: 4px;
    background-image: linear-gradient(
            var(--input-active-color),
            var(--input-active-color)
    );
    background-size: 0% 100%;
    background-repeat: no-repeat;
    outline: 0 none;
    position: relative;
}

.sliderRangeWrapper {
    margin-bottom: 12px;
}


.rangeDashed {
    width: calc(100%);
    height: 4px;
    position: absolute;
    top: 12px;
    right: 6px;
    pointer-events: none;
    overflow: hidden;
}

.rangeDashed .innerDash {
    content: "";
    width: 100%;
    min-width: 290px;
    height: 4px;
    position: absolute;
    top: 0px;
    right: 0;
    background: linear-gradient(
            90deg,
            var(--small-button-bg),
            var(--small-button-bg) calc(12% - 3px),
            transparent calc(12% - 3px),
            transparent 12%,
            var(--small-button-bg) 12%,
            var(--small-button-bg) calc(21% - 3px),
            transparent calc(21% - 3px),
            transparent 21%,
            var(--small-button-bg) 21%,
            var(--small-button-bg) calc(31% - 3px),
            transparent calc(31% - 3px),
            transparent 31%,
            var(--small-button-bg) 31%,
            var(--small-button-bg) calc(40% - 3px),
            transparent calc(40% - 3px),
            transparent 40%,
            var(--small-button-bg) 40%,
            var(--small-button-bg) calc(50% - 3px),
            transparent calc(50% - 3px),
            transparent 50%,
            var(--small-button-bg) 50%,
            var(--small-button-bg) calc(59% - 3px),
            transparent calc(59% - 3px),
            transparent 59%,
            var(--small-button-bg) 59%,
            var(--small-button-bg) calc(69% - 3px),
            transparent calc(69% - 3px),
            transparent 69%,
            var(--small-button-bg) 69%,
            var(--small-button-bg) calc(78% - 3px),
            transparent calc(78% - 3px),
            transparent 78%,
            var(--small-button-bg) 78%,
            var(--small-button-bg) calc(88% - 3px),
            transparent calc(88% - 3px),
            transparent 88%,
            var(--small-button-bg) 88%,
            var(--small-button-bg) calc(100% - 3px),
            transparent calc(100% - 3px),
            transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}


.expanded .rangeDashed .innerDash {
    background: linear-gradient(
            90deg,
            var(--small-button-bg),
            var(--small-button-bg) calc(10.5% - 3px),
            transparent calc(10.5% - 3px),
            transparent 10.5%,
            var(--small-button-bg) 10.5%,
            var(--small-button-bg) calc(20.5% - 3px),
            transparent calc(20.5% - 3px),
            transparent 20.5%,
            var(--small-button-bg) 20.5%,
            var(--small-button-bg) calc(30.5% - 3px),
            transparent calc(30.5% - 3px),
            transparent 30.5%,
            var(--small-button-bg) 30.5%,
            var(--small-button-bg) calc(40% - 3px),
            transparent calc(40% - 3px),
            transparent 40%,
            var(--small-button-bg) 40%,
            var(--small-button-bg) calc(50% - 3px),
            transparent calc(50% - 3px),
            transparent 50%,
            var(--small-button-bg) 50%,
            var(--small-button-bg) calc(60% - 3px),
            transparent calc(60% - 3px),
            transparent 60%,
            var(--small-button-bg) 60%,
            var(--small-button-bg) calc(69.5% - 3px),
            transparent calc(69.5% - 3px),
            transparent 69.5%,
            var(--small-button-bg) 69.5%,
            var(--small-button-bg) calc(79.5% - 3px),
            transparent calc(79.5% - 3px),
            transparent 79.5%,
            var(--small-button-bg) 79.5%,
            var(--small-button-bg) calc(89.5% - 3px),
            transparent calc(89.5% - 3px),
            transparent 89.5%,
            var(--small-button-bg) 89.5%,
            var(--small-button-bg) calc(100% - 3px),
            transparent calc(100% - 3px),
            transparent 100%
    );
}

.meetingTab .itemEditForm .range-text,
.feedbackTab .itemEditForm .range-text {
    z-index: 2;
}

.itemEditForm .itemSliderWrap strong {
    padding-left: 7px;
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 1.15;
    padding-bottom: 2px;
}

.rangeNumbers {
    width: 100%;
    font-weight: 700;
    font-size: 9px;
    line-height: 2.44;
    color: var(--secondary-text-color);
    padding: 0 2px 0 4px;
}

.rangeNumbers span {
    width: 11px;
}

.feedbackTab .itemSliderWrap strong {
    min-width: 88px;
}

.feedbackTab .rangeSlider {
    max-width: 208px;
}

.feedbackTab .itemDetailWrap .itemSliderWrap strong {
    min-width: 112px;
}

.detailSliderWrap {
    width: 100%;
}

.feedbackTab .itemEditForm .itemSliderWrap {
    padding-left: 6px;
}

.feedbackTab .itemEditForm .itemSliderWrap strong {
    padding-left: 0;
}

.page.app-message {
    width: 100%;
    background: transparent !important;
    margin: 0 !important;
}

.page.app-message:hover {
    color: var(--button-hover-color);
    border: none;
}

.app-message .alert-info {
    background: var(--attention-yellow);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    color: white;
    padding: 8px;
    border: none;
    margin: 8px 8px 8px 16px;
    font-weight: 700;
    font-size: var(--title-font-size-sm);
    line-height: 1.5;
}

@media only screen and (max-width: 768px) {
    .meetingTab .contentWrap,
    .feedbackTab .contentWrap {
        padding-top: 13px;
    }

    .meetingTab .item .itemUserInfo,
    .feedbackTab .item .itemUserInfo {
        padding-top: 0;
        align-items: center;
    }

    .meetingTab .itemInnerWrap,
    .feedbackTab .itemInnerWrap {
        padding-top: 0px;
    }

    .meetingTab .itemUserInfoText,
    .feedbackTab .itemUserInfoText {
        padding-left: 6px;
        padding-top: 0px;
    }

    .meetingTab .itemDetailWrap .itemText,
    .feedbackTab .itemDetailWrap .itemText {
        padding-top: 0;
    }

    .meetingTab .itemEditForm {
        row-gap: 16px;
    }

    .feedbackTab .rangeSlider {
        width: 100%;
    }
}

/* ==========================================================================
             MY BOARD
             ========================================================================== */

.myBoardHead {
    align-items: flex-end;
    width: 100%;
    padding: 0 24px 29px;
    row-gap: 16px;
}

.myBoardHead .inputWrap {
    max-width: 250px;
    flex-direction: row-reverse;
    align-items: center;
    width: 200px;
}

.myBoardHead .inputWrap label {
    margin-right: 8px;
}

@media only screen and (max-width: 1024px) {
    .myBoardHead {
        flex-direction: column;
        align-items: initial;
        padding: 0 8px 0 16px;
    }

    .myBoardHead .pageHeading {
        padding-left: 17px;
        height: 32px;
    }
}

@media only screen and (max-width: 768px) {
    .myBoardHead .filtersIcon {
        margin-right: 0;
        width: 40px;
    }
}

/* ==========================================================================
             MY BOARD EVENTS TAB
             ========================================================================== */

.eventsTab .filtersWrap {
    padding-top: 14px;
}

.eventsTab .filtersWrap .inputWrap {
    padding-top: 0;
    width: auto;
    max-width: 64px;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.eventsTab .filtersWrap .inputWrap input {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.filterMonthsWrap {
    width: calc(100% - 168px);
}


.eventsTab .btn-secondary.month {
    width: calc((100% - 11 * 8px) / 12);
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.eventsTab .btn-secondary.month.active {
    color: var(--button-text-color);
    background: var(--button-active-color);
}

.btnArrow {
    border-radius: 50%;
    min-width: 40px;
    min-height: 40px;
    background: transparent;
    border: 1px solid var(--triple-text-color);
    position: relative;
}

@media (hover: hover) {
    .filterYearWrap button.btnArrow:hover {
        background: transparent;
        border-color: var(--input-hover-color);
    }

    .filterYearWrap button.btnArrow:hover path {
        stroke: var(--input-hover-color);
    }

    .eventsTab .btn-secondary.month.active:hover {
        background: var(--button-hover-color);
    }
}

.filterYearWrap button.btnArrow:active {
    background: transparent;
    border: 1px solid var(--input-active-color);
}

.filterYearWrap button.btnArrow:active path {
    stroke: var(--input-active-color);
}

.filterYearWrap button.btnArrow:disabled path {
    stroke: var(--input-disabled-color);
}

.filtersWrap .containerRow.filterYearWrap {
    column-gap: 8px;
}

.myBoardTabContent .filtersScroll {
    padding-left: 8px;
    padding-top: 16px;
    margin-top: 8px;
}

.containerRow.filterMonthsWrap {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
    width: 100%;
    max-width: 320px;
    column-gap: 8px;
    row-gap: 8px;
    margin-bottom: 28px;
}

.eventsTab .btn-secondary.month {
    width: 64px;
    margin-top: 0;
}

.datepicker table tr td span.active:active:hover,
.datepicker table tr td span.active:hover:active:hover,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active:hover.active:hover {
    background: var(--button-hover-color);
    color: var(--button-text-color);
}

.datepickerFilterScroll .datepicker table tr td span.focused {
    background: var(--button-secondary-bg);
}

.datepickerFilterScroll .datepicker table tr td span:hover {
    background: var(--button-hover-color);
    color: var(--button-text-color);
}

.datepickerFilterScroll .datepicker table tr td span.focused.active {
    background: var(--button-active-color);
}

.datepickerFilterScroll .datepicker table tr td span.active {
    background: var(--button-active-color);
}

.datepickerFilterScroll {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.datepickerFilterScroll .datepicker {
    width: calc(64px * 4 + 8px * 4 + 2px);
}

.datepickerFilterScroll .datepicker thead tr:last-child {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    justify-content: center;

}

.datepickerFilterScroll .datepicker .prev,
.datepickerFilterScroll .datepicker .next {
    border-radius: 50%;
    min-width: 40px;
    min-height: 40px;
    background: transparent;
    border: 1px solid var(--triple-text-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    font-size: 0;
}

.datepickerFilterScroll .datepicker .prev:hover,
.datepickerFilterScroll .datepicker .next:hover {
    border: 1px solid var(--input-hover-color);
}

.datepickerFilterScroll .datepicker .prev,
.datepickerFilterScroll .datepicker .next {
    align-self: flex-end;

}

.datepickerFilterScroll .datepicker .prev:before,
.datepickerFilterScroll .datepicker .next:before {
    content: '';
    width: 6px;
    height: 12px;
    position: absolute;
    left: 15px;
    top: 13px;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 0.5L1 6L5.5 11.5' stroke='%23787486' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
}

.datepickerFilterScroll .datepicker .prev:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 0.5L1 6L5.5 11.5' stroke='%232c81fb' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
}

.datepickerFilterScroll .datepicker .next:before {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L5 6L0.5 11.5' stroke='%23787486' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
    left: 17px;
}

.datepickerFilterScroll .datepicker .next:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L5 6L0.5 11.5' stroke='%232c81fb' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");

}

.datepickerFilterScroll .datepicker .next {
    align-self: flex-start;
}

.datepickerFilterScroll .datepicker .datepicker-switch {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
}

#multiMonthPicker .datepicker .datepicker-switch {
    width: 72px;
}

#multiMonthPicker {
    max-width: calc(64px * 6 + 8px * 6 + 2px);
}

#multiMonthPicker .datepicker {
    width: calc(64px * 6 + 8px * 6 + 2px);
}

#multiMonthPicker table tr td {
    padding-top: 16px;
}

#multiMonthPicker table tbody tr td {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}

.datepickerFilterScroll .filterMonthsWrap table tr td {
    width: auto;
    text-align: center;
}

.datepickerFilterScroll .filterMonthsWrap table tr td span {
    display: inline-block;
    height: 40px;
    margin: 4px !important;
    cursor: pointer;
    float: none;
}

.datepickerFilterScroll .filterMonthsWrap .datepicker-months td {
    padding-top: 30px;
    text-align: center;
}

.datepickerFilterScroll .filterMonthsWrap .month {
    width: 64px;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    border-radius: 6px;
    padding: 12px 15px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: var(--button-secondary-color);
    background: var(--button-secondary-bg);
    border: none;
    white-space: nowrap;
}

@media only screen and (max-width: 768px) {
    #multiMonthPicker {
        max-width: calc(64px * 4 + 8px * 4 + 2px);
    }

    #multiMonthPicker .datepicker {
        width: calc(64px * 4 + 8px * 4 + 2px);
    }
}

/* ==========================================================================
            EVENTS LIST
             ========================================================================== */
.eventsList.itemDetailWrapOpen.itemsWrap,
.eventsList.itemEditOpen.itemsWrap {
    padding-right: 8px;
}

.eventsList .item {
    position: relative;
}

.eventsList .itemInnerWrap {
    padding-top: 5px;
}

.eventsList .itemText {
    max-width: calc(100% - 79px - 8px);
}

.eventWrap {
    width: 100%;
}

.itemBange {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 16px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.pastEvent .itemBange {
    background: linear-gradient(
            90deg,
            rgba(187, 185, 194, 1) 0%,
            rgba(187, 185, 194, 1) 50%,
            rgba(187, 185, 194, 0) 50%,
            rgba(187, 185, 194, 0) 100%
    );
}

.todayEvent .itemBange {
    background: linear-gradient(
            90deg,
            rgba(131, 194, 157, 1) 0%,
            rgba(131, 194, 157, 1) 50%,
            rgba(131, 194, 157, 0) 50%,
            rgba(131, 194, 157, 0) 100%
    );
}

.futureEvent .itemBange {
    background: linear-gradient(
            90deg,
            rgba(243, 167, 59, 1) 0%,
            rgba(243, 167, 59, 1) 50%,
            rgba(243, 167, 59, 0) 50%,
            rgba(243, 167, 59, 0) 100%
    );
}

.todayBange {
    background: var(--today-event-color);
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 1.7;
    color: var(--button-text-color);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    position: absolute;
    bottom: 15px;
    left: 8px;
    padding: 4px 15px 4px 18px;
}

.eventDate {
    margin-left: 8px;
    min-width: 79px;
    align-items: center;
}

.eventDay {
    color: var(--button-active-color);
}

.eventsList .eventName {
    color: var(--main-text-color);
    padding-bottom: 2px;
}

.eventsList .eventDescription {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 3.6em; /* I needed this to get it to work */
    overflow: hidden;
    color: var(--secondary-text-color);
    max-width: calc(100%);
    min-height: 48px;
}

.eventDetails {
    padding: 8px 8px 2px 87px;
    width: 100%;
    justify-content: flex-start;
    column-gap: 8px;
}

.eventTime {
    min-width: 166px;
    font-weight: 500;
    justify-content: flex-start;
}

.eventTime,
.eventLocation,
.eventDate,
.eventHost {
    align-items: center;
    column-gap: 7px;
}

.eventLocation {
    overflow: hidden;
    flex-grow: 1;
    justify-content: flex-start;
    min-width: 100px;
}

.eventTimeIcon,
.eventLocationIcon,
.eventDateIcon,
.eventHostIcon {
    max-height: 16px;
}

.pastEvent .eventTime path,
.pastEvent .eventLocation path,
.pastEvent .eventTime circle,
.pastEvent .eventLocation circle,
.pastEvent .eventHost path,
.pastEvent .eventHost circle {
    stroke: var(--secondary-text-color);
}

.eventLocation span,
.eventHost span {
    max-width: calc(100% - 16px);
    font-weight: 500;
}

.eventDate span {
    font-weight: 500;
}

.eventActions {
    column-gap: 8px;
    align-items: center;
}

.eventActions img {
    width: 100%;
    pointer-events: none;
}

.eventActions a:not(.link) {
    display: block;
    width: 24px;
    height: 24px;
}

.eventActions .link {
    padding-left: 8px;
    background: transparent;
}

@media (hover: hover) {
    .eventActions .link:hover {
        background: transparent;
    }
}

.eventActions .link:active {
    background: transparent;
}

.pastEvent .eventMonth,
.pastEvent .eventDay,
.pastEvent .eventName,
.pastEvent .eventTime,
.pastEvent .eventLocation,
.pastEvent .eventActions .link,
.pastEvent .eventHost {
    color: var(--secondary-text-color);
}

.pastEvent .eventActions .link,
.pastEvent .eventHost .link {
    color: var(--button-disabled-color);
}

.pastEvent .eventName .targetLink:hover {
    color: var(--inline-link-color);
}

.pastEvent .eventActions img {
    opacity: 0.5;
}

.itemDetailWrap .eventDetails {
    padding: 0;
}

.itemDetailWrap .eventDate {
    margin-left: 0;
}

.itemDetailWrap .eventLocation span {
    white-space: normal;
}

.eventsTab .itemDetailWrap .itemText span {
    padding-top: 6px;
}

.itemDetailWrap .eventDescription {
    padding-top: 12px;
    color: var(--secondary-text-color);
}

.itemDetailWrap .eventActions {
    width: 100%;
    justify-content: flex-start;
    margin-top: 32px;
}

.itemDetailWrap .eventActions .btn {
    margin-left: auto;
}

.itemDetailWrap .eventName {
    color: var(--main-text-color);
}

.itemDetailWrap .eventName .targetLink {
    color: var(--inline-link-color);
}

.itemDetailWrap .eventActions a:not(.link) {
    width: 40px;
    height: 40px;
}

.itemDetailWrap .eventLocation {
    align-items: baseline;
}

.eventActionsInner {
    flex-grow: 1;
    justify-content: flex-start;
    column-gap: 8px;
}

.itemDetailWrap .eventActions .link {
    background-color: var(--button-active-color);
    color: var(--button-text-color);
    text-decoration: none;
    padding: 12px 16px;
}

.eventsTab textarea {
    height: 184px;
    box-sizing: border-box;
}

.attendance.link {
    padding-right: 0;
}

@media only screen and (max-width: 1200px) {
    .itemDetailWrapOpen .eventDetails,
    .itemEditOpen .eventDetails {
        flex-direction: column;
        row-gap: 8px;
    }

    .itemDetailWrapOpen .eventLocation,
    .itemEditOpen .eventLocation {
        max-width: calc(100% - 79px - 8px);
    }
}

@media only screen and (max-width: 1024px) {
    .eventDetails {
        flex-direction: column;
        row-gap: 8px;
    }

    .eventLocation {
        max-width: calc(100% - 79px - 8px);
    }
}

@media only screen and (max-width: 768px) {
    .myBoardTabContent .contentWrap {
        padding-top: 11px;
    }

    .eventsList .itemInnerWrap {
        padding-top: 0px;
    }

    .eventDate {
        margin-left: 8px;
        min-width: auto;
        flex-direction: row;
        column-gap: 5px;
        align-items: center;
    }

    .todayBange {
        position: static;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        margin-left: 4px;
        padding: 4px 10px;
    }

    .eventsList .itemText {
        max-width: calc(100% - 32px - 8px);
        padding-left: 8px;
        padding-top: 8px;
    }

    .eventDetails {
        flex-direction: column;
        row-gap: 0px;
        padding-left: 8px;
        padding-top: 0;
    }

    .eventActions {
        padding-top: 8px;
    }

    .itemDetailWrap .eventActions {
        margin-top: 24px;
        margin-bottom: 16px;
    }

    .eventLocation {
        max-width: calc(100% - 8px);
    }

    .modal:not(#no-internet.attendancePopupWrapper) .modal-dialog {
        max-width: 100%;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .morePopup .attendancePopup {
        z-index: 15;
    }

    .morePopup .attendancePopup ~ .popupBg {
        display: none;
    }

    .morePopup .popupBg {
        z-index: 14;
    }
}

.attendancePopup,
.modal:not(#no-internet.attendancePopupWrapper) .modal-dialog {
    max-width: 384px;
}

.attendancePopupWrapper .popupHeading {
    padding-top: 13px;
    color: var(--main-text-color);
}

@media only screen and (max-width: 768px) {

    .modal:not(#no-internet.attendancePopupWrapper) .modal-dialog {
        max-width: 100%;
    }
}

.attendancePopupWrapper .form-group {
    justify-content: center;
    column-gap: 8px;
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.selectBackgroundModal:not(#no-internet.attendancePopupWrapper) .modal-dialog {
    width: 76.5%;
    max-width: 1104px;
}

.selectBackgroundModal:not(#no-internet.attendancePopupWrapper) .modal-content {
    padding: 40px 0px 32px;
}

.checkboxWrap {
    max-width: 223px;
    margin: 0 auto;
    justify-content: flex-start;
    padding-top: 32px;
    padding-bottom: 16px;
    row-gap: 16px;
}

.checkbox {
    --background: #fff;
    --border: #a2a8b8;
    --border-active: #83c29d;
    --border-hover: #83c29d;
    --tick: #fff;
    position: relative;
    display: flex;
    column-gap: 16px;
    cursor: pointer;
    align-items: center;
}

.checkbox input,
.checkbox svg {
    width: 24px;
    min-width: 24px;
    height: 24px;
    display: block;
}

.checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    outline: none;
    background: var(--background);
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    transition: box-shadow 0.3s;
    box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));

}

@media (hover: hover) {
    .checkbox input:hover {
        --s: 2px;
        --b: var(--border-hover);
    }
}

.checkbox input:checked {
    --b: var(--border-active);
    background: var(--border-active);
}

.checkbox svg {
    pointer-events: none;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--stroke, var(--tick));
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transform: scale(var(--scale, 1)) translateZ(0);
}

.checkbox.path input:checked {
    --s: 2px;
    transition-delay: 0.4s;
}

.checkbox.path input:checked + svg {
    --a: 16.1 86.12;
    --o: 102.22;
}

.checkbox.path svg {
    stroke-dasharray: var(--a, 86.12);
    stroke-dashoffset: var(--o, 86.12);
    transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}

.checkbox.bounce {
    --stroke: var(--tick);
}

.checkbox.bounce input:checked {
    --s: 11px;
}

.checkbox.bounce input:checked + svg {
    animation: bounce 0.4s linear forwards 0.2s;
}

.checkbox.bounce svg {
    --scale: 0;
}

@keyframes bounce {
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

/* ==========================================================================
            BOARD MESSAGING
             ========================================================================== */
.messagesMainWrap {
    width: 100%;
    height: calc(100vh - 243px);
    padding: 24px 8px 64px 0;
    position: relative;
}

.messagesWrap {
    padding: 0;
    width: 100%;
    row-gap: 16px;
}

.messagesItem {
    width: 100%;
    justify-content: flex-start;
}

.messagesItem:not(.messagesItemRight) + .messagesItem.messagesItemRight {
    margin-top: 16px;
}

.messagesItem.messagesItemRight + .messagesItem:not(.messagesItemRight) {
    margin-top: 16px;
}

.messageUserPhoto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    background-image: url(../../images/pages/no-photo.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;

}

.messageUserPhoto img {
    height: 100%;
    width: auto;
}

.messageItemTextWrap {
    width: calc(100% - 56px * 2 - 8px);
    padding-left: 8px;
    row-gap: 8px;
}

.messageItemTextInner {
    background: var(--button-text-color);
    padding: 8px 16px 8px 16px;
    row-gap: 4px;
    border-radius: var(--border-radius-lg);
    border-top-left-radius: 0;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.messageUserName {
    width: 100%;
    padding-top: 2px;
    color: var(--main-text-color);
}

.messageItemText {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
    color: var(--secondary-text-color);
    width: 100%;
    column-gap: 16px;
    align-items: flex-end;
}

.messageTime {
    min-width: 30px;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 2;
}

.messagesItemRight {
    flex-direction: row-reverse;
}

.messagesItemRight .messageItemTextInner {
    background: var(--button-active-color);
}

.messagesItemRight .messageItemText,
.messagesItemRight .messageUserName {
    color: var(--button-text-color);
}

.messagesItemRight .messageItemTextWrap {
    padding-left: 0;
    padding-right: 8px;
    align-items: flex-end;
}

.messagesItemRight .messageItemTextInner {
    border-radius: var(--border-radius-lg);
    border-top-right-radius: 0;
}

.messagesInputWrap {
    padding: 1px 88px 23px;
    column-gap: 16px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0;
    background-color: rgba(249, 249, 251);
    z-index: 1;
}

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

.messagesInputWrap .help-block {
    position: absolute;
    top: 44px;
}

@media only screen and (max-width: 1024px) {
    .messagesMainWrap {
        height: calc(100vh - 271px);
    }
}

@media only screen and (max-width: 768px) {
    .messagesMainWrap {
        padding-top: 8px;
    }

    .messagesMainWrap::after {
        display: none;
    }

    .messagesInputWrap {
        position: fixed;
        background-color: var(--manual-bg);
        padding: 8px 16px 8px 16px;
    }

    .messagesWrap {
        padding: 0 8px 8px 16px;
    }

    .messageItemTextWrap {
        width: calc(100% - 56px);
    }
}

/* ==========================================================================
            DOCUMENTS FILTERS
             ========================================================================== */

.documentsTab .filtersWrap {
    padding-top: 6px;
}

.documentsTab .filtersWrap .documentsFilters {
    width: 100%;
    justify-content: space-between;
}

.documentsFiltersInner {
    width: 100%;
}

.documentsFilterBtns {
    flex-grow: 1;
    width: 100%;
}

.filtersWrap .documentsFilterBtns {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 8px;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 8px;
}

.documentsFilterBtns button.btn {
    margin-top: 0;
}

.documentsFilterBtns button {
    max-width: 64px;
    width: 20%;
}

.documentsFilterBtns button:active {
    background: var(--button-secondary-bg);
}

@media (hover: hover) {
    .documentsFilterBtns .btn:hover {
        background: var(--button-hover-color);
    }
}

.documentsTab .btn-secondary.active {
    color: var(--button-text-color);
    background: var(--button-active-color);
}

/* ==========================================================================
            DOCUMENTS LIST
             ========================================================================== */
.documentsTab .list-view {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 8px;
    height: auto;
    max-height: 100%;
}

.documentsTab .itemsWrap.itemDetailWrapOpen {
    padding-right: 16px;
}

.documentsTab .item {
    width: calc(33.333% - 16px / 3);
    padding-left: 8px;
    padding-bottom: 0;
    align-items: stretch;
}

.documentsTab .itemInnerWrap {
    width: calc(100% - 32px);
    padding-right: 8px;
}

.documentsTab .itemUserInfo {
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
}

.documentsTab .itemUserName {
    font-weight: 400;
    color: var(--secondary-text-color);
    padding-top: 0;
    text-align: left;
}

.documentsTab .itemUserInfoImgWrap {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.itemParamsInner {
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
    column-gap: 6px;
}

.documentsTab .itemText {
    width: 100%;
    word-break: break-word;
}

.documentName {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 1.14;
    padding-top: 2px;
    height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 3.6em;
    overflow: hidden;
}

.documentsTab .itemParams {
    align-items: center;
    column-gap: 6px;
    position: relative;
    padding-top: 6px;
    padding-right: 8px;
}

.documentFormat {
    min-width: 48px;
    padding: 7px 8px;
    color: var(--button-text-color);
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 0.8;
    border-radius: 6px;
    text-align: center;
    background: var(--secondary-text-color);
}

.documentFormat.jpeg,
.documentFormat.jpg {
    background: #f36fa2;
}

.documentFormat.png {
    background: #e54887;
}

.documentFormat.pdf {
    background: #33a8a1;
}

.documentFormat.docx {
    background: #9a8aee;
}

.documentUploadDate {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 0.8;
}

.documentsTab .itemControls {
    width: 32px;
}

.itemControlDownload {
    height: 24px;
    cursor: pointer;
}

.itemControlDownload svg {
    pointer-events: none;
}

@media (hover: hover) {
    .itemControlDownload:hover path:first-child {
        fill: var(--button-hover-color);
    }
}

.itemControlDownload:active path:first-child {
    fill: var(--button-active-color);
}

.itemControlDownload:disabled path:first-child {
    fill: var(--button-disabled-color);
}

.documentsTab .itemDetailWrap .itemControls {
    width: 100%;
}

.detailDocumentName {
    padding-right: 24px;
    line-height: 1.05;
    width: 100%;
    text-align: left;
}

.documentPreview {
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    max-width: 188px;
    max-height: 256px;
    padding: 36px 0 32px;
    box-sizing: content-box;
}

.documentPreview .fi {
    width: 188px;
    height: 256px;
}

.documentPreview .fi-content {
    text-align: center;
    line-height: 1.05;
    font-size: var(--main-font-size-lg);
    font-weight: 700;
    text-transform: uppercase;
}

.documentPreview .fi:hover:not(.fi-no-hover) {
    transform: none;
}

.documentPreview img {
    border-radius: 6px;
    width: 100%;
    height: auto;
}

.documentDetailInner {
    align-items: center;
    padding-bottom: 16px;
}

@media only screen and (max-width: 1200px) {
    .documentsTab .item {
        width: calc(50% - 8px / 2);
    }
}

@media only screen and (max-width: 1024px) {
    .detailDocumentName {
        padding-right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .documentsTab .item {
        width: 100%;
        padding-bottom: 8px;
    }

    .documentsTab .itemParams {
        padding-right: 0;
    }

    .documentsTab .itemUserInfoText {
        padding-left: 0px;
        padding-top: 6px;
    }

    .documentsTab .itemText {
        padding-top: 3px;
    }
}

/* ==========================================================================
            BOARD LINKS FILTERS
             ========================================================================== */

.linksFilters {
    width: 100%;
}

/* ==========================================================================
            BOARD LINKS LIST
             ========================================================================== */

.boardLinksTab .list-view {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 8px;
    height: auto;
    max-height: 100%;
}

.boardLinksTab .itemsWrap.itemDetailWrapOpen {
    padding-right: 16px;
}

.boardLinksTab .item {
    width: calc(33.333% - 16px / 3);
    padding-left: 8px;
}

.linkWrap {
    width: 100%;
}

.boardLinksTab .itemsWrap .itemControls {
    width: 32px;
}

.boardLinksTab .itemInnerWrap {
    width: 100%;
    padding-bottom: 12px;
}

.boardLinksTab .itemTextInnerWrap {
    width: calc(100% - 32px);
}

.boardLinkName {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 1.14;
    width: calc(100%);
    padding-right: 16px;
    padding-top: 11px;
}

.boardLink {
    width: calc(100%);
    padding-right: 16px;
    padding-top: 8px;
    padding-left: 0;
    text-decoration: none;
}

.boardLinksTab .itemText {
    width: 99%;
    color: var(--secondary-text-color);
    height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 3.6em;
    overflow: hidden;
}

.boardLinksTab .itemParams {
    align-items: center;
    justify-content: space-between;
    padding: 13px 8px 0 0;
}

.linkUploadDate {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 0.8;
    color: var(--secondary-text-color);
}

.itemControlLink {
    height: 24px;
    cursor: pointer;
}

.itemControlLink svg {
    pointer-events: none;
}

.itemControlLink svg {
    pointer-events: none;
}

@media (hover: hover) {
    .itemControlLink:hover path:first-child {
        fill: var(--button-hover-color);
    }
}

.itemControlLink:active path:first-child {
    fill: var(--button-active-color);
}

.boardLinksTab .itemControls {
    width: 100%;
}

.boardLinkDetailInner {
    align-items: center;
}

.boardLinksTab .boardLinkDetailInner .itemText {
    height: auto;
    display: block;
    max-height: 100%;
    overflow: visible;
    padding-bottom: 16px;
    padding-top: 10px;
}

.boardLinksTab .boardLinkDetailInner .linkUploadDate {
    padding-bottom: 32px;
    align-self: self-start;
}

.detailboardLinkName {
    text-align: left;
    width: 100%;
    padding-top: 8px;
}

@media only screen and (max-width: 1200px) {
    .boardLinksTab .item {
        width: calc(50% - 8px / 2);
    }
}

@media only screen and (max-width: 768px) {
    .boardLinksTab .itemsWrap .itemTextInnerWrap .itemControls {
        position: static;
    }

    .boardLinksTab .item {
        width: 100%;
        padding-bottom: 8px;
    }

    .boardLinksTab .itemParams {
        padding-right: 0;
    }
}

/* ==========================================================================
            TABenos Charter
             ========================================================================== */

.TABenosCharterTab .wysiwyg {
    width: 100%;
    padding: 0 16px 0 24px;
}

.TABenosCharterTab textarea {
    height: 184px;
}

.wysiwyg-btn {
    text-align: center;
    padding-top: 32px;
}

.TABenosCharterMemberText {
    padding: 0 16px;
}

.tebenosCharterWrap {
    padding-top: 0;
}

.tebenosCharterBtn {
    display: block;
}

@media only screen and (max-width: 768px) {
    .TABenosCharterTab .wysiwyg {
        padding: 0 8px 0 16px;
    }
}

/* ==========================================================================
            BOARD DIRECTORY
             ========================================================================== */

.boardDirectoryTab .list-view {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 8px;
    height: auto;
    max-height: 100%;
}

.boardDirectoryTab .itemsWrap.itemDetailWrapOpen {
    padding-right: 16px;
}

.boardDirectoryTab .item {
    width: calc(25% - 24px / 4);
    padding: 6px 8px 8px;
}

.itemDetailWrapOpen .boardDirectoryTab .item {
    width: calc(33.333% - 16px / 3);
}

.boardDirectoryTab .itemInnerWrap {
    width: 100%;
    column-gap: 7px;
}

.boardDirectoryTab .itemUserImgWrap {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    position: relative;
}

.itemUserImgWrap.online::before,
.itemUserImgWrap.offline::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    background-color: #83c29d;
    border-radius: 50%;
    border: 3px solid #fff;
    box-sizing: border-box;
    z-index: 1;
}

.itemUserImgWrap.offline::before {
    background-color: #c92c20;
}

.boardDirectoryTab .itemUserImg {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.boardDirectoryTab .itemUserInfo {
    flex-grow: 1;
    align-items: flex-start;
}


.boardDirectoryTab .itemUserInfo {
    flex-grow: 1;
    align-items: flex-start;
    width: calc(100% - 47px);
}

.boardDirectoryTab .itemUserInfoText {
    align-items: flex-start;
    flex-grow: 1;
    width: calc(100%);
}

.boardDirectoryTab .itemUserName {
    font-weight: 500;
    width: calc(100%);
    text-align: left;
}

.boardDirectoryTab .itemCompanyName {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.5;
    color: var(--secondary-text-color);
    width: calc(100%);
}

.itemDirectoryActions {
    width: 100%;
    column-gap: 16px;
    align-items: flex-end;
}

.chartsWrap {
    flex-grow: 1;
    column-gap: 24px;
    padding-top: 7px;
    max-width: 174px;
}

.vBarWrap {
    width: calc(50% - 12px);
}

.vbar {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
    height: 120px;
    background: repeating-linear-gradient(
            to bottom,
            transparent,
            rgba(120, 116, 134, 0.2) 1px,
            transparent 1px,
            transparent 20%,
            rgba(120, 116, 134, 0.2) 1px
    );
    position: relative;
}

.itemDetailWrap .vbar::before {
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(120, 116, 134, 0.1);
}

.vbarPreview.vbar {
    height: 24px;
    padding-right: 4px;
    column-gap: 4px;
    background: none;
    position: static;
}

.vbarTitle {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    padding-bottom: 4px;
}

.boardDirectoryTab.boardDirectoryView .vbarTitle {
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 1.7;
    padding-bottom: 9px;
    width: auto;
}

.vbar .bar {
    width: calc(25% - 3px);
    background: #ed1b24;
    border-radius: 2px;
}

.vbar:not(.vbarPreview) .bar {
    width: calc(25% - 6px);
    position: relative;
}

.vbar:not(.vbarPreview) .bar::before {
    position: absolute;
    bottom: -24px;
    left: calc(50% - 4px);
    width: 8px;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 2;
    content: "D";
    text-align: center;
}

.vbar:not(.vbarPreview) .bar:nth-child(2):before {
    content: "I";
}

.vbar:not(.vbarPreview) .bar:nth-child(3):before {
    content: "S";
}

.vbar:not(.vbarPreview) .bar:nth-child(4):before {
    content: "C";
}

.vbar .bar:nth-child(2) {
    background: #ffca08;
}

.vbar .bar:nth-child(3) {
    background: #00a652;
}

.vbar .bar:nth-child(4) {
    background: #0c4da1;
}

.noData {
    visibility: hidden;
}

.noData .vbarTitle {
    color: #d2d1d8;
}

.noData .vbar .bar,
.noData .vbar .bar:nth-child(2),
.noData .vbar .bar:nth-child(3),
.noData .vbar .bar:nth-child(4) {
    background: #d2d1d8;
    height: 2px !important;
}

.vbarAxesNames,
.boardDirectoryTab .vbarAxesNames {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-end;
    position: absolute;
    bottom: -12px;
    left: -4px;
    width: 28px;
    padding-right: 4px;
    background: var(--manual-bg);
    color: rgba(120, 116, 134, 0.5);
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 2;
}

.expanded .boardDirectoryTab .vbarAxesNames {
    background: var(--bg);
}

.itemControlMail {
    height: 24px;
    cursor: pointer;
}

.itemControlMail svg {
    pointer-events: none;
}

@media (hover: hover) {
    .itemControlMail:hover rect {
        fill: var(--button-hover-color);
    }
}

.itemControlMail:active rect {
    fill: var(--button-active-color);
}

.itemControlMail:disabled rect {
    fill: var(--button-disabled-color);
}

.noMail {
    visibility: hidden;
}

.boardDirectoryTab.boardDirectoryView .itemUserImgWrap {
    width: 56px;
    min-width: 56px;
    height: 56px;
    margin-top: 6px;
}

.boardDirectoryTab.boardDirectoryView .itemUserImg {
    width: 56px;
    min-width: 56px;
    height: 56px;
}

.boardDirectoryTab.boardDirectoryView .itemUserInfoText {
    margin-top: 16px;
}

.directorySubtitle {
    text-transform: uppercase;
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
    padding: 12px 0;
}

.boardDirectoryTab .itemText strong {
    font-weight: 700;
}

.directorySubtitle ~ .directorySubtitle {
    padding-top: 4px;
}

.directoryDetaiLink {
    display: inline;
    text-decoration: underline;
    color: var(--button-active-color);
}

@media (hover: hover) {
    .directoryDetaiLink {
        color: var(--button-hover-color);
    }
}

.boardDirectoryTab .btn-icon {
    align-self: center;
    margin-top: 24px;
}

.boardDirectoryTab.boardDirectoryView .chartsWrap {
    width: 100%;
    max-width: 100%;
    padding-top: 0;
}

.boardDirectoryTab.boardDirectoryView .vBarWrap {
    width: 100%;
    padding-bottom: 32px;
}

.boardDirectoryTab.boardDirectoryView .vbar {
    width: 100%;
    padding-left: 48px;
    padding-right: 25px;
}

@media only screen and (max-width: 1400px) {
    .itemDetailWrapOpen .boardDirectoryTab .item {
        width: calc(50% - 8px / 2);
    }
}

@media only screen and (max-width: 1200px) {
    .boardDirectoryTab .item {
        width: calc(33.333% - 16px / 3);
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1155px) {
    .itemDetailWrapOpen .boardDirectoryTab .item {
        width: 100%;
    }
}

@media only screen and (max-width: 1024px) {
    .vbarAxesNames {
        background: var(--button-text-color);
    }
}

@media only screen and (max-width: 1000px) {
    .boardDirectoryTab .item {
        width: calc(50% - 8px / 2);
    }
}

@media only screen and (max-width: 768px) {
    .boardDirectoryTab.boardDirectoryView .itemDetailWrapScroll {
        padding-top: 32px;
    }

    .boardDirectoryTab .itemDetailWrapScroll {
        position: relative;
        padding-left: 8px;
    }

    .boardDirectoryTab.boardDirectoryView .itemControlClose {
        position: absolute;
        top: 0;
        right: 8px;
    }

    .boardDirectoryTab .item {
        width: calc(33.333% - 16px / 3);
        padding-bottom: 8px;
    }

    .boardDirectoryTab .itemInnerWrap {
        flex-direction: row;
    }

    .boardDirectoryTab .itemUserInfo {
        flex-direction: column;
        width: calc(100% - 47px);
    }

    .boardDirectoryTab .itemUserInfoText {
        padding: 0;
        width: calc(100%);
    }

    .boardDirectoryTab .vbarAxesNames {
        background: var(--bg);
    }
}

@media only screen and (max-width: 685px) {
    .boardDirectoryTab .item {
        width: calc(50% - 8px / 2);
    }
}

@media only screen and (max-width: 450px) {
    .boardDirectoryTab .item {
        width: 100%;
    }
}

/* ==========================================================================
            PROFILE PAGE
             ========================================================================== */
.noBgImage {
    background-image: none !important;
}

.profilePage {
    width: 100%;
}

.profileHeadingWrap {
    align-items: center;
    column-gap: 16px;
    padding-top: 8px;
    width: 100%;
}

.profileHeadingInnerWrap {
    justify-content: flex-start;
    flex-grow: 1;
    column-gap: 24px;
    align-items: center;
}

.profilePage .pageHeading {
    margin-top: 0;
}

.profileHeadingBtns {
    align-items: flex-end;
}

.profileHeadingPublish {
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    column-gap: 8px;
    padding-top: 8px;
}

.profileHeadWarnWrap {
    flex-grow: 1;
    align-items: flex-start;
    row-gap: 2px;
}

.warningInfo {
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.16;
    color: var(--profile-warning-heading);
    position: relative;
    padding-left: 24px;
}

.warningInfo::before {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -8px;
    content: "";
    background-image: url(../../images/pages/warning-icon.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 14px;
    height: 12px;
}

.warningInfoText {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.16;
    color: var(--secondary-text-color);
    text-align: left;
}

.warningInfoText .inlineLink {
    font-weight: 700;
    font-size: var(--small-text-font-size);
    line-height: 1.16;
}

.profilePage .contentWrap {
    padding-top: 24px;
}

.profileContent {
    overflow-y: auto;
    max-height: 100%;
    width: 100%;
    padding: 0 8px 0 24px;
}

.profilePageImage {
    width: 100%;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    height: 176px;
    position: relative;
    background-image: url(../../images/pages/image\ 11.png);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
}

.profilePageImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profilePageImageEdit {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 8px;
}

.profileEdit-md,
.profileEdit-lg,
.profileContactEdit .itemControlEdit {
    height: 24px;
    cursor: pointer;
}

.profileEdit-md svg,
.profileEdit-lg svg,
.profileContactEdit .itemControlEdit svg {
    pointer-events: none;
}

@media (hover: hover) {
    .profileEdit-md:hover circle,
    .profileEdit-lg:hover circle {
        fill: var(--button-hover-color);
    }
}

.profileEdit-md:active circle,
.profileEdit-lg:active circle {
    fill: var(--button-active-color);
}

.profilePhotoWrap {
    justify-content: flex-start;
    position: relative;
}

.profileUserPhotoWrap {
    position: absolute;
    top: -68px;
    left: 4px;
    width: 128px;
    height: 128px;
}

.profileUserPhoto {
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-radius: 50%;
    background-color: #f0f1f4;
    background-image: url(../../images/pages/user-icon-lg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    border: 4px solid var(--button-text-color);
}

.profileUserPhoto img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.profilePhotoWrap .profilePageImageEdit {
    padding: 4px;
}

@media only screen and (max-width: 768px) {
    .profilePage .contentWrap {
        padding-top: 16px;
    }

    .profileHeadingInnerWrap {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }

    .profileHeadingWrap {
        padding-top: 0;
        align-items: flex-start;
    }

    .profileContent {
        padding: 0 8px 0 16px;
    }

    .profilePageImage {
        height: 104px;
    }

    .profileUserPhotoWrap {
        top: -28px;
        left: 4px;
        width: 88px;
        height: 88px;
    }

    .profileUserPhoto {
        width: 88px;
        height: 88px;
    }
}

/* ==========================================================================
            PROFILE PAGE INFO
             ========================================================================== */


.profileInfoWrap .profileInfoEdit {
    display: none;
}

.profileInfoWrap.editMode .profileInfoInner {
    display: none;
}

.profileInfoWrap.editMode .profileInfoEdit {
    display: flex;
}

.profileInfoInner {
    align-items: stretch;
    row-gap: 20px;
    padding-bottom: 32px;
}

.socialIconsWrap {
    column-gap: 8px;
    align-self: flex-start;
    padding: 16px 0 0 144px;
    height: 40px;
}

.socialIcon,
.socialIcon:active {
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--main-text-color);
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
}

.containerRow.inputErrorMsg::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    background-image: url(../../../images/pages/error.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: 1px;
}

.has-error .help-block, .memberAppError {
    column-gap: 4px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1;
    color: var(--secondary-text-color);
}


.has-error .help-block::before, .memberAppError::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    background-image: url(../../../images/pages/error.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: 0;
}

.select2 + .hint-help + .help-block {
    margin-top: -5px;
}

.inputWrap .inputErrorMsg {
    display: none;
}

.inputWrap.error .inputErrorMsg {
    display: flex;
}

.inputWrap.error {
    padding-bottom: 15px;
}

.xingIcon {
    background-image: url(../../../images/pages/xing-icon.svg);
}

.pinterestIcon {
    background-image: url(../../../images/pages/pinterest-icon.svg);
}

.linkedinIcon {
    background-image: url(../../../images/pages/linkedin-icon.svg);
}

.instaIcon {
    background-image: url(../../../images/pages/instagram-icon.svg);
}

.twitterIcon {
    background-image: url(../../../images/pages/twitter-icon.svg);
}

.fbIcon {
    background-image: url(../../../images/pages/facebook-logo.svg);
}

.gplusIcon {
    background-image: url(../../../images/pages/gplus-logo.svg);
}

.youtubeIcon {
    background-image: url(../../../images/pages/youtube-social.svg);
}

.bloggerIcon {
    background-image: url(../../../images/pages/blogger-social.svg);
}

.profileInfoHead {
    column-gap: 16px;
    padding: 12px 0 0;
}

.profileUserNameWrap {
    flex-grow: 1;
    padding-top: 4px;
    display: flex;
    align-items: flex-start;
    width: calc(100% - 16px - 32px);
}

.profileUserName {
    width: calc(100%);
    align-items: baseline;
}

.profileUserName span {
    align-items: baseline;
}

.profileUserName::after {
    content: "";
    height: 2px;
    background: var(--secondary-text-color);
    opacity: 0.3;
    flex: 1;
    margin-left: 8px;
}

.profileEdit-lg {
    height: 32px;
}

.profileUserContact {
    row-gap: 4px;
}

.profileUserContactInner {
    column-gap: 16px;
    align-items: center;
    color: var(--secondary-text-color);
}

.profileUserContactInner .subTitleSm:not(.inlineLink) {
    color: var(--main-text-color);
}

.profileWrap {
    row-gap: 10px;
    padding: 3px 8px 0 24px;
}

.profileText {
    color: var(--secondary-text-color);
    position: relative;
}

.profileText p {
    margin-bottom: 0;
}

.profileTitle + .profileText::after {
    position: absolute;
    left: -20px;
    top: -14px;
    width: 1px;
    height: calc(100% + 14px);
    background-color: #3b68df;
    content: "";
}

.profileTitle + .profileText::before {
    position: absolute;
    left: -24px;
    top: -27px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3b68df;
    content: "";
}

.profileSubTitle {
    padding: 4px 0;
}

.profileColTextWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 86%;
}

.profileColText {
    padding: 0 24px 0 0;
    position: relative;
}

.profileColText:not(:first-child) {
    padding: 0 64px 0 24px;
    position: relative;
}

.profileColText:first-child::after {
    position: absolute;
    left: -21px;
    top: -15px;
    width: 1px;
    height: calc(100% + 15px);
    background-color: #3b68df;
    content: "";
}

.profileColText:first-child::before {
    position: absolute;
    left: -24px;
    top: -27px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3b68df;
    content: "";
}

.profileColText::after {
    position: absolute;
    left: 3px;
    top: 0px;
    bottom: 0;
    width: 1px;
    height: 100%;
    background-color: #3b68df;
    content: "";
}

.companyHead {
    justify-content: flex-start;
    padding-left: 8px;
    column-gap: 16px;
}

.companyImgWrap {
    position: relative;
    display: none;
}

.companyImg {
    width: 120px;
    height: 80px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f0f1f4;
    background-image: url(../../images/pages/company-logo-bg.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50%;
}

.companyImg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.companyInfo .profilePageImageEdit {
    padding: 0;
    bottom: -82px;
    left: 96px;
    width: 24px;
}

.companyInfo .profileInfoHead {
    padding: 0 0 0 4px;
    flex-grow: 1;
    width: calc(100%);
}

.companyInfo .profileUserNameWrap {
    padding-top: 5px;
}

.companyInfo .socialIconsWrap {
    padding: 8px 0 0 0px;
    height: auto;
}

.companyInfo .profileInfoInner {
    row-gap: 16px;
}

.companyInfo .profileUserContact {
    padding-left: 8px;
    padding-top: 5px;
}

.companyInfo .profileUserContactInner {
    line-height: 22px;
    width: calc(100%);
}

.companyInfo .profileUserContactInner span,
.companyInfo .profileUserContactInner a {
    width: calc(100% - 32px);
}

.companyInfo .profileWrap {
    padding: 10px 8px 0 24px;
}

.companyInfo .profileTitle + .profileText::before {
    top: -25px;
}

.categoryWrap {
    justify-content: flex-start;
    column-gap: 8px;
}

.category {
    border-radius: 6px;
    padding: 12px 15px;
    font-style: normal;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 1.14;
    color: var(--category-color);
    background: var(--category-bg);
    border: none;
    white-space: nowrap;
    cursor: default !important;
}


@media only screen and (max-width: 1200px) {
    .profileColText:not(:first-child) {
        padding: 0 24px 0 24px;
    }
}

@media only screen and (max-width: 1024px) {
    .profileColTextWrap {
        width: 100%;
    }

    .profileColText:not(:first-child) {
        padding: 0 16px 0 24px;
    }

    .profileColText {
        padding: 0 16px 0 0;
    }

    .categoryWrap {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }
}

@media only screen and (max-width: 768px) {
    .companyImg {
        position: static;
    }

    .companyInfo .profilePageImageEdit {
        bottom: 0;
    }

    .companyInfo .profileInfoInner {
        padding-top: 8px;
    }

    .companyInfo .socialIconsWrap {
        height: auto;
        padding: 0;
    }

    .companyInfo .socialIconsWrap .socialIcon {
        margin-top: 8px;
    }

    .socialIconsWrap {
        padding: 16px 0 0 105px;
    }

    .profileColTextWrap {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 24px;
    }

    .profileColText:not(:first-child) {
        padding: 0;
    }

    .profileColText {
        padding: 0;
    }

    .profileColText::after {
        left: -21px;
    }

    .companyHead {
        flex-direction: column;
        padding-left: 0;
        row-gap: 12px;
    }

    .companyInfo .profileInfoHead {
        padding: 0;
        flex-grow: 1;
        width: calc(100%);
    }

    .companyInfo .profileUserNameWrap {
        padding-top: 5px;
        width: calc(100% - 16px - 32px);
    }

    .companyInfo .profileUserContact {
        padding-left: 0px;
    }
}

.profileContent .acceptConnectionBtn {
    background: #2BCA92;
}

.profileContent .cancelConnectionRequestBtn {
    background: var(--warning-red);
}

.profileActionBtnsWrap {
    column-gap: 8px;
}

.profileInfoHeadMobile {
    align-items: center;
}

.profileInfoHeadMobile .profileUserNameWrap {
    width: calc(100% - 16px - 400px);
}

@media only screen and (max-width: 1024px) {
    .profileInfoHeadMobile {
        flex-direction: column;
        row-gap: 16px;
    }

    .profileActionBtnsWrap {
        flex-wrap: wrap;
        align-self: flex-start;
        row-gap: 8px;
    }

    .profileInfoHeadMobile .profileUserNameWrap {
        width: 100%;
    }

    .profileInfoHeadMobile .profileUserName::after {
        display: none;
    }
}

/* ==========================================================================
            PROFILE PAGE INFO EDIT
             ========================================================================== */

.profileContent label.control-label {
    color: var(--main-text-color);
    width: calc(90%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profileInfoEdit .form-group .inputWithIcon input {
    padding-right: 40px;
}

.profileInfoEdit {
    padding-top: 84px;
    padding-bottom: 23px;
    row-gap: 12px;
    align-items: stretch;
}

#companyForm > div {
    padding-bottom: 7px;
}

.companyInfo .profileInfoEdit {
    padding-top: 92px;
}

.profileInfoEdit .form-group input {
    padding-right: 8px;
}

.profileInfoEdit .form-group .iti input {
    padding-left: 100px !important;
}

.profileNameEdit .form-group {
    width: 33%;
    padding-right: 8px;
}

.profileNameEdit .form-group:first-child {
    width: 9.5%;
}

.profileNameEdit .form-group:last-child {
    width: 24.5%;
    padding-right: 0;
}

.companyInfo .profileNameEdit .form-group {
    width: 25%;
    padding-right: 8px;
}

.companyInfo .profileNameEdit .form-group:last-child {
    padding-right: 0;
}

.profileContactEdit .form-group:first-child {
    width: 25%;
}

.profileContactEdit .form-group {
    width: 36%;
    padding-right: 8px;
}

.profileContactEdit .form-group:last-child {
    width: 39%;
    padding-right: 0;
}

.profileNameEdit .form-group.has-error {
    position: relative;
}

.profileNameEdit .form-group.has-error .help-block {
    position: absolute;
    bottom: -14px;
}

.iti {
    width: 100%;
}

.iti__flag-container {
    padding: 0;
}

.iti--separate-dial-code .iti__selected-flag,
.profileInfoEdit
.iti--allow-dropdown
.iti__flag-container:hover
.iti__selected-flag {
    background: transparent;
}

.iti--separate-dial-code .iti__selected-flag {
    padding: 0 7px 0 16px;
}

.iti__flag-box {
    width: 24px;
    height: 16px;
}

.iti__selected-flag .iti__flag,
.iti__flag-box .iti__flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    background-image: url(../../images/flags/english-uk.svg);
    background-position: 50%;
    background-size: 100%;
    box-shadow: none;
}

.iti__flag.iti__cl {
    background-image: url(../../images/flags/chile.svg);
}

.iti__flag.iti__cz {
    background-image: url(../../images/flags/czech.svg);
}

.iti__flag.iti__fr {
    background-image: url(../../images/flags/french.svg);
}

.iti__flag.iti__de {
    background-image: url(../../images/flags/german.svg);
}

.iti__flag.iti__il {
    background-image: url(../../images/flags/hebrew.svg);
}

.iti__flag.iti__mx {
    background-image: url(../../images/flags/spanish-mexico.svg);
}

.iti__flag.iti__nl {
    background-image: url(../../images/flags/dutch.svg);
}

.iti__flag.iti__pt {
    background-image: url(../../images/flags/portugal.svg);
}

.iti__flag.iti__ro {
    background-image: url(../../images/flags/romanian.svg);
}

.iti__flag.iti__es {
    background-image: url(../../images/flags/spanish.svg);
}

.iti__flag.iti__gb {
    background-image: url(../../images/flags/english-uk.svg);
}

.iti__flag.iti__us {
    background-image: url(../../images/flags/english.svg);
}

.iti--separate-dial-code .iti__selected-dial-code {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.14;
    color: var(--main-text-color);
    margin-left: 24px;
}

.iti__arrow {
    border: none;
    width: 10px;
    height: 5px;
    background-image: url(../../images/pages/number-edit-arrow.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    margin-left: 0;
    position: absolute;
    top: 50%;
    left: 47px;
    margin-top: -2px;
}

.iti__arrow--up {
    transform: rotate(180deg);
}

.iti__country-list {
    border-radius: 6px;
}

.iti__country-list::-webkit-scrollbar {
    width: 6px;
}

.iti__country-list::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.2);
    border-radius: 10px;
    width: 6px;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 6px;
}

.iti__country-list {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

.inputWrapEditable {
    position: relative;
    width: 100%;
}

.inputWithIcon {
    width: 100%;
}

.profileContactEdit .itemControlEdit {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 16px;
    bottom: 12px;
}

.accountEditArea .itemControlEdit {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 16px;
    bottom: 12px;
}

.itemControlEdit {
    cursor: pointer;
}

@media (hover: hover) {
    .profileContactEdit .itemControlEdit:hover rect {
        fill: var(--button-hover-color);
    }
}

.profileContactEdit .itemControlEdit:active rect {
    fill: var(--button-active-color);
}

.profileSICEdit .form-group:first-child {
    width: 100%;
    padding-right: 0;
}

.profileAddressEdit {
    justify-content: flex-start;
}

.profileAddressEdit > .form-group:first-child {
    width: 23%;
    padding-left: 0;
}

.profileAddressEdit > .form-group:nth-child(2) {
    width: 23.7%;
}

.profileAddressEdit > .form-group {
    width: 12.9%;
    padding-left: 8px;
}

.profileAddressEdit > .form-group:last-child {
    width: 14.6%;
}

.profileSocialEdit,
.profileProposalCol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 10px;
}

.profileSocialEditCol {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    row-gap: 12px;
}


.profileSocialEdit .inputWrap {
    position: relative;
}

.profileSocialEdit .has-error {
    position: absolute;
    bottom: -10px;
}

.profileSocialEdit input {
    padding-left: 38px;
}

.profileSocialEdit .inputWrap::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 8px;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 24px;
    height: 24px;
}

.profileSocialEdit .inputWrap.fb::before {
    background-image: url(../../images/pages/facebook-icon.svg);
}

.profileSocialEdit .inputWrap.in::before {
    background-image: url(../../images/pages/instagram-logo.svg);
}

.profileSocialEdit .inputWrap.pin::before {
    background-image: url(../../images/pages/pinterest-logo.svg);
}

.profileSocialEdit .inputWrap.tw::before {
    background-image: url(../../images/pages/twitter-logo.svg);
}

.profileSocialEdit .inputWrap.lin::before {
    background-image: url(../../images/pages/linkedin-logo.svg);
}

.profileSocialEdit .inputWrap.xing::before {
    background-image: url(../../images/pages/xing-logo.svg);
}

.profileProposalCol textarea {
    height: 112px;
}

.profileEditBtns {
    padding-top: 20px;
    justify-content: flex-start;
    column-gap: 8px;
}

.categoriesEdit {
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
}

.categoriesEdit .inputWrap {
    width: 256px;
    position: relative;
}

.categoriesEdit .addCategoryBtn {
    position: absolute;
    bottom: 13px;
    right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

@media (hover: hover) {
    .categoriesEdit .addCategoryBtn:hover path {
        fill: var(--button-hover-color);
    }
}

.categoriesEdit .addCategoryBtn:active path {
    fill: var(--button-active-color);
}

.categoriesEdit .category {
    padding-right: 41px;
    position: relative;
}

.closeCategory {
    position: absolute;
    bottom: 11px;
    right: 15px;
    width: 16px;
    height: 16px;
    background-image: url(../../images/pages/close-category-button.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
    cursor: pointer;
}


@media only screen and (max-width: 1024px) {
    .profileProposalCol {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 12px;
    }
}

@media only screen and (max-width: 768px) {
    .companyInfo .profileInfoEdit {
        padding-top: 8px;
    }

    .profileNameEdit,
    .profileContactEdit,
    .profileSICEdit,
    .profileAddressEdit,
    .categoriesEdit {
        flex-direction: column;
        row-gap: 12px;
    }

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

    .categoriesEdit .inputWrap {
        width: 100%;
        position: relative;
    }

    .profileNameEdit .form-group,
    .profileNameEdit .form-group:first-child,
    .profileNameEdit .form-group:last-child,
    .profileContactEdit .form-group,
    .profileContactEdit .form-group:first-child,
    .profileContactEdit .form-group:last-child,
    .companyInfo .profileNameEdit .form-group,
    .profileSICEdit .form-group:first-child,
    .profileSICEdit .form-group,
    .profileAddressEdit > .form-group,
    .profileAddressEdit > .form-group:first-child,
    .profileAddressEdit > .form-group:nth-child(2),
    .profileAddressEdit > .form-group:last-child {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .profileSocialEdit {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 12px;
    }

    .profileEditBtns {
        justify-content: center;
    }
}

/* ==========================================================================
            PROFILE PAGE BG EDIT POPUP
             ========================================================================== */

.editPageBgPopup .popupText {
    padding-top: 8px;
    padding-bottom: 16px;
}

.selectedPageBg {
    width: 100%;
    height: 176px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.popupInner {
    padding-top: 16px;
    padding-left: 16px;
    align-items: center;
}

.pageBgVariantsWrap {
    flex-grow: 1;
}

.pageBgVariant {
    width: calc(16.6% - 16px * 5 / 6);
    padding-top: calc(16.6% - 16px * 5 / 6);
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #fff;
    cursor: pointer;
}

.pageBgVariant.active {
    border: 1px solid var(--button-active-color);
}

.pageBgVariant img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editPageBgPopup .popupBtns {
    padding: 0 74px;
    margin-top: 0;
}

.selectBackgroundModal .popupBtns {
    padding: 0 74px;
    margin-top: 0;
}

@media only screen and (max-width: 1200px) {
    .editPageBgPopup,
    .selectBackgroundModal:not(#no-internet.attendancePopupWrapper) .modal-dialog {
        width: 85%;
        max-width: 1104px;
    }
}

@media only screen and (max-width: 1024px) {
    .editPageBgPopup {
        width: 90%;
        max-width: 1104px;
        padding: 24px 0 16px;
    }

    .pageBgVariant {
        width: calc(16.6% - 10px * 5 / 6);
        padding-top: calc(16.6% - 10px * 5 / 6);
    }
}

@media only screen and (max-width: 768px) {
    .editProfilePageImagePopup {
        width: 100%;
        height: calc(100vh - 64px);
        top: 64px;
        border-radius: 0;
        padding-top: 21px;
    }

    .selectBackgroundModal:not(#no-internet.attendancePopupWrapper) .modal-dialog,
    .uploadProfileModal:not(#no-internet.attendancePopupWrapper) .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
    }

    .selectBackgroundModal .popupBtns {
        padding: 37px 0;
    }

    .editProfilePageImagePopup.active {
        transform: translate(-50%, 0) scale(1);
    }

    .editProfilePageImagePopup .closePopup {
        top: 8px;
        right: 8px;
    }

    .editPageBgPopup .popupHeading,
    .editProfilePageImagePopup .popupHeading {
        font-weight: 700;
        font-size: var(--title-font-size-lg);
        line-height: 1.16;
        padding: 0px 40px;
    }

    .editPageBgPopup .popupText,
    .editProfilePageImagePopup .popupText {
        padding-top: 4px;
    }

    .selectedPageBg {
        height: 104px;
    }

    .popupInner {
        flex-direction: column;
        align-items: center;
        padding-left: 0;
    }

    .pageBgVariantsWrap {
        flex-wrap: wrap;
        width: 100%;
        max-width: 320px;
        padding: 0 8px;
        justify-content: center;
        column-gap: 16px;
        row-gap: 16px;
    }

    .pageBgVariant {
        width: calc(33.333% - 16px * 4 / 3);
        padding-top: calc(33.333% - 16px * 4 / 3);
    }

    .editPageBgPopup .popupBtns {
        padding: 37px 0;
    }
}

/* ==========================================================================
            PROFILE PAGE IMAGE EDIT POPUP
             ========================================================================== */

.uploadProfileModal .modal-header {
    flex-direction: column;
}

.uploadProfileModal .modal-header .modal-title {
    padding-bottom: 8px;
    padding-top: 37px;
}

.selectPhotoPopup {
    display: none;
}

.uploadProfileModal .modal-content {
    padding-top: 16px;
}

.editProfilePageImagePopup {
    width: 76.5%;
    max-width: 624px;
    min-height: 368px;
    padding: 24px 0 16px;
}

.editProfilePageImagePopup .popupText,
.uploadProfileModal .popupText {
    padding-top: 0;
    padding-bottom: 16px;
}

.uploadProfileModal .imgUploadText strong {
    color: var(--main-text-color);
}

.editProfilePageImagePopup .popupInner,
.uploadProfileModal .popupInner {
    padding-left: 0;
    margin: 0 auto;
    max-width: 385px;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 31px;
    padding-top: 8px;
    padding-bottom: 48px;
}

.editProfilePageImagePopup .profileUserPhoto,
.uploadProfileModal .profileUserPhoto {
    width: 120px;
    height: 120px;
    border: none;
}

.imgUploadText div {
    text-align: left;
}

.editProfilePageImagePopup .popupBtns,
.uploadProfileModal .popupBtns,
.uploadProfileModal .btn {
    margin-top: 16px;
    color: var(--button-text-color);
}

#fileUploadForm {
    text-align: left;
}

.uploadProfileModal .has-error {
    margin-top: 8px;
}

.uploadProfileModal .modal-footer .popupInner {
    padding-bottom: 0;
}

.uploadProfileModal .modal-content,
.uploadProfileModal .modal-body {
    padding-left: 0;
    padding-right: 0;
}

.uploadProfileModal #croppWrapper {
    width: 100%;
}

.uploadProfileModal .popup-image {
    margin: auto;
    width: 100%;
}

.uploadProfileModal #image.img-large {
    width: 100%;
    height: 256px;
}

.uploadProfileModal #image {
    width: 400px;
    height: 400px;
    display: inline-block;
    float: left;
}

.uploadProfileModal .cropper-container {
    width: 100% !important;
}

.uploadProfileModal .popupBtnsCut {
    margin-top: 0;
    padding: 0 16px;
}

.uploadProfileModal .modal-footer {
    padding-top: 0;
}

.popupInnerCut .btn {
    margin-top: 8px;
}

.uploadProfileModal .popupInnerCut {
    width: 100%;
    max-width: 100%;
    column-gap: 0;
    justify-content: flex-start;
    align-items: flex-start;
}

.companyEditPhotoPopup .profileUserPhoto {
    width: 120px;
    height: 80px;
    border-radius: var(--border-radius-lg);
}

@media only screen and (max-width: 768px) {
    .editProfilePageImagePopup {
        width: 100%;
        max-width: 100%;
        min-height: auto;
    }

    .editProfilePageImagePopup .popupInner,
    .uploadProfileModal .popupInner {
        align-items: center;
    }

    .editProfilePageImagePopup .popupBtns,
    .uploadProfileModal .popupBtns {
        text-align: center;
    }

    .imgUploadText {
        text-align: center;
        padding-top: 16px;
    }

    .imgUploadText div {
        text-align: center;
    }

    #fileUploadForm {
        text-align: center;
    }

    .uploadProfileModal .modal-content {
        padding-top: 36px;
    }

    .uploadProfileModal .modal-body {
        max-height: calc(100vh - 64px - 104px - 48px);
    }

    .uploadProfileModal .popupInner {
        padding-top: 8px;
    }

    .uploadProfileModal .cropControls {
        padding-left: 0;
    }

    .uploadProfileModal .popupInnerCut .btn {
        margin-top: 0;
        margin-bottom: 8px;
    }
}

.selectPhotoPopup .cropImgWrap {
    height: 256px;
    width: 100%;
    position: relative;
    background: #000000;
    overflow: hidden;
    text-align: center;
    padding-top: 13px;
}

.selectPhotoPopup .cropImgWrap img {
    height: 80%;
    width: auto;
    border: 2px solid #fff;
}

.selectPhotoPopup .cropMove {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 1.15;
    color: #fff;
    text-align: center;
    padding-left: 13px;
    padding-bottom: 12px;
}

.selectPhotoPopup .cropMove span {
    position: relative;
}

.selectPhotoPopup .cropMove span::before {
    position: relative;
    content: url(../../images/pages/move-icon.svg);
    left: -8px;
    top: 4px;
}

.editProfilePageImagePopup .selectPhotoPopup .popupInner {
    width: 100%;
    max-width: 100%;
    column-gap: 0;
    padding-top: 24px;
}

.cropControls {
    flex-grow: 1;
    justify-content: center;
    column-gap: 8px;
    padding-left: 132px;
}

.cropControls .btn {
    padding: 12px 12px 11px;
    width: 40px;
    height: 40px;
}

.editProfilePageImagePopup .selectPhotoPopup .popupBtns {
    margin-top: 0;
    padding: 0 16px;
}

@media only screen and (max-width: 768px) {
    .selectPhotoPopup {
        padding-top: 16px;
    }

    .selectPhotoPopup .cropControls {
        row-gap: 8px;
        padding-left: 0;
    }

    .selectPhotoPopup .popupInner {
        row-gap: 8px;
    }
}

/* ==========================================================================
           MESSAGES TABS
           ========================================================================== */

.messagesTabs {
    align-items: flex-end;
}

.messagesTabs .tabs {
    padding-bottom: 16px;
}

.messagesMailIcon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    cursor: pointer;
    margin-bottom: 3px;
}

.messagesMailIcon svg {
    pointer-events: none;
}

@media (hover: hover) {
    .messagesMailIcon:hover path:first-child {
        fill: var(--button-hover-color);
    }
}

.messagesMailIcon:active path:first-child {
    fill: var(--button-active-color);
}

.messagesMailIcon:disabled path {
    fill: var(--button-disabled-color);
}

.messagesTabs .tab {
    position: relative;
    padding: 8px 10px 8px 1px;
    margin-right: 35px;
    align-items: center;
    column-gap: 8px;
}

.messagesTabs .tab svg {
    pointer-events: none;
}

.messagesTabs .tab.active path {
    fill: none;
    stroke: var(--button-active-color);
}

.messagesTabs .tab:nth-child(3).active path,
.messagesTabs .tab:nth-child(4).active path {
    fill: var(--button-active-color);
    stroke: none;
}

@media (hover: hover) {
    .messagesTabs .tab.active:hover path {
        fill: none;
        stroke: var(--button-hover-color);
    }

    .messagesTabs .tab:hover path {
        stroke: var(--button-hover-color);
    }

    .messagesTabs .tab:nth-child(3):hover path,
    .messagesTabs .tab:nth-child(4):hover path,
    .messagesTabs .tab:nth-child(3).active:hover path,
    .messagesTabs .tab:nth-child(4).active:hover path {
        fill: var(--button-hover-color);
        stroke: none;
    }
}

.messagesInboxAmount {
    position: absolute;
    top: 4px;
    right: -14px;
    left: auto;
    padding: 2px 6px 2px 5px;
}

@media only screen and (max-width: 768px) {
    .messagesTabs {
        padding-top: 14px;
        padding-left: 16px;
    }
}

/* ==========================================================================
           MESSAGES CONTENT
           ========================================================================== */

.messagesSelect {
    justify-content: flex-start;
    padding: 0 16px 16px;
    column-gap: 8px;
    position: relative;
}

.messagesSelect .arrowWrap {
    height: 16px;
    cursor: pointer;
    padding-top: 2px;
}

.dropdownOpen.messagesSelect .arrowWrap svg {
    transform: rotate(180deg);
}

.dropdownOpen .messagesSelectDropdown {
    display: block;
}

.messagesSelectDropdown {
    display: none;
    background: var(--bg);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    position: absolute;
    top: 32px;
    left: 16px;
    z-index: 1;
    padding: 8px;
}

.messagesSelectDropdownItem {
    padding: 10px 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

@media (hover: hover) {
    .messagesSelectDropdownItem:hover {
        color: var(--button-text-color);
        background: var(--menu-hover-color);
    }
}

.messagesTabContent .item {
    position: relative;
    padding: 13px 0 12px;
}

.messagesTabContent .item.unread {
    background: var(--manual-bg);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.messagesTabContent .itemInnerWrap {
    max-width: calc(100% - 110px);
    width: auto;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
}

.messagesTabContent .item.unread .unreadMark {
    display: block;
}

.unreadMark {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    background: var(--green-color-badges);
    border-radius: 50%;
    display: none;
}

.messagesCheckbox.messagesChecked .markMessageWrap {
    display: flex;
}

.messagesCheckbox:not(.messagesSelect) {
    column-gap: 8px;
    padding: 0 15px;
}

.messagesCheckbox .checkbox {
    --background: transparent;
    --border: #a2a8b8;
    --border-active: #039c55;
    --border-hover: #039c55;
    --tick: #fff;
}

@media (hover: hover) {
    .messagesCheckbox .checkbox input:hover {
        --s: 1px;
    }
}

.messagesCheckbox .checkbox.path input:checked {
    --s: 1px;
}

.messagesCheckbox .checkbox.removeSelection {
    position: relative;
}

.messagesCheckbox .checkbox.removeSelection::before {
    position: absolute;
    top: 11px;
    left: 6px;
    width: 12px;
    height: 2px;
    background: #fff;
    content: "";
    z-index: 1;
}

.messagesCheckbox .checkbox.removeSelection svg {
    display: none;
}

.markMessageWrap {
    padding-left: 8px;
    column-gap: 24px;
    display: none;
}

.markMessageWrap.active {
    display: flex;
}

.markMessageInner {
    column-gap: 8px;
    align-items: center;
    color: var(--secondary-text-color);
    cursor: pointer;
}

.markMessageInner .markMessageMobileText {
    display: none;
}

.markRestore svg {
    margin-bottom: 2px;
}

@media (hover: hover) {
    .itemControlRestore:hover path:first-child,
    .itemControlRestore:active:hover path:first-child {
        fill: var(--button-hover-color);
        opacity: 1;
    }
}

.itemControlRestore:active path:first-child {
    fill: var(--button-active-color);
    opacity: 1;
}

.messagesTabContent .itemUserInfo {
    max-width: calc(100% - 88px);
    flex-grow: 1;
    column-gap: 8px;
    justify-content: flex-start;
}

.messagesTabContent .itemTextWrap {
    max-width: calc(100%);
    row-gap: 8px;
    padding-top: 5px;
}

.messagesTabContent .itemText {
    max-width: calc(100%);
    width: auto;
    padding-right: 16px;
}

.messagesTabContent .itemText .itemTextTwoLines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.6em;
    overflow: hidden;
    color: var(--secondary-text-color);
    max-width: calc(100%);
    min-height: 32px;
    font-size: var(--main-font-size);
    line-height: 1.14;
}

.messagesTabContent .itemText strong {
    line-height: 16px;
}

.messagesTabContent .itemUserName {
    padding-top: 0;
}

.messageTimeWrap {
    justify-content: flex-start;
    column-gap: 8px;
    width: 110px;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.16;
    padding-top: 7px;
}

@media only screen and (min-width: 1024px) {
    .messagesTabContent .itemDetailWrap.expanded {
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 16px 0;
    }

    .messagesTabContent .itemDetailWrap.expanded .itemDetailWrapScroll .messagesInnerWrap,
    .messagesTabContent .itemDetailWrap.expanded .itemDetailWrapScroll .replyPage {
        background: var(--bg);
        border-radius: var(--border-radius-lg);
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        padding: 8px 8px 16px 16px;
        margin-bottom: 8px;
    }

    .messagesTabContent .itemDetailWrap.expanded .itemDetailWrapScroll {
        height: auto;
    }

    .messagesTabContent .itemDetailWrap.expanded .editDetailsBtnWrap {
        justify-content: flex-start;
    }
}

.replyPage .editDetailsBtnWrap {
    justify-content: flex-start;
}


@media only screen and (max-width: 768px) {
    .messagesSelect {
        padding: 0 0 13px 23px;
    }

    .markMessageWrap {
        padding-left: 0px;
        column-gap: 14px;
    }

    .markMessageInner .markMessageDesktopText {
        display: none;
    }

    .markMessageInner .markMessageMobileText {
        display: block;
    }

    .messagesTabContent .item {
        padding: 8px 0 11px;
    }

    .unreadMark {
        top: 9px;
    }

    .messagesTabContent .itemInnerWrap {
        max-width: calc(100%);
        align-items: flex-start;
        padding-left: 8px;
        row-gap: 8px;
    }

    .messagesTabContent .itemUserInfo {
        max-width: calc(100%);
        width: 100%;
    }

    .messagesTabContent .itemText {
        padding-right: 8px;
    }

    .messagesTabContent .itemText .itemTextTwoLines {
        -webkit-line-clamp: 3;
        max-height: 3.6em;
    }

    .messageTimeWrap {
        position: absolute;
        right: 8px;
        top: 7px;
        width: auto;
    }
}

/* ==========================================================================
           MESSAGES DETAILS
           ========================================================================== */

.messagesInboxTab .itemDetailWrapOpen.itemsWrap {
    padding-right: 16px;
}

.messagesTabContent .itemDetailWrap .itemControls {
    width: 100%;
    justify-content: flex-end;
}

.itemDetailWrapOpen .messageTimeWrap {
    position: absolute;
    right: 16px;
    top: 13px;
    width: auto;
}

.messagesTabContent .itemDetailWrapOpen .itemUserInfo {
    max-width: calc(100%);
    width: 100%;
}

.messagesTabContent .itemDetailWrapOpen .itemInnerWrap {
    max-width: calc(100%);
}

.messagesTabContent .itemDetailWrap .itemUserInfo {
    max-width: 100%;
    align-items: center;
}

.messagesTabContent .itemDetailUserName {
    padding-left: 0;
}

.messagesTabContent .itemDetailWrap .itemText {
    padding-right: 8px;
    padding-bottom: 15px;
}

.replyBtns {
    column-gap: 8px;
    padding-top: 24px;
}

.messagesImgWrap {
    position: relative;
    height: 56px;
}

.replyBtns .btn {
    padding: 12px 16px;
}

.receivedMsgIcon,
.sentMsgIcon {
    position: absolute;
    bottom: 0px;
    right: -1px;
    background-image: url(../../images/pages/received-message-icon.svg);
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.sentMsgIcon {
    background-image: url(../../images/pages/sent-message-icon.svg);
}

/* ==========================================================================
           NEW MESSAGE
           ========================================================================== */

.newMessagePage .itemsWrap,
.messageDetailsPage .itemsWrap {
    padding-right: 16px;
}

.backLinkWrap {
    padding: 4px 0 12px 16px;
}

.backLink {
    color: var(--button-active-color);
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}

.backLink:hover {
    color: var(--button-hover-color);
}

@media (hover: hover) {
    .backLink:hover path {
        fill: var(--button-hover-color);
    }
}

.backLink:active path {
    fill: var(--button-active-color);
}

.messageHeadWrap {
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    column-gap: 8px;
}

.messageHeadWrap .itemUserInfoImgWrap {
    margin-bottom: 12px;
}

.messageHeadWrap .inputWrap {
    width: calc(35% - 56px - 8px);
}

.messageHeadWrap .inputWrap:last-child {
    width: calc(65% - 8px);
}

.newMessagePage .wysiwyg {
    width: 100%;
    padding-top: 12px;
}

.newMessagePage .wysiwyg.inputWrap label {
    font-size: var(--main-font-size);
}

.newMessagePage .addAttachment {
    padding-top: 19px;
    width: auto;
}

.newMessagePage .addAttachment .link,
.messageDetailsPage .addAttachment .link {
    padding-left: 8px;
}

.messageNewBtnsWrap {
    justify-content: flex-start;
    column-gap: 8px;
    padding-top: 19px;
}

@media only screen and (max-width: 768px) {
    .newMessagePage .breadcrumb,
    .messageDetailsPage .breadcrumb {
        padding-left: 0;
    }

    .newMessagePage .breadcrumb li,
    .messageDetailsPage .breadcrumb li {
        padding: 12px 8px 12px 16px;
    }

    .newMessagePage .itemsWrap,
    .messageDetailsPage .itemsWrap {
        padding-right: 8px;
    }

    .messageHeadWrap {
        flex-wrap: wrap;
        row-gap: 16px;
    }

    .messageHeadWrap .inputWrap {
        width: calc(100% - 56px - 8px);
    }

    .messageHeadWrap .inputWrap:last-child {
        width: 100%;
    }
}

/* ==========================================================================
           MESSAGE DETAILS
           ========================================================================== */

.messageDetailsPage .contentWrap {
    padding-top: 0;
}

.messageDetailsPage .messageBgWrap {
    width: 100%;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
}

.messageDetailsPage .backLinkWrap {
    padding-top: 19px;
    padding-bottom: 13px;
}

.messageDetailsPage .messageHeadWrap {
    padding-top: 0;
    flex-grow: 1;
    align-items: flex-start;
}

.messageDetailsPage .itemUserInfo {
    flex-grow: 1;
    justify-content: flex-start;
    column-gap: 8px;
}

.messageDetailsPage .itemUserInfoImgWrap {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
}

.messageDetailsPage .itemUserName {
    font-weight: 700;
    font-size: var(--title-font-size-sm);
    line-height: 1.125;
    padding-top: 8px;
}

.messageDetailsPage .itemControlFavorite {
    margin-top: 13px;
}

.messageIconsWrap {
    column-gap: 8px;
}

.messageIcon {
    cursor: pointer;
    height: 24px;
}

.messageIcon svg {
    pointer-events: none;
}

.messageIcon.active svg path,
.messageIcon:active svg path {
    fill: white;
}

.messageIcon.active svg rect,
.messageIcon:active svg rect {
    stroke: var(--button-active-color);
    fill: var(--button-active-color);
}

@media (hover: hover) {
    .messageIcon:hover svg path {
        fill: white;
    }

    .messageIcon:hover svg rect {
        stroke: var(--button-hover-color);
        fill: var(--button-hover-color);
    }
}

.messageDetailsPage .itemText {
    padding: 16px 0 8px;
    width: 100%;
}

.messageDetailsPage .itemText span {
    white-space: normal;
}

.replyBlock .itemText {
    padding: 10px 0 8px;
}

.replyTypeName {
    font-weight: 600;
    font-size: var(--title-font-size-sm);
    line-height: 24px;
    padding-top: 5px;
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
}

.replyPage .replyTypeName.reply {
    display: flex;
}


.replyWithQuotePage .replyTypeName.replyWithQuote {
    display: flex;
}

.replyBlock .wysiwyg {
    width: 100%;
}

.messageDetailsPage .addAttachment {
    padding-top: 27px;
    width: auto;
}

.replyBlock .messageNewBtnsWrap {
    padding-top: 29px;
}

.messageDetailsPage .replyBlock.messageBgWrap {
    padding-bottom: 32px;
}

@media only screen and (max-width: 768px) {

    .messageDetailsPage .breadcrumb {
        padding-top: 8px;
        padding-bottom: 0;
    }

    .messageDetailsPage .breadcrumb li:first-child {
        width: 0;
        overflow: hidden;
        padding: 0;
    }

    .messageDetailsPage .backLinkWrap {
        padding-top: 21px;
    }

    .messageDetailsPage .messageBgWrap {
        padding: 8px;
    }

    .messageDetailsPage .replyBlock.messageBgWrap {
        padding-top: 16px;
    }

    .messageDetailsPage .messageHeadWrap {
        flex-direction: column-reverse;
        row-gap: 8px;
    }

    .messageIconsWrap {
        width: 100%;
        justify-content: flex-end;
    }

    .messageDetailsPage .itemText:not(.replyBlock .itemText) {
        padding: 24px 0 0;
    }

    .messageDetailsPage .wysiwyg-toolbar-list,
    .messageDetailsPage .wysiwyg-toolbar-textAlign {
        padding-left: 0;
    }

    .messageDetailsPage .wysiwyg-toolbar-fontStyle,
    .messageDetailsPage .wysiwyg-toolbar-list,
    .messageDetailsPage .wysiwyg-toolbar-textAlign {
        border: none;
    }

    .messageDetailsPage .addAttachment {
        padding-left: 8px;
    }

    .replyBlock .messageNewBtnsWrap {
        padding-left: 8px;
    }
}

/* ==========================================================================
              DISCUSSIONS PAGE
             ========================================================================== */

.forumMobile .mainWrap {
    height: calc(100%);
}

.forumMobile > .containerRow {
    height: 100%;
}

.forumMobile .contentWrap {
    height: calc(100%) !important;
    overflow: hidden;
}

.forumMobile .actionListMainWrap {
    display: none;
}

@media only screen and (max-width: 768px) {
    .forumMobile .mainWrap {
        height: calc(100%);
        margin-top: 0;
    }

    .forumMobile .container {
        padding-left: 8px;
    }

    .breadcrumb li:nth-last-child(-n + 3) {
        padding-left: 16px;
    }

    .forumMobile .contentWrap .breadcrumb,
    .forumMobile .breadcrumb {
        margin-left: -8px;
    }

    .forumMobile .discussionsWrap.scroll.containerColumn:not(.userMoreMenuWrap),
    .forumMobile .discussionsPostDetailsPage .scroll.containerColumn:not(.userMoreMenuWrap) {
        padding-left: 8px;
    }

    .forumMobile .discussionsSearchWrap {
        padding-top: 8px;
    }
}

.contentWrap .pageHeading {
    margin-top: 0;
}

.contentWrap .breadcrumb,
.breadcrumb {
    padding: 8px 16px 12px 0px;
    margin-bottom: 0;
}

.page-header + .contentWrap {
    padding-top: 20px;
}

.discussionsWrap.scroll.containerColumn:not(.userMoreMenuWrap) {
    padding-right: 16px;
}

.discussionsWrap .discussionsRoleCategoriesWrap {
    padding-right: 0;
}

.discussionsPage .itemsWrap {
    align-items: stretch;
}

.discussionsSearchWrap {
    width: 100%;
    padding: 20px 0px 8px 0px;
    justify-content: flex-start;
    align-items: flex-end;
    column-gap: 8px;
}

.discussionsSearchWrap .inputWrap {
    width: 100%;
    max-width: 288px;
}

.discussionsSearchWrap .select2-container {
    width: 100% !important;
}

.country-select {
    width: 100%;
}

.country-select .selected-flag,
.country-select.inside .flag-dropdown:hover .selected-flag {
    background: transparent;
    background-color: transparent;
}

.country-select.inside .selected-flag {
    width: 100%;
    height: 40px;
    padding: 0;
}

.country-select.inside .flag-dropdown {
    padding: 0;
    right: 0;
}

.country-select .flag-dropdown .flag {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background-image: url(../../images/flags/english-uk.svg);
    background-position: 50%;
    background-size: 100%;
    box-shadow: none;
    background-color: transparent;
    margin-left: 8px;
}

.country-select .flag.international {
    background-image: url(../../images/flags/international-icon.svg);
}

.country-select .flag.us {
    background-image: url(../../images/flags/english.svg);
}

.country-select .flag.cl {
    background-image: url(../../images/flags/chile.svg);
}

.country-select .flag.cz {
    background-image: url(../../images/flags/czech.svg);
}

.country-select .flag.fr {
    background-image: url(../../images/flags/french.svg);
}

.country-select .flag.de {
    background-image: url(../../images/flags/german.svg);
}

.country-select .flag.il {
    background-image: url(../../images/flags/hebrew.svg);
}

.country-select .flag-dropdown .flag.mx {
    background-image: url(../../images/flags/spanish-mexico.svg);
}

.country-select .flag.nl {
    background-image: url(../../images/flags/dutch.svg);
}

.country-select .flag.pt {
    background-image: url(../../images/flags/portugal.svg);
}

.country-select .flag.ro {
    background-image: url(../../images/flags/romanian.svg);
}

.country-select .flag.es {
    background-image: url(../../images/flags/spanish.svg);
}

.country-select .flag.gb {
    background-image: url(../../images/flags/english-uk.svg);
}

.country-select .selected-flag .arrow {
    border: none;
    width: 16px;
    height: 16px;
    background-image: url(../../images/pages/number-edit-arrow.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    margin-left: 0;
    position: absolute;
    top: 14px;
    right: 16px;
}

.country-select.inside input,
.country-select.inside input[type="text"] {
    padding-left: 31px;
}

.country-select .selected-flag .arrow.up {
    transform: rotate(180deg);
    border: none;
}

.country-select .country-list {
    border-radius: 6px;
    top: 100%;
    width: 100%;
}

.country-select .country-list::-webkit-scrollbar {
    width: 6px;
}

.country-select .country-list::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.2);
    border-radius: 10px;
    width: 6px;
}

.country-select .country-list::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 6px;
}

.country-select .country-list {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

.discussionsFormWrap {
    align-items: flex-end;
    column-gap: 8px;
}

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

.discussionsFormWrap .newPost {
    margin-bottom: 8px;
}

.discussionsCategoryWrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 288px));
    column-gap: 8px;
    row-gap: 8px;
    align-items: start;
}

.itemCategory {
    width: 100%;
    height: 100%;
    background: var(--bg);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: 200px auto auto 1fr;
    align-items: start;
}

@media (hover: hover) {
    .itemCategory:hover:after {
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        border: 1px solid var(--button-hover-color);
        border-radius: var(--border-radius-lg);
        box-sizing: border-box;
    }
}

.itemCategory:active:after {
    content: "";
    border: 1px solid var(--button-active-color);
}

.discussionsImgWrap {
    max-height: 100%;
    overflow: hidden;
}

.discussionsImgWrap img {
    width: 100%;
    object-fit: cover;
}

.discussionsCategoryName {
    text-align: center;
    padding-top: 13px;
}

.discussionsCategorySubName {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
    text-align: center;
}

.itemCategoryParamsWrap {
    padding: 0 13px 12px 16px;
    align-self: end;
    align-items: flex-end;
}

.foldersAmount {
    font-size: var(--small-text-font-size);
    line-height: 16px;
    font-weight: 400;
    color: var(--secondary-text-color);
    column-gap: 8px;
    justify-content: flex-start;
}

.availabilityWrap {
    justify-content: flex-start;
    align-items: flex-end;
    column-gap: 8px;
}

.availabilityText {
    font-size: var(--small-text-font-size);
    line-height: 16px;
    font-weight: 400;
    color: var(--secondary-text-color);
}

.foldersAmount strong {
    font-weight: 700;
    color: var(--button-active-color);
}

@media only screen and (max-width: 768px) {
    .discussionsSearchWrap {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }

    .discussionsSearchWrap .inputWrap {
        max-width: 100%;
    }

    .discussionsCategoryWrap {
        grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
        grid-auto-rows: 1fr;
    }

    .discussionsFormWrap {
        flex-direction: column;
        row-gap: 8px;
        align-items: flex-start;
    }

    .discussionsFormWrap .newPost {
        width: 100%;
    }
}

/* ==========================================================================
              DISCUSSIONS CATEGORIES PAGE
             ========================================================================== */

.discussionsRoleCategoriesWrap {
    align-items: stretch;
    padding-right: 8px;
    row-gap: 8px;
    width: 100%;
}

.discussionsRoleCategory {
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
    background: var(--bg);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    padding: 8px 26px 8px 16px;
    position: relative;
}

@media (hover: hover) {
    .discussionsRoleCategory:hover:after {
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        border: 1px solid var(--button-hover-color);
        border-radius: var(--border-radius-lg);
        box-sizing: border-box;
    }
}

.discussionsRoleCategoryImg {
    height: 56px;
}

.discussionsRoleCategoryText {
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    line-height: 16px;
    flex-grow: 1;
}

.discussionsRoleCategoryPosts {
    line-height: 16px;
    color: var(--secondary-text-color);
    white-space: nowrap;
}

@media only screen and (max-width: 768px) {
    .discussionsCategoriesPage .breadcrumb,
    .discussionsPostsPage .breadcrumb,
    .discussionsPostDetailsPage .breadcrumb {
        padding-left: 0;
        padding-right: 0;
    }

    .discussionsCategoriesPage .breadcrumb li:first-child {
        padding-left: 0;
    }
}

/* ==========================================================================
              DISCUSSIONS POSTS PAGE
             ========================================================================== */

.discussionsPostsPage .discussionsSearchWrap .inputWrap,
.discussionsPostDetailsPage .discussionsSearchWrap .inputWrap {
    width: 100%;
    max-width: 272px;
}

.discussionsSearchWrapInner {
    flex-grow: 1;
    justify-content: flex-start;
    column-gap: 8px;
}

.newPostBtn {
    justify-self: flex-end;
}

.discussionsPostsPage .itemsWrap,
.discussionsPostDetailsPage .itemsWrap,
.discussionsPostDetailsPage .scroll.containerColumn:not(.userMoreMenuWrap) {
    padding-right: 16px;
}

.discussionsPostWrap {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--bg);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    box-sizing: border-box;
    padding: 16px 16px 8px 16px;
    align-items: stretch;
}

@media (hover: hover) {
    .discussionsPostWrap:hover {
        border: 1px solid var(--button-active-color);
    }
}

.discussionsPostUserInfoWrap {
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 8px;
}

.discussionsPostUserText strong {
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 21px;
}

.discussionsPostUserText span {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 14px;
    color: var(--secondary-text-color);
}

.discussionsPostCountryWrap {
    justify-content: flex-start;
    column-gap: 8px;
}

.dashboardElementContainer .discussionsPostCountryWrap {
    flex-wrap: wrap;
    row-gap: 8px;
}

.dashboardElementContainer img {
    max-width: 100%;
}

.discussionsFlagWrap {
    height: 16px;
    width: 16px;
    padding-top: 3px;
}

.discussionsFlagWrap img {
    display: block;
}

.discussionsPostInfo {
    align-items: flex-end;
    row-gap: 12px;
}

.postTimeWrap {
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 18px;
    min-width: 88px;
}

.discussionsPostControlsWrap {
    column-gap: 8px;
}

.discussionsPostControl {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 14px;
    color: var(--triple-text-color);
    align-items: center;
    column-gap: 4px;
    border: 1px solid var(--triple-text-color);
    background: transparent;
    padding: 3px;
    min-width: 48px;
    justify-content: flex-start;
    box-sizing: border-box;
}

.discussionsPostControlSm {
    min-width: 24px;
}

.discussionsPostControl svg {
    pointer-events: none;
}

.discussionsPostControl.active,
.discussionsPostControl:active:not(.discussionsPostControlBtn) {
    border: 1px solid var(--button-active-color);
    background: var(--button-active-color);
    color: #fff;
}

.discussionsPostControl.active svg path,
.discussionsPostControl:not(.discussionsPostControlBtn):active svg path {
    fill: white;
}

.discussionsPostControl.thumb.active svg path,
.discussionsPostControl.thumb:not(.discussionsPostControlBtn):active svg path {
    fill: transparent;
    stroke: #fff;
}

@media (hover: hover) {
    .discussionsPostControl:hover,
    .discussionsPostControl.active:hover {
        border: 1px solid var(--button-hover-color);
        background: var(--button-hover-color);
        color: #fff;
    }

    .discussionsPostControl:hover svg path,
    .discussionsPostControl:focus svg path,
    .discussionsPostControl.active:hover svg path {
        fill: white;
    }

    .discussionsPostControl.thumb.active:hover svg path,
    .discussionsPostControl.thumb:hover svg path {
        fill: transparent;
        stroke: #fff;
    }
}

.discussionsPostTextWarp {
    padding-top: 8px;
}

.discussionsPostSubject {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: #0d062d;
}

.discussionsPostText {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 3.6em;
    overflow: hidden;
    color: var(--secondary-text-color);
    max-width: calc(100%);
    min-height: 48px;
}

.discussionsPostText li {
    display: list-item;
}

.discussionsPostText ul li {
    list-style-type: disc;
}

.discussionsPostText ul {
    padding-left: 2rem;
}

.discussionsPostText ol li {
    list-style: inherit;

}

.discussionsPostTextWarp .reply label {
    display: none;
}

.postCommentFormWrapper.reply {
    padding-top: 24px;
}

@media only screen and (max-width: 768px) {

    .discussionsPostDetailsPage .cke_toolbar {
        margin-bottom: 8px;
    }

    .discussionsWrap.scroll.containerColumn:not(.userMoreMenuWrap),
    .discussionsPostDetailsPage .scroll.containerColumn:not(.userMoreMenuWrap) {
        padding-left: 16px;
        padding-right: 8px;
    }

    .discussionsPostsPage .discussionsSearchWrap,
    .discussionsPostDetailsPage .discussionsSearchWrap {
        row-gap: 16px;
        padding: 14px 0 0px 0;
    }

    .discussionsSearchWrapInner {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        row-gap: 11px;
    }

    .discussionsPostsPage .discussionsSearchWrap .inputWrap,
    .discussionsPostDetailsPage .discussionsSearchWrap .inputWrap {
        max-width: 100%;
    }

    .discussionsPostsPage .itemsWrap {
        padding-right: 8px;
    }

    .discussionsPostWrap {
        padding: 8px;
    }

    .discussionsPostHead {
        flex-direction: column;
        row-gap: 15px;
    }

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

    .discussionsPostTextWarp {
        padding-top: 4px;
    }

    .discussionsPostText {
        width: calc(100%);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        min-height: auto;
    }
}

/* ==========================================================================
              DISCUSSIONS POST DETAILS PAGE
             ========================================================================== */

.discussionsPostDetailsPage .discussionsPostWrap {
    padding-bottom: 14px;
}

.discussionsPostDetailsPage .discussionsPostWrap:last-child {
    padding-top: 20px;
    padding-bottom: 32px;
}

.discussionsPostDetailsPage
.discussionsPostWrap:first-child
.itemUserInfoImgWrap {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
}

.discussionsPostDetailsPage
.discussionsPostWrap:first-child
.discussionsPostUserText strong {
    font-weight: 700;
    font-size: var(--title-font-size-sm);
    line-height: 16px;
}

.discussionsPostDetailsPage
.discussionsPostWrap:first-child
.discussionsPostUserText {
    padding-top: 8px;
    row-gap: 2px;
}

.discussionsPostDetailsPage .discussionsPostInfo .discussionsPostControlsWrap {
    padding-top: 0;
}

.discussionsPostDetailsPage .discussionsPostSubject {
    font-size: var(--title-font-size-sm);
    padding-top: 6px;
}

.discussionsPostDetailsPage .discussionsPostText {
    display: block;
    max-height: 100%;
    padding-top: 24px;
    min-height: auto;
}

.discussionsPostDetailsPage .discussionsPostText a {
    text-decoration: none;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    font-weight: normal;
    color: var(--inline-link-color);
    white-space: normal;
    word-break: break-word;
}

.discussionsPostDetailsPage .discussionsPostText p {
    margin: 0 0 24px 0;
    white-space: normal;
}

.discussionsPostDetailsPage .discussionsPostText p:last-child {
    margin-bottom: 12px;
}

.discussionsPostDetailsPage .discussionsPostControlsWrap {
    justify-content: flex-start;
    padding-top: 12px;
}

.discussionsPostDetailsPage .attachedFiles {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 8px;
    padding-bottom: 16px;
}

.discussionsPostDetailsPage .attachedFiles span {
    width: calc(100% - 24px - 16px - 16px);
}

.discussionsPostDetailsPage .attachedFileItem {
    width: calc(25% - 16px / 4);
    margin-bottom: 0;
}

.discussionsPostDetailsPage .wysiwyg label {
    font-weight: 500;
    font-size: var(--title-font-size-sm);
    line-height: 24px;
    padding: 30px 0 13px 0;
    color: var(--main-text-color);
}

.discussionsPostDetailsBtns {
    align-items: flex-start;
    margin: 16px 0;
    row-gap: 16px;
}

.discussionsPostDetailsPage .addAttachmentBtn:active path {
    fill: var(--button-text-color);
}

@media (hover: hover) {
    .discussionsPostDetailsPage:hover .discussionsPostWrap {
        border: 1px solid #fff;
    }

    .discussionsPostDetailsPage .addAttachmentBtn:hover path {
        fill: var(--button-text-color);
    }
}

@media only screen and (max-width: 1024px) {
    .discussionsPostDetailsPage .attachedFileItem {
        width: calc(50% - 8px / 2);
    }
}

@media only screen and (max-width: 768px) {
    .discussionsPostDetailsPage .itemsWrap {
        padding-top: 8px;
    }

    .discussionsPostDetailsPage
    .discussionsPostWrap:first-child
    .discussionsPostUserText {
        padding-top: 10px;
    }

    .discussionsPostDetailsPage .discussionsPostSubject {
        padding-top: 11px;
    }

    .discussionsPostDetailsPage .wysiwyg-toolbar-fontStyle,
    .discussionsPostDetailsPage .wysiwyg-toolbar-list,
    .discussionsPostDetailsPage .wysiwyg-toolbar-textAlign {
        border: none;
    }

    .discussionsPostDetailsPage .wysiwyg-toolbar-list,
    .discussionsPostDetailsPage .wysiwyg-toolbar-textAlign {
        padding-left: 0;
    }

    .discussionsPostDetailsPage .attachedFileItem {
        width: calc(100%);
    }
}

.commentsTitle {
    justify-content: flex-start;
    align-items: center;
    column-gap: 6px;
}

.discussionsPostDetailsPage .discussionsPostUserText {
    line-height: 21px;
}

.commentWrap {
    row-gap: 20px;
    width: 100%;
}

.discussionsPostDetailsPage .commentWrapInner {
    align-self: stretch;
}

.discussionsPostDetailsPage .commentTextWrap {
    align-self: stretch;
}

.commentWrap .commentWrap {
    padding-left: 64px;
}

.commentWrap + .commentWrap {
    padding-top: 20px;
}

.commentUserWrap {
    padding-top: 12px;
    justify-content: flex-start;
    column-gap: 8px;
    align-self: stretch;
}

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

.commentWrap .discussionsPostText {
    padding-top: 0;
    padding-left: 63px;
    width: 100%;
    white-space: normal;
}

.discussionsPostDetailsPage .commentWrap .discussionsPostText p:last-child {
    margin-bottom: 8px;
}

.discussionsPostDetailsPage .commentWrap .attachedFiles {
    padding-left: 63px;
}

.commentWrap .discussionsPostControlsWrap {
    padding-top: 0;
    padding-left: 63px;
}

.commentTextWrap .replyTextareaWrap {
    display: none;
    padding-top: 32px;
    padding-left: 63px;
    padding-bottom: 4px;
}

.commentTextWrap.replyOpen .replyTextareaWrap {
    display: flex;
}

.replyTextareaWrap .wysiwyg {
    width: 100%;
}

.commentWrap .wysiwyg-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
}

.commentWrap .wysiwyg-toolbar-fontStyle,
.commentWrap .wysiwyg-toolbar-list,
.commentWrap .wysiwyg-toolbar-textAlign {
    flex-wrap: wrap;
    row-gap: 8px;
}

.discussionsPostDetailsPage
.commentWrap
.commentWrap
.wysiwyg-toolbar-fontStyle,
.discussionsPostDetailsPage .commentWrap .commentWrap .wysiwyg-toolbar-list,
.discussionsPostDetailsPage
.commentWrap
.commentWrap
.wysiwyg-toolbar-textAlign {
    border: none;
}

.discussionsPostDetailsPage .commentWrap .commentWrap .wysiwyg-toolbar-list,
.discussionsPostDetailsPage
.commentWrap
.commentWrap
.wysiwyg-toolbar-textAlign {
    padding-left: 0;
}

.personalCommentEdit {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%23E8E9EE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8623 8.14849C15.2402 7.52208 14.5606 7.1894 13.8313 7.25893C13.1411 7.32475 12.5975 7.73751 12.1955 8.13949L11.6145 8.72047C11.6078 8.72695 11.6012 8.73354 11.5947 8.74025L8.04802 12.287C7.89152 12.4435 7.77022 12.6379 7.68565 12.8098C7.60065 12.9826 7.52267 13.1937 7.49227 13.4065L7.26837 14.9898L7.26811 14.9916C7.20084 15.476 7.3302 15.9661 7.68242 16.3184C8.03465 16.6706 8.52481 16.8 9.00917 16.7327L10.5933 16.5087L10.5943 16.5085C10.8071 16.4781 11.0182 16.4002 11.191 16.3152C11.3628 16.2306 11.5573 16.1093 11.7138 15.9528L15.8613 11.8053C16.2592 11.4074 16.6706 10.8672 16.7395 10.1801C16.8124 9.45319 16.486 8.77258 15.8623 8.14849ZM11.8887 10.5676L9.10868 13.3476C9.1071 13.3494 9.09802 13.3598 9.0836 13.3811C9.06708 13.4056 9.04889 13.4368 9.03154 13.4721C9.01422 13.5073 9.00026 13.5414 8.99038 13.5708C8.98553 13.5853 8.98216 13.5971 8.97995 13.606C8.97796 13.614 8.97727 13.6182 8.97719 13.6186L8.97719 13.6186L8.75385 15.198C8.75081 15.2202 8.75043 15.2377 8.7511 15.2497C8.76312 15.2504 8.77996 15.2501 8.80216 15.247L10.3821 15.0236L10.3821 15.0236C10.3826 15.0235 10.3868 15.0228 10.3948 15.0209C10.4037 15.0186 10.4155 15.0153 10.43 15.0104C10.4594 15.0005 10.4935 14.9866 10.5287 14.9693C10.564 14.9519 10.5952 14.9337 10.6197 14.9172C10.641 14.9028 10.6513 14.8937 10.6531 14.8921L13.4346 12.1107C12.7998 11.7309 12.2688 11.1997 11.8887 10.5676ZM14.5464 10.9989L14.8007 10.7446C15.114 10.4313 15.23 10.2004 15.247 10.0305C15.26 9.90064 15.2311 9.63862 14.8007 9.20814L14.7986 9.20614C14.3661 8.77036 14.1032 8.73982 13.9737 8.75216C13.805 8.76825 13.5734 8.88292 13.2562 9.20015L12.9993 9.45704C13.3022 10.1455 13.8551 10.6986 14.5464 10.9989Z' fill='%23A2A8B8'/%3E%3C/svg%3E%0A");
}

.personalCommentEdit:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%232C81FB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8623 8.14849C15.2402 7.52208 14.5606 7.1894 13.8313 7.25893C13.1411 7.32475 12.5975 7.73751 12.1955 8.13949L11.6145 8.72047C11.6078 8.72695 11.6012 8.73354 11.5947 8.74025L8.04802 12.287C7.89152 12.4435 7.77022 12.6379 7.68565 12.8098C7.60065 12.9826 7.52267 13.1937 7.49227 13.4065L7.26837 14.9898L7.26811 14.9916C7.20084 15.476 7.3302 15.9661 7.68242 16.3184C8.03465 16.6706 8.52481 16.8 9.00917 16.7327L10.5933 16.5087L10.5943 16.5085C10.8071 16.4781 11.0182 16.4002 11.191 16.3152C11.3628 16.2306 11.5573 16.1093 11.7138 15.9528L15.8613 11.8053C16.2592 11.4074 16.6706 10.8672 16.7395 10.1801C16.8124 9.45319 16.486 8.77258 15.8623 8.14849ZM11.8887 10.5676L9.10868 13.3476C9.1071 13.3494 9.09802 13.3598 9.0836 13.3811C9.06708 13.4056 9.04889 13.4368 9.03154 13.4721C9.01422 13.5073 9.00026 13.5414 8.99038 13.5708C8.98553 13.5853 8.98216 13.5971 8.97995 13.606C8.97796 13.614 8.97727 13.6182 8.97719 13.6186L8.97719 13.6186L8.75385 15.198C8.75081 15.2202 8.75043 15.2377 8.7511 15.2497C8.76312 15.2504 8.77996 15.2501 8.80216 15.247L10.3821 15.0236L10.3821 15.0236C10.3826 15.0235 10.3868 15.0228 10.3948 15.0209C10.4037 15.0186 10.4155 15.0153 10.43 15.0104C10.4594 15.0005 10.4935 14.9866 10.5287 14.9693C10.564 14.9519 10.5952 14.9337 10.6197 14.9172C10.641 14.9028 10.6513 14.8937 10.6531 14.8921L13.4346 12.1107C12.7998 11.7309 12.2688 11.1997 11.8887 10.5676ZM14.5464 10.9989L14.8007 10.7446C15.114 10.4313 15.23 10.2004 15.247 10.0305C15.26 9.90064 15.2311 9.63862 14.8007 9.20814L14.7986 9.20614C14.3661 8.77036 14.1032 8.73982 13.9737 8.75216C13.805 8.76825 13.5734 8.88292 13.2562 9.20015L12.9993 9.45704C13.3022 10.1455 13.8551 10.6986 14.5464 10.9989Z' fill='white'/%3E%3C/svg%3E%0A");
}

.personalCommentEdit:active,
.personalCommentEdit:focus {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%233264E8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8623 8.14849C15.2402 7.52208 14.5606 7.1894 13.8313 7.25893C13.1411 7.32475 12.5975 7.73751 12.1955 8.13949L11.6145 8.72047C11.6078 8.72695 11.6012 8.73354 11.5947 8.74025L8.04802 12.287C7.89152 12.4435 7.77022 12.6379 7.68565 12.8098C7.60065 12.9826 7.52267 13.1937 7.49227 13.4065L7.26837 14.9898L7.26811 14.9916C7.20084 15.476 7.3302 15.9661 7.68242 16.3184C8.03465 16.6706 8.52481 16.8 9.00917 16.7327L10.5933 16.5087L10.5943 16.5085C10.8071 16.4781 11.0182 16.4002 11.191 16.3152C11.3628 16.2306 11.5573 16.1093 11.7138 15.9528L15.8613 11.8053C16.2592 11.4074 16.6706 10.8672 16.7395 10.1801C16.8124 9.45319 16.486 8.77258 15.8623 8.14849ZM11.8887 10.5676L9.10868 13.3476C9.1071 13.3494 9.09802 13.3598 9.0836 13.3811C9.06708 13.4056 9.04889 13.4368 9.03154 13.4721C9.01422 13.5073 9.00026 13.5414 8.99038 13.5708C8.98553 13.5853 8.98216 13.5971 8.97995 13.606C8.97796 13.614 8.97727 13.6182 8.97719 13.6186L8.97719 13.6186L8.75385 15.198C8.75081 15.2202 8.75043 15.2377 8.7511 15.2497C8.76312 15.2504 8.77996 15.2501 8.80216 15.247L10.3821 15.0236L10.3821 15.0236C10.3826 15.0235 10.3868 15.0228 10.3948 15.0209C10.4037 15.0186 10.4155 15.0153 10.43 15.0104C10.4594 15.0005 10.4935 14.9866 10.5287 14.9693C10.564 14.9519 10.5952 14.9337 10.6197 14.9172C10.641 14.9028 10.6513 14.8937 10.6531 14.8921L13.4346 12.1107C12.7998 11.7309 12.2688 11.1997 11.8887 10.5676ZM14.5464 10.9989L14.8007 10.7446C15.114 10.4313 15.23 10.2004 15.247 10.0305C15.26 9.90064 15.2311 9.63862 14.8007 9.20814L14.7986 9.20614C14.3661 8.77036 14.1032 8.73982 13.9737 8.75216C13.805 8.76825 13.5734 8.88292 13.2562 9.20015L12.9993 9.45704C13.3022 10.1455 13.8551 10.6986 14.5464 10.9989Z' fill='white'/%3E%3C/svg%3E%0A");
}

.personalCommentDelete {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%23E8E9EE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.25 8C10.25 7.86193 10.3619 7.75 10.5 7.75H13.5C13.6381 7.75 13.75 7.86193 13.75 8V8.75H10.25V8ZM8.75 8.75V8C8.75 7.0335 9.5335 6.25 10.5 6.25H13.5C14.4665 6.25 15.25 7.0335 15.25 8V8.75H15.4881C15.4954 8.74989 15.5028 8.74989 15.5102 8.75H16.5C16.9142 8.75 17.25 9.08579 17.25 9.5C17.25 9.91421 16.9142 10.25 16.5 10.25H16.1567L15.3592 16.2313C15.2433 17.1007 14.5017 17.75 13.6246 17.75H10.3756C9.4985 17.75 8.75688 17.1007 8.64095 16.2313L7.84345 10.25H7.5C7.08579 10.25 6.75 9.91421 6.75 9.5C6.75 9.08579 7.08579 8.75 7.5 8.75H8.48998C8.49736 8.74989 8.50473 8.74989 8.51208 8.75H8.75ZM14.5 10.25H9.5H9.35672L10.1278 16.033C10.1444 16.1572 10.2503 16.25 10.3756 16.25H13.6246C13.7499 16.25 13.8558 16.1572 13.8724 16.033L14.6435 10.25H14.5Z' fill='%23A2A8B8'/%3E%3C/svg%3E%0A");
}

.personalCommentDelete:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%232C81FB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.25 8C10.25 7.86193 10.3619 7.75 10.5 7.75H13.5C13.6381 7.75 13.75 7.86193 13.75 8V8.75H10.25V8ZM8.75 8.75V8C8.75 7.03351 9.5335 6.25 10.5 6.25H13.5C14.4665 6.25 15.25 7.03351 15.25 8V8.75H15.4881C15.4954 8.7499 15.5028 8.7499 15.5102 8.75H16.5C16.9142 8.75 17.25 9.08579 17.25 9.5C17.25 9.91422 16.9142 10.25 16.5 10.25H16.1567L15.3592 16.2313C15.2433 17.1007 14.5017 17.75 13.6246 17.75H10.3756C9.4985 17.75 8.75688 17.1007 8.64095 16.2313L7.84345 10.25H7.5C7.08579 10.25 6.75 9.91422 6.75 9.5C6.75 9.08579 7.08579 8.75 7.5 8.75H8.48998C8.49736 8.7499 8.50473 8.7499 8.51208 8.75H8.75ZM14.5 10.25H9.5H9.35672L10.1278 16.0331C10.1444 16.1573 10.2503 16.25 10.3756 16.25H13.6246C13.7499 16.25 13.8558 16.1573 13.8724 16.0331L14.6435 10.25H14.5Z' fill='white'/%3E%3C/svg%3E%0A");
}

.personalCommentDelete:active,
.personalCommentDelete:focus {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='4' fill='%233264E8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.25 8C10.25 7.86193 10.3619 7.75 10.5 7.75H13.5C13.6381 7.75 13.75 7.86193 13.75 8V8.75H10.25V8ZM8.75 8.75V8C8.75 7.03351 9.5335 6.25 10.5 6.25H13.5C14.4665 6.25 15.25 7.03351 15.25 8V8.75H15.4881C15.4954 8.7499 15.5028 8.7499 15.5102 8.75H16.5C16.9142 8.75 17.25 9.08579 17.25 9.5C17.25 9.91422 16.9142 10.25 16.5 10.25H16.1567L15.3592 16.2313C15.2433 17.1007 14.5017 17.75 13.6246 17.75H10.3756C9.4985 17.75 8.75688 17.1007 8.64095 16.2313L7.84345 10.25H7.5C7.08579 10.25 6.75 9.91422 6.75 9.5C6.75 9.08579 7.08579 8.75 7.5 8.75H8.48998C8.49736 8.7499 8.50473 8.7499 8.51208 8.75H8.75ZM14.5 10.25H9.5H9.35672L10.1278 16.0331C10.1444 16.1573 10.2503 16.25 10.3756 16.25H13.6246C13.7499 16.25 13.8558 16.1573 13.8724 16.0331L14.6435 10.25H14.5Z' fill='white'/%3E%3C/svg%3E%0A");
}

@media only screen and (max-width: 768px) {
    .discussionsPostDetailsPage .discussionsPostWrap:last-child {
        padding-top: 14px;
    }

    .commentWrap .discussionsPostText {
        padding-left: 0;
        padding-top: 2px;
    }

    .commentWrap .discussionsPostControlsWrap {
        padding-left: 0;
    }

    .discussionsPostDetailsPage .commentWrap .attachedFiles {
        padding-left: 0;
    }

    .commentTextWrap .replyTextareaWrap {
        padding-left: 0;
    }

    .commentWrap .commentWrap {
        padding-left: 16px;
    }

    .commentWrap {
        row-gap: 22px;
    }
}

/* ==========================================================================
              DISCUSSIONS NEW POST
             ========================================================================== */

.addPostModal .modal-dialog {
    max-height: calc(100vh - 128px) !important;
    width: 76.5% !important;
    max-width: 1104px !important;
}

.filterChmpange .modal-dialog {
    max-width: 600px !important;
}


.newPostPopup {
    max-height: calc(100vh - 128px);
    padding: 24px 8px 32px;
}

.newPostPopupInner {
    max-height: calc(100vh - 128px - 64px - 64px);
    overflow: auto;
    padding: 0 55px 0 63px;
}

.addPostModal .modal-content {
    padding: 53px 8px 32px;
}

.addPostModal .modal-body {
    padding: 0 55px 0 63px;
}

.newPostCountriesWrap {
    padding-bottom: 14px;
}

.newPostCountriesWrap.moreClose {
    padding-bottom: 20px;
}

.newPostCountriesHeading {
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 15px;
    color: var(--main-text-color);
    padding: 28px 8px 13px;
}

.newPostSelectedCountriesWrap {
    width: 100%;
}

.countriesAreSelectedIcon {
    display: none;
}

.countriesAreSelectedIcon.active {
    display: flex;
}

.countriesAreSelected .newPostSelectedCountries .countriesAreSelectedIcon {
    display: flex;
}

.countriesAreSelectedIcon {
    width: 40px;
    height: 40px;
}

.newPostSelectedCountries,
.newPostSelectedCountriesInner {
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    flex-grow: 1;
}

.countryBtn.btn-secondary {
    color: var(--button-secondary-color);
}

.newPostSelectedCountries > label.countryBtn:hover img,
.newPostSelectedCountries > label.countryBtn.active img {
    visibility: hidden;
}

.newPostSelectedCountries > label.countryBtn:hover,
.newPostSelectedCountries > label.countryBtn.active {
    position: relative;
}

.newPostSelectedCountries > label.countryBtn:hover:before,
.newPostSelectedCountries > label.countryBtn.active:before {
    content: '';
    position: absolute;
    top: 12px;
    left: 15px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4572 14.0881C10.4374 14.6685 9.2574 15 8 15C6.92791 15 5.91211 14.759 5.00382 14.3282C7.42508 13.4864 8.88386 9.76724 8.00021 8C7.00024 6.5 6.00023 6 3.00019 6C1.50019 6 1.50023 8.5 2.00019 9C2.09536 9.09517 2.2842 9.16946 2.50939 9.25804C3.1208 9.49855 4.00016 9.84447 4.00019 11C4.00021 11.5437 4.02211 12.0655 4.04209 12.5415L4.04209 12.5416C4.06182 13.0117 4.07968 13.4373 4.07275 13.7954C2.21831 12.5363 1 10.4104 1 8C1 6.9264 1.24169 5.90926 1.67363 5H3.17157C3.70201 5 4.21071 4.78929 4.58579 4.41421L5.41421 3.58579C5.78929 3.21071 6 2.70201 6 2.17157V1.28988C6.63371 1.10128 7.30503 1 8 1C8.81892 1 9.605 1.14062 10.3354 1.39904C10.0163 2.29591 9.66103 3.98309 10 5C10.2291 5.68724 10.773 5.95466 11.3433 6.23503C12.0178 6.56661 12.7291 6.91632 13 8C13 9.37567 13 12.4335 11.4572 14.0881ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z' fill='%23FFFFFF'%3E%3C/path%3E%3C/svg%3E");
}

.countryBtn.disabled {
    color: var(--button-text-color);
    background: var(--button-disabled-color);
}

.moreBtn:hover path,
#selectAllCountries:hover path {
    fill: var(--button-text-color);
}

@media (hover: hover) {
    .moreBtn:hover path,
    #selectAllCountries:hover path {
        fill: var(--button-text-color);
    }

    .countryBtn.active:hover:not(:disabled) {
        background: var(--button-hover-color);
        color: var(--button-text-color);
    }

    .countryBtn.btn-secondary:hover {
        color: var(--button-text-color);
    }
}

.moreBtn:active path,
.moreBtn:focus path,
#selectAllCountries:active path,
#selectAllCountries:focus path,
#selectAllCountries.active path {
    fill: var(--button-text-color);
}

.newPostCountriesWrapScroll {
    padding-top: 16px;
}

.newPostCountriesInnerWrap {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
    width: 100%;
}

.countryBtn.active:not(:disabled),
#selectAllCountries.active {
    background: var(--button-active-color);
    color: var(--button-text-color);
}

.newPostCountriesWrap .btn-icon {
    column-gap: 10px;
}

.moreClose .newPostCountriesInnerWrap {
    display: none;
}

.moreClose .moreBtn svg {
    transform: rotate(180deg);
}

.postTitleWrap {
    row-gap: 12px;
}

.postTitleWrap .inputWrap {
    width: 100%;
}

.newPostTextareaWrap {
    width: 100%;
    padding-top: 12px;
}

.newPostTextareaWrap .wysiwyg {
    width: 100%;
}

.newPostTextareaWrap .discussionsPostDetailsBtns {
    margin-bottom: 40px;
}

.newPostCreate,
.formSubmitBtn .btn {
    align-self: center;
}

.newPostUpload,
.commentFormInner {
    width: auto;
    display: flex;
    align-items: flex-start;
    margin: 11px 0 40px;
}

.commentFormInner {
    margin: 0 0 16px;
}

.commentFormInner #test-fileupload {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.commentFormInner .attachedFilesTable {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 8px;
}

.commentFormInner .attachedFilesTable > tbody,
.postCommentFormWrapper.reply .attachedFilesTable > tbody {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 8px;
}

.commentFormInner .attachedFilesTable > tbody > tr,
.postCommentFormWrapper.reply .attachedFilesTable > tbody > tr {
    display: flex !important;
    width: calc(25% - 24px / 4) !important;
    margin-bottom: 8px !important;
    min-width: 270px;
}

.discussionsPostDetailsPage .attachedFilesTable a,
.postCommentFormWrapper.reply tbody > tr p {
    white-space: nowrap;
}

.newPostUpload #fileattachments-fileupload-fileupload,
.commentFormInner .uploadView {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.newPostUpload .fileupload-buttonbar,
.commentFormInner .fileupload-buttonbar {
    display: flex;
    align-items: flex-start;
}

.postCommentFormWrapper.reply .fileupload-buttonbar {
    display: inline-block;
    margin-bottom: 16px;
}


.newPostUpload .fileinput-button,
.commentFormInner .fileinput-button,
.postCommentFormWrapper.reply .fileinput-button {
    color: var(--button-secondary-color);
    background: var(--button-secondary-bg);
    display: flex;
    justify-content: center;
    column-gap: 8px;
    align-items: center;
    border-radius: var(--border-radius-sm);
    padding: 12px 15px;
    height: 40px;
    font-style: normal;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 1.7;
    border: none;
    white-space: nowrap;
    text-decoration: none;
}

.newPostUpload .fileinput-button:hover,
.commentFormInner .fileinput-button:hover,
.postCommentFormWrapper.reply .fileinput-button:hover {
    color: var(--button-text-color);
    background: var(--button-hover-color);
}

.newPostUpload .fileinput-button:hover path,
.commentFormInner .fileinput-button:hover path,
.postCommentFormWrapper.reply .fileinput-button:hover path {
    fill: var(--button-text-color);
}

.newPostUpload .fileinput-button span,
.commentFormInner .fileinput-button span {
    cursor: pointer;
}

@media only screen and (max-width: 1200px) {
    .newPostPopupInner {
        padding: 0 32px 0 40px;
    }
}

@media only screen and (max-width: 768px) {

    .filterChmpange .modal-dialog {
        max-width: 100% !important;
    }

    .addPostModal .modal-dialog {
        max-height: calc(100vh - 64px) !important;
        width: 100% !important;
    }

    .forumMobile .addPostModal .modal-dialog {
        max-height: calc(100vh) !important;
        top: 0 !important;
    }

    .addPostModal .modal-body {
        max-height: calc(100vh - 64px - 64px - 50px);
        padding: 0 8px 0 8px;
    }

    .newPostSelectedCountries span {
        display: none;
    }

    .countryBtn span {
        display: none;
    }

    .newPostSelectedCountries .btn {
        padding: 12px;
    }

    .newPostCountriesInnerWrap {
        max-height: 232px;
        overflow-y: auto;
    }

    .newPostPopup .wysiwyg-toolbar-list,
    .newPostPopup .wysiwyg-toolbar-textAlign {
        padding-left: 0;
    }

    .newPostPopup .wysiwyg-toolbar-fontStyle,
    .newPostPopup .wysiwyg-toolbar-list,
    .newPostPopup .wysiwyg-toolbar-textAlign {
        border: none;
    }

    .newPostSelectedCountries > label.countryBtn:hover:before,
    .newPostSelectedCountries > label.countryBtn.active:before {
        left: 12px;
    }

    .commentFormInner .attachedFilesTable > tbody > tr,
    .postCommentFormWrapper.reply .attachedFilesTable > tbody > tr {
        width: 100% !important;
    }
}

/* ==========================================================================
              DISCUSSIONS PAGE MOBILE DARK THEME
             ========================================================================== */


body.darkTheme {
    --bg: #1B335A;
    --manual-bg: #0F1929;
    --main-text-color: #ffffff;
    --secondary-text-color: #ffffff;
}

.darkTheme .discussionsPostSubject {
    color: #ffffff;
}

/* ==========================================================================
              DISCUSSIONS PAGE MOBILE LARGE TEXT
             ========================================================================== */


body.isLargeFont {
    --main-font-size: calc(14px + 3px);
    --main-font-size-lg: calc(16px + 3px);
    --main-font-size-sm: calc(13px + 3px);

    --title-font-size-lg: calc(30px + 3px);
    --title-font-size-lg-s: calc(24px + 3px);
    --title-font-size-md: calc(20px + 3px);
    --title-font-size-sm: calc(18px + 3px);

    --sub-title-font-size: calc(15px + 3px);
    --small-text-font-size: calc(12px + 3px);
    --xsmall-text-font-size: calc(10px + 3px);
}

/* ==========================================================================
              COMMUNITY PAGE
             ========================================================================== */
.communityTabs {

}

.communitySearchWrap {
    align-items: flex-start;
    column-gap: 8px;
    padding-top: 10px;
    padding-bottom: 16px;
}

.generalSearchWrap {
    align-items: flex-end;
    justify-content: flex-start;
    flex-grow: 1;
    column-gap: 8px;
    min-width: 0;
}

.communityPage .inputWrap {
    max-width: 552px;
    width: 100%;
}

.communityContent .generalSearchWrap .inputWrap {
    width: calc(100% - 131px);
    max-width: 552px;
}

.generalSearchWrap .switch {
    margin-bottom: 4px;
    margin-right: 74px;
}

.swichSm.switch {
    width: 48px;
}

.swichSm .slider {
    background-color: var(--swich-small-off);
}

.swichSm input:checked + .slider {
    background-color: var(--swich-small-on);
}

.swichSm input:checked + .slider:after,
.swichSm .slider:after {
    display: none;
}

.swichSm input:checked + .slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

.swichLabel {
    color: var(--secondary-text-color);
    position: absolute;
    top: 4px;
    right: -74px;
    cursor: pointer;
    white-space: nowrap;
}

.swichSearchTypeBtn {
    column-gap: 11px;
    margin-top: 20px;
}

.advanced .swichSearchTypeBtn img {
    transform: rotate(180deg);
}

.general .advancedSearchWrap,
.general .advancedSearchTitle {
    display: none;
}

.advanced .generalSearchWrap {
    display: none;
}

.advancedSearchWrap {
    flex-wrap: wrap;
    width: 100%;
    row-gap: 12px;
}

.advancedSearchTitle {
    font-size: var(--title-font-size-lg-s);
    padding-top: 24px;
    flex-grow: 1;
}

.advancedSearchWrap .inputWrap {
    width: calc(25% - 8px * 3 / 4);
}

.searchBtnWrap {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 32px;
}

.searchBtnWrap .btn {
    align-self: center;
}

.communityTabContent .contentWrap {
    padding: 4px 8px 8px 0;
}

.communityContent {
    overflow-y: auto;
    max-height: 100%;
    width: 100%;
    height: 100%;
    padding: 0px 8px 0 24px;
}

.communityUsersWrap {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 8px;
}

.communityUser {
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-lg);
    width: calc(25% - 8px * 3 / 4);
    padding: 16px;
    row-gap: 8px;
}

.communityUser .userControlsInnerWrap span {
    cursor: default;
}

.userPersonalInfo {
    column-gap: 16px;
    row-gap: 2px;
    width: calc(100%);
}

.userName {
    width: calc(100% - 96px);
}

.userName strong,
.userName a {
    width: calc(100%);
    display: block;
}

.companyName {
    line-height: 11px;
}

.userRole {
    line-height: 16px;
    height: 48px;
    box-sizing: border-box;
    padding-top: 3px;
}

.userFacilitator {
    line-height: 16px;
    padding-top: 8px;
}

.userLocation {
    color: var(--secondary-text-color);
    font-size: var(--main-font-size);
    line-height: 24px;
    padding-top: 5px;
    width: calc(100%);
}

.userLocation .notPublished {
    opacity: 0.5;
}

.userCountry,
.userAddress {
    align-items: center;
    column-gap: 8px;
}

.userAddress {
    width: calc(100%);
}

.userAddress span {
    width: calc(100% - 16px - 8px);
}

.communityContent .itemUserImgWrap {
    width: 80px;
    height: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
}

.communityContent .itemUserImgWrap::after {
    content: "";
    background: transparent;
    border: none;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: -6px;
    right: -6px;
    z-index: 0;
}

.communityContent .connected .itemUserImgWrap::after {
    border: 3px solid var(--main-text-color);
}

.communityContent .receivedRequest .itemUserImgWrap::after {
    border: 3px solid #2BCA92;
}

.communityContent .sentRequest .itemUserImgWrap::after {
    border: 3px solid var(--attention-yellow);
}

.userControlsWrap {
    width: 100%;
}


.userControlsInnerWrap {
    column-gap: 8px;
}

.userControlsInnerWrap a {
    height: 40px;
}

@media (hover: hover) {
    .userControlsInnerWrap a:hover rect {
        fill: var(--button-hover-color);
    }

    .userControlsInnerWrap a:hover.cancelConnectionBtn rect {
        fill: var(--warning-red);
    }
}

.userControlsInnerWrap a:active rect {
    fill: var(--button-active-color);
}

.userControlsInnerWrap a:active.cancelConnectionBtn rect {
    fill: var(--red-color);
}

.userControlsInnerWrap a:active.acceptConnectionBtn rect {
    fill: #2BCA92;
}

.paginationWrap {
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    padding: 32px 0 20px;
    color: var(--secondary-text-color);
}

.paginationWrap .inputWrap {
    width: 28px;
    height: 28px;
}

.inputWrap .pageNumber {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    color: var(--main-text-color);
    border: 1px solid var(--secondary-text-color);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    text-align: center;
    padding: 0;
}

.paginationBtn {
    background: transparent;
    padding: 0;
    border-radius: 50%;
    border: none;
}

@media (hover: hover) {
    .paginationBtn:hover {
        background: transparent;
        padding: 0;
        border-radius: 50%;
        border: none;
    }
}

@media only screen and (max-width: 1220px) {
    .communityUser {
        width: calc(33.33% - 8px * 2 / 3);
    }
}

@media only screen and (max-width: 1024px) {
    .communityUser {
        width: calc(50% - 8px * 1 / 2);
    }

    .advancedSearchWrap .inputWrap {
        width: calc(50% - 8px * 1 / 2);
    }
}

@media only screen and (max-width: 768px) {

    .advancedSearchTitle {
        padding-top: 0;
    }

    .communityTabs {
        padding-left: 16px;
    }

    .communitySearchWrap {
        flex-direction: column;
        row-gap: 8px;
        padding-left: 0px;
    }

    .generalSearchWrap {
        width: 100%;
    }

    .communityPage .inputWrap {
        max-width: 100%;
    }

    .swichSearchTypeBtn {
        margin-top: 0;
        width: 100%;
    }

    .advancedSearchWrap .inputWrap {
        width: 100%;
    }

    .communityTabContent .contentWrap {
        padding-right: 0;
    }

    .communityContent {
        padding: 11px 8px 0 0px;
    }

    .communityUser {
        width: calc(100%);
    }
}


/* ==========================================================================
              MY ACCOUNT PAGE
             ========================================================================== */

.myAccountTabContent .contentWrap {
    padding-top: 8px;
}

.accountContent {
    overflow-y: auto;
    height: 100%;
    align-items: stretch;
    row-gap: 28px;
}

.accountEditableArea,
.accountEditArea {
    row-gap: 24px;
    align-items: stretch;
}

.accountWrap {
    row-gap: 16px;
    column-gap: 20px;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: start;
    padding-top: 20px;
}

.accountEditArea .accountWrap {
    row-gap: 11px;
}

.accountEditArea {
    row-gap: 19px;
}

.accountEditArea .accountTitle:not(:first-child) {
    padding-bottom: 5px;
}

.accountWrap .form-group label {
    padding-left: 0;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
}

.accountWrap .form-group div {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 20px;
}

.privacyTab .accountWrap > div:nth-child(-n + 3) {
    height: 30px;
}

.accountTitle:not(:first-child) {
    padding-top: 8px;
}

.accountTitle,
.accountSubTitle {
    white-space: nowrap;
}

.accountSubTitle,
.form-group .accountSubTitle {
    line-height: 24px;
}

.accountSettingValue,
.accountSettingRadio {
    line-height: 24px;
    color: var(--secondary-text-color);
}

.accountSettingValue {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 36px;
}

.accountBtnWrap {
    padding-bottom: 16px;
    column-gap: 8px;
    width: 100%;
    justify-content: flex-start;
}

.myAccountTabContent .btn-icon {
    column-gap: 11px;
}

.accountEditArea.areaHidden,
.accountEditableArea.areaHidden {
    display: none !important;
}

.accountSettingRadio {
    justify-content: flex-start;
    align-items: center;
    column-gap: 34px;
}

.radio {
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    column-gap: 8px;
}

input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
    font: inherit;
    color: var(--triple-text-color);
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    min-width: 24px;
    border: 1px solid var(--triple-text-color);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

input[type="radio"]::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -5px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 10px 10px var(--input-active-color);
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="radio"]:checked {
    border: 2px solid var(--input-active-color);
}

input[type="radio"]:hover {
    border: 2px solid var(--input-hover-color);
}

@media only screen and (max-width: 1024px) {
    .privacyTab .accountWrap > div:nth-child(-n + 3) {
        height: 44px;
    }
}

@media only screen and (max-width: 768px) {

    .accountContent {
        padding: 20px 8px 0 16px;
    }

    .accountWrap {
        grid-template-columns: 1fr;
    }

    .accountEditArea .accountWrap {
        grid-template-columns: 1fr;
    }

    .privacyTab .accountWrap > div:nth-child(-n + 3) {
        height: auto;
    }

    .invisibleBlock {
        display: none;
    }

}

.myAccountTab .accountContent {
    padding: 14px 8px 0 16px;
    row-gap: 24px;
}

.blueprintVersion {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
}

.switchText {
    --width: 195px;
    --height: 40px;
    background-color: var(--button-secondary-bg);
    border-radius: 36px;
    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    cursor: pointer;

    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
}

.switchText input {
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
}

.switchText .slider {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 36px;
    top: 0;
    left: 0;
    background-color: var(--button-secondary-bg);
}

.switchText .slider::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    border-radius: 26px;
    width: calc(var(--width) / 2 - 4px);
    height: calc(var(--height) - 8px);

    background: var(--button-active-color);
    color: var(--button-text-color);
}

.switchText .slider::after {
    content: '';
}

input:checked + .slider:after {
    display: none;
}

.switchText input:checked + .slider {
    background-color: var(--button-secondary-bg);
}


.switchText input:checked + .slider:before {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
    right: 4px;
    left: auto;
}

.switchText .labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 40px;
}

.switchText .labels::after {
    content: attr(data-off);
    position: absolute;
    right: 0;
    color: var(--button-active-color);
    opacity: 1;
    width: 48%;
    text-align: left;
}

.switchText .labels::before {
    content: attr(data-on);
    position: absolute;
    left: 4%;
    color: var(--button-text-color);
    opacity: 1;
    width: 48%;
}

.switchText input:checked ~ .labels::after {
    color: var(--button-text-color);
}

.switchText input:checked ~ .labels::before {
    color: var(--button-active-color);
}

.blueprintVersion .swichLabel {
    color: var(--main-text-color);
    position: static;
}

.accountColumnsWrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(50% + 8px) calc(50% - 8px));
    row-gap: 8px;
    align-items: start;
}

.myAccountTab .profileUserPhotoWrap {
    position: relative;
    width: 120px;
    height: 120px;
    top: auto;
    left: auto;
}

.myAccountTab .profileUserPhoto {
    border: none;
    width: 120px;
    height: 120px;
}

.myAccountTab .profilePageImageEdit {
    padding: 0px;
}

.accountPersonalInfoWrap {
    justify-content: flex-start;
    column-gap: 16px;
}

.accountPersonalInfo {
    padding-top: 5px;
    max-width: calc(100% - 120px - 16px);
}

.accountPersonalInfo,
.myAccountTab .profileUserContact,
.myAccountTab .profileUserContactInner {
    width: 100%;
}

.myAccountTab .profileUserContact {
    row-gap: 8px;
    padding-top: 11px;
    min-height: 100px;
}

.myAccountTab .profileUserContactInner {
    color: var(--secondary-text-color);
    line-height: 16px;
}

.myAccountTab .accountBtnWrap {
    padding-top: 14px;
    align-self: end;
}

.myAccountTab .companyImgWrap {
    width: 120px;
    height: 80px;
}

.myAccountTab .profileUserContactInner .inlineLink {
    line-height: 16px;
}

.myAccountTab .accountEditArea {
    padding: 0 24px 0 8px;
}


.myAccountTab .profileInfoEdit {
    padding-top: 4px;
    padding-bottom: 0;
}

.myAccountTab .profileInfoEdit .row {
    row-gap: 7px;
}

.myAccountTab .profileNameEdit {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 12px;
}

.myAccountTab .profileNameEdit .inputWrap {
    padding-right: 0;
}

.myAccountTab .profileNameEdit .inputWrap:first-child,
.myAccountTab .profileNameEdit .inputWrap:last-child {
    width: calc(26% - 4px);
}

.myAccountTab .profileNameEdit .inputWrap {
    width: calc(74% - 4px);
}

.myAccountTab .select2 {
    width: 100%;
}

.myAccountTab .profileContactEdit {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 12px;
}

.myAccountTab .profileContactEdit .inputWrap {
    width: calc(50% - 4px);
    padding-right: 0;
}

.myAccountTab .profileContactEdit .inputWrap:last-child {
    width: 100%;
}

.select2-container .select2-selection--single {
    width: 100%;
    height: 40px;
    border: 1px solid var(--triple-text-color);
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 4px 32px 1px 7px;
    color: var(--secondary-text-color);
    outline: 0 none;
}

@media (hover: hover) {
    .select2-container .select2-selection--single:hover {
        border: 1px solid var(--input-hover-color);
        outline: 0 none;
    }
}

.select2-container .select2-selection--single:focus,
.select2-container .select2-selection--single:focus-visible {
    border: 1px solid var(--input-active-color);
    outline: 0 none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--secondary-text-color);
    padding: 0;
}

.countrySelect {
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::before {
    position: absolute;
    bottom: 10px;
    right: 15px;
    content: url(../../images/pages/select-arrow.svg);
    cursor: pointer;
    pointer-events: none;
}

.select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow::before {
    transform: rotate(180deg);
    bottom: 6px;
}

.select2-container--default .select2-selection--single:hover .select2-selection__arrow::before {
    content: url(../../images/pages/select-arrow-hover.svg);
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.2);
    border-radius: 10px;
    width: 6px;
}

.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 6px;
}

.select2-container--default .select2-results > .select2-results__options {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

.select2-hidden-accessible {
    display: none;
}

.myAccountTab .profileContactEdit .itemControlEdit {
    right: 9px;
    bottom: 14px;
}

.myAccountTab .checkbox {
    margin-top: 4px;
    column-gap: 8px;
    padding-left: 0;
    color: var(--secondary-text-color);
    --border-active: var(--success-green);
    --border-hover: var(--success-green);

    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
}

.profileInfoEdit .form-group .checkbox input {
    padding-right: 0;
}

.myAccountTab .accountEditArea .accountBtnWrap {
    padding-top: 16px;
}

.accountPersonalInfo .ellipsisOneLine {
    width: calc(100% - 32px);
}

@media only screen and (max-width: 1200px) {
    .blueprintVersionWrap {
        grid-template-columns: 100%;
        row-gap: 24px;
    }
}


@media only screen and (max-width: 1024px) {
    .sidebarNav:not(.sideMenuClose) ~ .accountPage .accountColumnsWrap {
        grid-template-columns: 100%;
        row-gap: 24px;
    }

    .sidebarNav:not(.sideMenuClose) ~ .accountPage .blueprintVersion {
        padding-left: 0;
    }

    .sidebarNav:not(.sideMenuClose) ~ .accountPage .switchText {
        margin-left: 0;
        margin-top: 32px;
    }

    .sidebarNav:not(.sideMenuClose) ~ .accountPage .switchText .swichLabel {
        top: -32px;
        left: 8px;
    }

    .sidebarNav:not(.sideMenuClose) ~ .accountPage .accountPersonalInfoWrap {
        flex-direction: column;
        row-gap: 8px;
    }

}

@media only screen and (max-width: 768px) {
    .accountColumnsWrap {
        grid-template-columns: 100%;
        row-gap: 24px;
    }

    .blueprintVersionWrap {
        justify-items: start;
    }

    .blueprintVersion {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .blueprintVersion .switchText {
        margin-top: 16px;
    }

    .switchText {
        margin-left: 0;
        margin-top: 32px;
    }

    .switchText .swichLabel {
        top: -32px;
        left: 8px;
    }

    .accountPersonalInfoWrap {
        flex-direction: column;
        row-gap: 8px;
    }

    .accountPersonalInfo {
        max-width: 100%;
    }

    .myAccountTab .accountEditArea {
        padding: 0;
    }

    .myAccountTab .profileNameEdit .inputWrap:first-child,
    .myAccountTab .profileNameEdit .inputWrap:last-child,
    .myAccountTab .profileNameEdit .inputWrap,
    .myAccountTab .profileContactEdit .inputWrap {
        width: 100%;
    }

}


.myAccountTab #accountCompanyInfo .accountEditArea {
    padding: 0 16px 0 0px;
}

.myAccountTab #accountCompanyInfo .profileNameEdit .inputWrap:first-child,
.myAccountTab #accountCompanyInfo .profileNameEdit .inputWrap:last-child,
.myAccountTab #accountCompanyInfo .profileNameEdit .inputWrap,
.myAccountTab .profileAddressEdit .inputWrap:first-child,
.myAccountTab .profileAddressEdit .inputWrap:nth-child(2),
.myAccountTab .profileAddressEdit .inputWrap,
.myAccountTab .profileAddressEdit .inputWrap:last-child {
    width: calc(50% - 4px);
    padding: 0;
}

.myAccountTab #accountCompanyInfo .profileNameEdit .inputWrap:nth-child(3) {
    width: 100%;
}

.myAccountTab .profileAddressEdit {
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 12px;
}

@media only screen and (max-width: 768px) {
    .myAccountTab #accountCompanyInfo .accountEditArea {
        padding: 0;
    }

    .myAccountTab #accountCompanyInfo .profileNameEdit .inputWrap:first-child,
    .myAccountTab #accountCompanyInfo .profileNameEdit .inputWrap:last-child,
    .myAccountTab #accountCompanyInfo .profileNameEdit .inputWrap,
    .myAccountTab .profileAddressEdit .inputWrap:first-child,
    .myAccountTab .profileAddressEdit .inputWrap:nth-child(2),
    .myAccountTab .profileAddressEdit .inputWrap,
    .myAccountTab .profileAddressEdit .inputWrap:last-child {
        width: 100%;
        padding: 0;
    }
}

.emailPreferencesTab .accountContent {
    padding-top: 13px;
}

.accountSubText {
    line-height: 24px;
    color: var(--secondary-text-color);
    width: 75%;
    padding-top: 12px;
}

.emailPreferencesTab .accountWrap {
    column-gap: 16px;
    grid-template-columns: max-content 1fr;
    padding-top: 3px;
}

.emailPreferencesTab .accountEditArea .accountWrap form {
    grid-template-columns: max-content 1fr;
    display: grid;
    column-gap: 20px;
    row-gap: 11px;

}

.emailPreferencesTab .accountEditArea .accountBtnWrap {
    padding-top: 8px;
}

@media only screen and (max-width: 768px) {
    .accountSubText {
        width: 100%;
    }

    .emailPreferencesTab .accountWrap {
        grid-template-columns: 1fr;
    }

    .emailPreferencesTab .accountEditArea .accountWrap form {
        grid-template-columns: 1fr;
        row-gap: 13px;
    }

    .emailPreferencesTab .accountEditArea .accountWrap {
        grid-template-columns: 1fr;
    }
}

.accountPasswordTab .accountColumnsWrap {
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
    align-items: start;
    padding-top: 19px;
}

.accountEditArea .control-label {
    color: var(--main-text-color);
}

.accountPasswordTab .accountContent {
    padding-right: 8px !important;
}

.hiddenPassword {
    line-height: 16px;
    color: var(--secondary-text-color);
}

.accountPasswordTab .accountBtnWrap {
    padding-top: 10px;
}

.accountEmail {
    line-height: 16px;
}

.accountPasswordTab .accountEditArea {
    padding-right: 80px;
}

.passwordEditWrap {
    width: 100%;
    row-gap: 12px;
}

.passwordEditWrap .inputWrap {
    width: 100%;
}

@media only screen and (max-width: 1024px) {
    .sidebarNav:not(.sideMenuClose) ~ .accountPage .accountPasswordTab .accountEditArea {
        padding-right: 0;
    }

}


@media only screen and (max-width: 768px) {
    .accountPasswordTab .accountColumnsWrap {
        grid-template-columns: 1fr;
    }

    .accountPasswordTab .accountEditArea {
        padding-right: 0;
    }
}

.accountHeadingWrap {
    align-items: flex-end;
}


.accountDiscussionsTab .itemsWrap {
    padding: 0 15px 16px 24px;
}

.accountDiscussionsTab .filtersWrap {
    padding-top: 6px;
}

.filtersWrap .accountDiscussionsFiltersWrap {
    padding: 0px 0 14px 0px;
    justify-content: flex-start;
    column-gap: 32px;
}

.accountFilterItemWrap {
    align-items: center;
    column-gap: 8px;
}

.accountFilterName {
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    line-height: 19px;
    width: 130px;
    text-align: left;
}

.accountDiscussionBtnWrap {
    justify-content: flex-start;
    column-gap: 8px;
    width: 88px;
}

.accountFilterItemWrap.active .accountFilterName {
    color: var(--button-active-color);
}

.accountFilterItemWrap.active > svg path {
    fill: var(--button-active-color);
}

.accountFilterItemWrap.active > svg.stroke path,
.accountFilterItemWrap.active > svg.stroke circle {
    stroke: var(--button-active-color);
    fill: none;
}

.accountDiscussionBtn {
    height: 40px;
    width: 40px;
    position: relative;
    cursor: pointer;
}

.accountDiscussionBtnBadge {
    position: absolute;
    top: -4px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--button-text-color);
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 16px;
    text-align: center;
}

.accountDiscussionBtn svg {
    pointer-events: none;
}

.accountDiscussionBtn.active path,
.accountDiscussionBtn:active path,
.accountDiscussionBtn.active rect,
.accountDiscussionBtn:active rect {
    fill: var(--button-active-color);
    stroke: var(--button-text-color);
}

.accountDiscussionBtn.active rect + path,
.accountDiscussionBtn:active rect + path {
    fill: var(--button-text-color);
    stroke: none;
}

@media (hover: hover) {
    .accountDiscussionBtn:hover path,
    .accountDiscussionBtn.active:hover path,
    .accountDiscussionBtn:hover rect,
    .accountDiscussionBtn.active:hover rect {
        fill: var(--button-active-color);
        stroke: var(--button-text-color);
    }

    .accountDiscussionBtn.active:hover rect + path,
    .accountDiscussionBtn:hover rect + path {
        fill: var(--button-text-color);
        stroke: none;
    }
}


@media only screen and (max-width: 1024px) {

    .filtersWrap .accountFilterItemWrap,
    .filtersWrap .accountDiscussionBtnWrap {
        flex-direction: row;
    }
}

.accountDiscussionsTab #posts-with-comments .discussionsPostWrap {
    padding: 16px;
}

.accountDiscussionsTab .commentWrapInner {
    background: var(--manual-bg);
    border-radius: var(--border-radius-lg);
    margin-top: 8px;
    padding: 8px;
    width: calc(100%);
}

.accountDiscussionsTab .commentUserWrap {
    padding-top: 0;
}

.accountDiscussionsTab .commentTextWrap {
    width: calc(100%);
}

.accountDiscussionsTab .commentWrapInner .discussionsPostTextWarp {
    padding-top: 8px;
    width: calc(100%);
}

.accountDiscussionsTab .commentWrapInner .discussionsPostTextWarp p:first-child {
    margin-top: 0;
    margin-bottom: 0;
    display: block;
}

.accountDiscussionsTab .commentWrapInner .discussionsPostText p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
    display: none;
}

.accountDiscussionsTab .commentWrapInner .discussionsPostText {
    display: block;
    max-height: 100%;
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
    padding-left: 64px;
}

.accountDiscussionsTab .commentWrapInner .discussionsPostControlsWrap {
    justify-content: flex-start;
    padding-left: 64px;
    padding-top: 9px;
}


@media only screen and (max-width: 768px) {
    .accountDiscussionsTab .itemsWrap {
        max-height: 100%;
        padding: 0 8px 8px 16px;
    }
}


/* ==========================================================================
              STATEGIC ADVANTAGE PAGE
             ========================================================================== */

.strategicPage .strategicHeading,
.effectivenessPage .effectivenessHeading {
    width: 100%;
}

.videoTutorialLink {
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
    padding-right: 0;
    cursor: pointer;
}

.videoTutorialLink svg,
.videoTutorialLink span {
    pointer-events: none;
}

.videoTutorialTextLink {
    font-weight: 700;
    font-size: var(--small-text-font-size);
    line-height: 14px;
    text-decoration: underline;
    white-space: nowrap;
    color: var(--button-active-color);
}

.videoWrap {
    display: none;
}

.active .videoWrap {
    display: block;
}

.strategicFilters,
.effectivenessFilters {
    width: 100%;
    max-width: 910px;
    padding: 7px 0 0 40px;
}

.strategicContent,
.effectivenessContent,
.visionContent,
.performanceContent {
    height: 100%;
    overflow-y: auto;
    align-items: stretch;
    row-gap: 16px;
    padding: 0px 24px;
}

.effectivenessContent {
    padding: 0px 24px 16px;
}

.groupsWrap {
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    padding: 0 0 16px;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}

.groupsControls {
    row-gap: 8px;
}

.groupItem, .kpiGroupItem {
    width: 200px;
    min-width: 200px;
    height: 79px;
    padding: 8px;
    border: 1px solid var(--button-text-color);
    cursor: pointer;
}

.kpiGroupItem {
    height: auto;
    min-height: 80px;
}

.kpiPage .kpiGroupItem > .containerColumn:first-child {
    width: calc(100% - 24px);
    position: relative;
}

.groupItem.active {
    border: 1px solid var(--button-active-color);
}

.groupItem.active .groupTitle {
    color: var(--button-active-color);
}

.groupItemControls {
    row-gap: 8px;
}

.groupVisibility {
    height: 24px;
    justify-content: flex-start;
}

.groupVisibility > div {
    height: 24px;
}

.groupTitle {
    padding: 3px 0 0 7px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 1.6em;
    overflow: hidden;
    max-width: calc(100%);
    min-height: 37px;
}

#groupSmallViewModal .groupTitle {
    min-height: 0;
}

.newGroupPopup,
.sortGroupPopup {
    padding: 0 8px 32px;
}

.newGroupPopup .popupInner,
.sortGroupPopup .popupInner {
    max-height: calc(100vh - 162px - 110px);
    padding: 0 8px;
    overflow-y: auto;
}

.newGroupPopup .popupHeading,
.sortGroupPopup .popupHeading {
    padding: 29px 0 24px;
}

.newGroupPopup .formWrap {
    width: 100%;
    max-width: 400px;
    row-gap: 12px;
    padding: 8px 0 32px;
}

.newGroupPopup .formWrap .inputWrap {
    width: 100%;
}

@media (hover: hover) {
    .groupModalContent .btn-icon:hover path {
        fill: var(--button-text-color);
    }
}

.newGroupPopup .btn-icon:active path {
    fill: var(--button-text-color);
}

.sortGroupPopup {
    max-width: 544px;
}

.sortGroupPopup .popupInner {
    max-height: calc(100vh - 162px - 142px);
}

.moveableList {
    row-gap: 8px;
    width: 100%;
    padding: 8px 0 16px;
    align-items: stretch;
}

.moveableList li {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    padding: 8px;
    cursor: pointer;
    border: 1px solid var(--button-text-color);
}

.moveableList li.active {
    border: 1px solid var(--button-active-color);
}

.moveableList .groupTitle {
    flex-grow: 1;
    padding: 0;
    text-align: left;
}

.itemControlSort {
    height: 24px;
    cursor: move !important;
}

.popupBtnWrap {
    justify-content: center;
    padding-top: 24px;
}

@media (hover: hover) {
    .itemControlSort:hover path {
        fill: var(--button-hover-color);
    }
}

.itemControlSort:active path {
    fill: var(--button-active-color);
}

.itemControlSort svg {
    pointer-events: none;
}

.sortGroupPopup .popupBtnWrap {
    width: 100%;
    justify-content: center;
    padding-top: 16px;
}

.groupDetailTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 31px;
}

.groupDetailWrap {
    padding: 16px;
    align-items: stretch;
    row-gap: 23px;
}

.groupDetailInner {
    column-gap: 16px;
}

.groupDetailColumn {
    width: calc(50% - 8px);
}

.groupDetailSubTitle {
    line-height: 24px;
}

.groupDetailProps {
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 8px;
    width: calc(90%);
    padding-top: 14px;
}

.groupDetailPropsSort {
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 8px;
    width: calc(100%);
}

.groupDetailProps .inputWrap {
    width: 100%;
    position: relative;
}

.groupDetailProps .addPropBtn {
    position: absolute;
    bottom: 13px;
    right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.groupDetailProps .mb-3 {
    margin-bottom: 0 !important;
}

@media (hover: hover) {
    .groupDetailProps .addPropBtn:hover path {
        fill: var(--button-hover-color);
    }
}

.groupDetailProps .addPropBtn:active path {
    fill: var(--button-active-color);
}

.groupProp {
    position: relative;
    border-radius: 6px;
    padding: 12px 15px 12px 15px;
    font-style: normal;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: var(--category-color);
    background: var(--category-bg);
    border: none;
    width: calc(100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 8px;
}

.groupProp.list-group-item:last-child,
.groupProp.list-group-item:first-child {
    border-radius: 6px;
}

.groupProp span {
    flex-grow: 1;
}

.closeProp {
    width: 16px;
    height: 16px;
    background-image: url(../../images/pages/close-category-button.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
    cursor: pointer;
}

.groupProp .itemControlSort path {
    fill: white;
}

.groupDetailWrap:not(.groupDetailPropsWrap) {
    row-gap: 12px;
}

.grourTextareasWrap {
    flex-wrap: wrap;
    column-gap: 16px;
}

.grourTextareasWrap .groupTextareaInner {
    width: calc(50% - 16px * 1 / 2);
}

.groupTextareaInner {
    width: 100%;
    align-items: stretch;
}

.grourTextareasWrap .groupTextareaInner label {
    min-height: 32px;
    align-items: flex-end;
}

.groupTextareaInner textarea,
.groupTextareaInner textarea:active,
.groupTextareaInner textarea:focus,
.groupTextareaInner textarea:focus-visible {
    background: var(--textarea-bg);
    border-radius: 6px;
    border: none;
    height: 120px;
    padding: 6px 24px 8px 16px;
    overflow-y: auto;
}

.addProp .longLabel {
    padding-left: 0;
}

@media (hover: hover) {
    .groupTextareaInner textarea:hover {
        background: var(--textarea-bg);
        border-radius: 6px;
        border: none;
    }
}

.groupTextareaInner textarea:active {
    background: var(--textarea-bg);
    border-radius: 6px;
    border: none;
}

.groupModalContent .modal-header .modal-title {
    padding-bottom: 24px;
}

@media only screen and (max-width: 1024px) {

    .strategicPage .pageHeading,
    .effectivenessPage .pageHeading,
    .financialPerformancePage .pageHeading,
    .kpiPage .pageHeading,
    .mmHeading .pageHeading,
    .swotPage .pageHeading {
        width: calc(100% - 172px - 8px);
    }

    .strategicFilters .filtersScroll .inputWrap,
    .effectivenessFilters .filtersScroll .inputWrap {
        width: 100%;
    }

    .groupDetailProps {
        width: 100%;
    }

    .grourTextareasWrap .groupTextareaInner {
        width: calc(50% - 16px * 1 / 2);
    }
}

@media only screen and (max-width: 768px) {

    .strategicPage .pageHeading,
    .effectivenessPage .pageHeading,
    .visionPage .pageHeading,
    .financialPerformancePage .pageHeading,
    .mmHeading .pageHeading,
    .swotPage .pageHeading {
        width: calc(100% - 32px - 32px - 12px);
    }

    .strategicFilters .filtersScroll .inputWrap,
    .effectivenessFilters .filtersScroll .inputWrap {
        width: 100%;
    }

    .videoTutorialLink {
        padding-right: 0;
    }

    .videoTutorialTextLink {
        display: none;
    }

    .videoTutorialPopup.active {
        padding-top: 40px;
    }

    .groupsBlock {
        padding-right: 0;
    }

    .sortGroupPopup .popupInner {
        max-height: calc(100vh - 243px);
    }

    .groupModalContent .popupBtnWrap,
    .sortGroupPopup .popupBtnWrap {
        flex-wrap: wrap;
        row-gap: 8px;
        justify-content: center;
    }

    .sortGroupPopup {
        max-width: 100%;
    }

    .moveableList {
        max-width: 100%;
    }

    .strategicContent,
    .effectivenessContent,
    .visionContent {
        padding: 0px 8px 0 16px !important;
    }

    .groupDetailWrap {
        padding: 16px 8px;
    }

    .groupDetailInner {
        flex-direction: column;
        row-gap: 16px;
    }

    .groupDetailColumn {
        width: calc(100%);
    }

    .grourTextareasWrap .groupTextareaInner {
        width: calc(100%);
    }

    .modal-dialog.groupModalContent {
        max-width: 100% !important;
        padding: 0 0;
    }

    .groupModalContent .popupInner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        height: auto !important;
    }
}

.groupModalContent .popupInner.scroll.containerColumn:not(.userMoreMenuWrap) {
    padding-bottom: 0;
}

@media (max-width: 480px) {

    .moveableList .itemControlSort {
        display: inline-block;
    }
}


/* ==========================================================================
              PERSONAL EFFECTIVENESS PAGE
             ========================================================================== */


.grourTextareasWrap .groupTextareaInner .wysiwyg {
    align-items: stretch;
}

.effectivenessContent .grourTextareasWrap .groupTextareaInner label {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
    margin-bottom: 9px;
}

.effectivenessContent .groupDetailWrap {
    row-gap: 16px;
}

.effectivenessContent .grourTextareasWrap .groupTextareaInner {
    width: calc(33.3% - 16px * 2 / 3);
}

.effectivenessContent .wysiwyg-toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
}

.effectivenessContent .grourTextareasWrap {
    row-gap: 8px;
}


.discGraphicWrap {
    column-gap: 8px;
    row-gap: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
    /*grid-template-columns: 280px 280px auto;*/

}

.discCircleGraph {
    flex-grow: 1;
}

.discGraphicItem {
    width: 280px;
}

.discGraphicItem:nth-child(3) {
    flex-grow: 1;
}


.discGraphicItem {
    padding: 16px;
    align-items: stretch;
}

.discGraphicImg {
    width: 100%;
}

.discGraphicImg img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.discGraphicTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 31px;
}

.discGraphicItem .vBarWrap {
    width: 100%;
    align-items: stretch;
    padding-top: 8px;
    padding-bottom: 32px;
}

.discGraphicItem .vbarTitle {
    text-align: center;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 24px;
}

.discGraphicItem .vbar {
    height: 240px;
    padding-left: 48px;
    padding-right: 32px;
    margin-top: 37px;
    margin-bottom: 16px;
    background: repeating-linear-gradient(to bottom, transparent, rgba(120, 116, 134, 0.2) 1px, transparent 1px, transparent 10%, rgba(120, 116, 134, 0.2) 1px);
}

.discGraphicItem .vbar .bar {
    width: 24px;
    border-radius: 6px;
}

.discGraphicItem .vbar::before {
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(120, 116, 134, 0.1);
}

.vbarAxesNames {
    top: -15px;
    bottom: -9px;
    left: -8px;
    background: var(--bg);
}

.discGraphicItem .vbar .bar::before {
    display: none;
}

.discGraphicItem .vbar .bar .axisName {
    position: absolute;
    bottom: -30px;
    left: calc(50% - 5px);
    width: 10px;
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    line-height: 24px;
    text-align: center;
}

.discGraphicItem .vbar .bar .graphNumber {
    position: absolute;
    top: -32px;
    left: calc(50% - 12px);
    width: 24px;
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 24px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.adaptedGraph .bar,
.naturalGraph .bar {
    background: #FF4C51;
}

.adaptedGraph .bar:nth-child(2),
.naturalGraph .bar:nth-child(2) {
    background: #FFB400;
}

.adaptedGraph .bar:nth-child(3),
.naturalGraph .bar:nth-child(3) {
    background: #2BCA92;
}

.adaptedGraph .bar:nth-child(4),
.naturalGraph .bar:nth-child(4) {
    background: #5451FB;
}

.motivatorsGraphWrap {
    align-items: stretch;
    padding: 16px;
}

@media only screen and (max-width: 1275px) {
    .effectivenessContent .wysiwyg-toolbar-list,
    .effectivenessContent .wysiwyg-toolbar-textAlign {
        padding-left: 0;
    }

    .effectivenessContent .wysiwyg-toolbar-fontStyle,
    .effectivenessContent .wysiwyg-toolbar-list,
    .effectivenessContent .wysiwyg-toolbar-textAlign {
        border-right: none;
    }

    .effectivenessContent .grourTextareasWrap .groupTextareaInner {
        width: 100%;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {

    .discGraphicItem .vbar {
        padding-left: 32px;
        padding-right: 8px;
    }
}

@media only screen and (max-width: 1024px) {
    .discGraphicWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        row-gap: 8px;
    }

    .discGraphicItem .vbar {
        padding-left: 40px;
        padding-right: 16px;
    }

    .discGraphicWrap .discGraphicItem {
        width: calc(100% / 3 - 16px / 3);
        align-items: center;
    }

    .discGraphicWrap .discGraphicItem .vBarWrap {
        max-width: 248px;
    }

    .discGraphicImg {
        width: 100%;
    }

    .discGraphicTitleWrap {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .effectivenessPage .breadcrumb {
        padding: 12px 16px 12px 0;
    }

}

@media only screen and (max-width: 500px) {
    .discGraphicWrap .discGraphicItem {
        width: calc(100%);
    }

}


.motivatorsGraphBg {
    width: 100%;
    position: relative;
    padding: 24px 0 40px;
    background: repeating-linear-gradient(to right, transparent, rgba(120, 116, 134, 0.2) 1px, transparent 1px, transparent 5%, rgba(120, 116, 134, 0.2) 1px);
}

.motivatorsGraph {
    padding: 16px 173px 24px 171px;
}

.motivatorsGraphPart {
    width: 50%;
    position: relative;
}

.motivatorsGraphBg::before {
    width: 1px;
    height: 100%;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(120, 116, 134, 0.1);
}

.hBarAxesNames {
    position: absolute;
    top: 0;
    left: -9px;
    right: -13px;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    background-color: #fff;
}

.hBarAxesNames.bottomNames {
    top: auto;
    bottom: -16px;
}

.motivatorsGraphRow {
    width: 100%;
}

.motivatorsGraphPartInner {
    align-items: stretch;
    row-gap: 16px;
    padding: 16px 0 0;
}

.motivatorsGraphItem {
    position: relative;
    height: 41px;
}

.behavioralGraph .motivatorsGraphItem {
    height: 51px;
}

.behavioralGraph .motivatorsGraphItemBar {
    border-radius: 0;
    height: 24px;

}

.motivatorsGraphRowTitle {
    font-weight: 700;
    font-size: var(--main-font-size);
    position: absolute;
    right: -61px;
    top: 0;
    width: 120px;
    text-align: center;
}

.motivatorsGraphTitleWrap {
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    left: -173px;
    bottom: -11px;
    column-gap: 12px;
    width: 150px;
}

.motivatorsGraphItemNumWrap {
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    position: relative;
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 32px;
    color: var(--secondary-text-color);
    text-align: center;
}

.behavioralGraph .motivatorsGraphItemNumWrap {
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    box-shadow: none;
    border-radius: 50%;
    position: relative;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 44px;
    color: var(--secondary-text-color);
    text-align: center;
}

.motivatorsGraphItemBarAmount,
.motivatorsGraphItemBarLetter {
    position: absolute;
    width: 16px;
    height: 16px;

    background: #77BFEF;
    border: 1px solid #77BFEF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 16px;
    color: #FEFEFE;

    bottom: -4px;
    right: -4px;
}

.behavioralGraph .motivatorsGraphItemBarAmount {
    font-size: var(--small-text-font-size);
    bottom: -14px;
    right: -9px;
    width: 32px;
    height: 31px;
}

.motivatorsGraphItemBarAmountText {
    position: absolute;
    top: 9px;
    left: 0;
    width: 100%;
    text-align: center;
}

.motivatorsGraphItemNumWrap text {
    text-align: center;
}


.motivatorsGraphItemBarLetter {
    background: #FFFFFF;
    border: none;
    color: #77BFEF;
    bottom: auto;
    top: -4px;
    right: auto;
    left: -4px;
}

.motivatorsGraphItemBar {
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(0deg, #77BFEF, #77BFEF), #109B6A;
    border-radius: 20px;
    height: 8px;
}

.rightPart .motivatorsGraphRowTitle {
    display: none;
}

.rightPart .motivatorsGraphTitleWrap {
    flex-direction: row-reverse;
    left: auto;
    right: -174px;
}

.rightPart .motivatorsGraphItemBarAmount {
    background: #2BCA92;
    border: 1px solid #2BCA92;
}

.rightPart .motivatorsGraphItemBarLetter {
    color: #2BCA92;
}

.rightPart .motivatorsGraphItemBar {
    right: auto;
    left: 1px;
    background: #2BCA92;
}


.behavioralGraph .motivatorsGraphRow:nth-child(2) {
    --row-color: #FF4C51;
}

.behavioralGraph .motivatorsGraphRow:nth-child(3) {
    --row-color: #FFB400;
}

.behavioralGraph .motivatorsGraphRow:nth-child(4) {
    --row-color: #2BCA92;
}

.behavioralGraph .motivatorsGraphRow:nth-child(5) {
    --row-color: #5451FB;
}

.behavioralGraph .motivatorsGraphRow {
    position: relative;
}

.behavioralArrow {
    position: absolute;
    bottom: -15px;
    height: 10px;
    left: 33%;
    right: 5%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.rtl-custom {
    flex-direction: row-reverse;
}

.ltr-custom.behavioralArrow span,
.rtl-custom.behavioralArrow span {
    height: 10px;
    width: 10%;
    position: relative;
    text-indent: 30px;
    height: 10px;
    background-color: var(--row-color);
    display: inline-block;
    zoom: 1;
    padding: 0;
    color: white;
    font-size: 18px;
    text-align: center;
    line-height: 10px;
    margin-left: 5.78px;
}

.ltr-custom.behavioralArrow span:first-child {
    margin-left: 0;
}

.ltr-custom.behavioralArrow span:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    border-top: 5px solid transparent;
    border-left: 6px solid white;
    border-bottom: 5px solid transparent;
    margin: 0 0px 0 0px;
    z-index: 2;
}

.ltr-custom.behavioralArrow span:last-child:after,
.ltr-custom.behavioralArrow span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -5.78px;
    border-top: 5px solid transparent;
    border-left: 6px solid var(--row-color);
    border-bottom: 5px solid transparent;
    margin: 0 0px 0 0px;
    z-index: 1;
}

.rtl-custom.behavioralArrow span:first-child {
    margin-right: 0;
}

.rtl-custom.behavioralArrow span:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    border-top: 5px solid transparent;
    border-right: 6px solid white;
    border-bottom: 5px solid transparent;
    margin: 0 0px 0 0px;
    z-index: 2;
}

.rtl-custom.behavioralArrow span:last-child:after,
.rtl-custom.behavioralArrow span:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: auto;
    left: -5.78px;
    border-top: 5px solid transparent;
    border-right: 6px solid var(--row-color);
    border-bottom: 5px solid transparent;
    margin: 0 0px 0 0px;
    z-index: 1;
}


.behavioralGraph .motivatorsGraphRow .motivatorsGraphItemBar {
    background: var(--row-color);
    opacity: 0.7;
    border-radius: 6px;
}

.behavioralGraph .motivatorsGraphRow .motivatorsGraphItemNumWrap.filled {
    background: var(--row-color);
    border: 2px solid var(--row-color);
    color: var(--button-text-color);
}

.behavioralGraph .motivatorsGraphRow .motivatorsGraphItemNumWrap {
    background: transparent;
    border: 2px dotted var(--row-color);
}

.behavioralGraph .motivatorsGraphRowTitle {
    right: -161px;
    width: 320px;
    text-align: center;
    text-transform: capitalize;
}

.behavioralGraph .motivatorsGraphItemBarAmount {
    background: none;
    border: none;
    box-shadow: none;
}

.five-pointed-star {
    --star-color: var(--main-text-color);
    color: var(--button-text-color);
    margin: 1em auto;
    font-size: 17px;
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid var(--star-color);
    border-left: 1em solid transparent;
    transform: rotate(35deg);
    top: -14px;
    left: -4px;
}

.five-pointed-star:before {
    border-bottom: 0.8em solid var(--star-color);
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -0.45em;
    left: -0.65em;
    display: block;
    content: "";
    transform: rotate(-35deg);
}

.five-pointed-star:after {
    position: absolute;
    display: block;
    top: 0.03em;
    left: -1.05em;
    width: 0;
    height: 0;
    border-right: 1em solid transparent;
    border-bottom: 0.7em solid var(--star-color);
    border-left: 1em solid transparent;
    transform: rotate(-70deg);
    content: "";
}

.starText {
    color: var(--button-text-color);
    font-weight: 700;
    font-size: 8px;
    line-height: 32px;
    text-align: center;
    position: relative;
    top: -52px;
    left: 4px;
}

.rightPart .motivatorsGraphGraphStarWrap {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
}

.leftPart .motivatorsGraphGraphStarWrap {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 0;
}

.rightPart .motivatorsGraphGraphStarWrap.visible:before {
    content: '';
    width: 15px;
    height: 14px;
    background: url('data:image/svg+xml,<svg width="15" height="14" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="white" stroke-width="0.2" d="M7.04894 0.92705C7.3483 0.00573921 8.6517 0.00573969 8.95106 0.92705L10.0206 4.21885C10.1545 4.63087 10.5385 4.90983 10.9717 4.90983H14.4329C15.4016 4.90983 15.8044 6.14945 15.0207 6.71885L12.2205 8.75329C11.87 9.00793 11.7234 9.4593 11.8572 9.87132L12.9268 13.1631C13.2261 14.0844 12.1717 14.8506 11.388 14.2812L8.58778 12.2467C8.2373 11.9921 7.7627 11.9921 7.41221 12.2467L4.61204 14.2812C3.82833 14.8506 2.77385 14.0844 3.0732 13.1631L4.14277 9.87132C4.27665 9.4593 4.12999 9.00793 3.7795 8.75329L0.979333 6.71885C0.195619 6.14945 0.598395 4.90983 1.56712 4.90983H5.02832C5.46154 4.90983 5.8455 4.63087 5.97937 4.21885L7.04894 0.92705Z" fill="%230A153C"></path></svg>');
    position: absolute;
    right: -6px;
    bottom: 5px;
}

.leftPart .motivatorsGraphGraphStarWrap.visible:before {
    content: '';
    width: 15px;
    height: 14px;
    background: url('data:image/svg+xml,<svg width="15" height="14" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path stroke="white" stroke-width="0.2" d="M7.04894 0.92705C7.3483 0.00573921 8.6517 0.00573969 8.95106 0.92705L10.0206 4.21885C10.1545 4.63087 10.5385 4.90983 10.9717 4.90983H14.4329C15.4016 4.90983 15.8044 6.14945 15.0207 6.71885L12.2205 8.75329C11.87 9.00793 11.7234 9.4593 11.8572 9.87132L12.9268 13.1631C13.2261 14.0844 12.1717 14.8506 11.388 14.2812L8.58778 12.2467C8.2373 11.9921 7.7627 11.9921 7.41221 12.2467L4.61204 14.2812C3.82833 14.8506 2.77385 14.0844 3.0732 13.1631L4.14277 9.87132C4.27665 9.4593 4.12999 9.00793 3.7795 8.75329L0.979333 6.71885C0.195619 6.14945 0.598395 4.90983 1.56712 4.90983H5.02832C5.46154 4.90983 5.8455 4.63087 5.97937 4.21885L7.04894 0.92705Z" fill="%230A153C"></path></svg>');
    position: absolute;
    left: -6px;
    bottom: 5px;
}


@media only screen and (max-width: 1024px) {
    .motivatorsGraphWrap {
        padding: 16px 8px;
    }

    .motivatorsGraphWrap .groupDetailTitle {
        max-width: calc(100% - 41px);
    }

    .motivatorsGraph:not(.behavioralGraph) {
        padding: 16px 16px 24px 144px;
    }

    .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphBg {
        padding: 24px 0 0;
        background: repeating-linear-gradient(to right, transparent, rgba(120, 116, 134, 0.2) 1px, transparent 1px, transparent 20%, rgba(120, 116, 134, 0.2) 1px);
    }

    .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames {
        left: -3px;
        right: -11px;
        top: 1px;
    }

    .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames.topNames span:nth-child(-n+10),
    .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames.topNames span:nth-child(even) {
        display: none;
    }

    .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames.bottomNames {
        display: none;
    }

    .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphRow {
        flex-direction: column;
        padding: 8px 0 30px;
    }

    .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphPart {
        width: 100%;
    }

    .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphRowTitle {
        top: -8px;
        right: auto;
        left: -145px;
        width: 145px;
        text-align: left;
    }

    .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphTitleWrap {
        right: auto;
        left: -140px;
        width: 140px;
        flex-direction: row-reverse;
    }

    .motivatorsGraph:not(.behavioralGraph) .rightPart .motivatorsGraphTitleWrap {
        flex-direction: row-reverse;
        right: auto;
        left: -140px;
        width: 140px;
    }

    .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphPartInner {
        padding: 0;
    }

    .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphItemBar {
        right: auto;
        left: 0;
    }

    .behavioralGraph {
        padding: 16px 78px 24px 78px;
    }

    .behavioralGraph .motivatorsGraphTitleWrap {
        justify-content: center;
        align-items: flex-end;
        position: absolute;
        flex-direction: column;
        column-gap: 12px;
        width: 70px;
        left: -78px;
        bottom: -16px;
        line-height: 1.7;
    }

    .behavioralGraph .rightPart .motivatorsGraphTitleWrap {
        flex-direction: column;
        align-items: flex-start;
        left: calc(100% + 8px);
        right: auto;
        width: 70px;
    }

    .behavioralGraph .motivatorsGraphRow {
        margin-bottom: 24px;
    }


}

@media only screen and (max-width: 768px) {
    .behavioralGraph .motivatorsGraphItemNumWrap {
        width: 34px;
        height: 34px;
        font-size: 10px;
        line-height: 30px;
    }

    .behavioralGraph .motivatorsGraphTitleWrap {
        width: 50px;
        left: -58px;
        bottom: -16px;
        font-size: 10px;
        line-height: 1.7;
    }

    .behavioralGraph {
        padding: 16px 58px 24px 58px;
    }

    .behavioralGraph .rightPart .motivatorsGraphTitleWrap {
        width: 50px;
    }

    .behavioralGraph .motivatorsGraphRow {
        margin-bottom: 16px;
    }
}


/* ==========================================================================
              VISION PAGE
             ========================================================================== */

.visionTabs {
    padding-top: 29px;
}

.visionPage .contentWrap,
.swotPage .contentWrap {
    padding: 8px 8px 8px 0;
}

.visionColumnsWrap {
    display: grid;
    column-gap: 65px;
    grid-template-columns: 1fr minmax(288px, 36%);
}

.visionPage .groupDetailTitle,
.swotPage .groupDetailTitle {
    line-height: 28px;
}

.visionColumnsWrap .wysiwyg {
    align-items: stretch;
    height: 100%;
}

.groupTextareaInnerRows .visionColumnsWrap .wysiwyg {
    height: calc(50% - 8px);
}

.visionColumnsWrap .wysiwyg-wrapper {
    height: 100%;
}

.visionColumnsWrap .wysiwyg label {
    font-size: var(--main-font-size);
    line-height: 21px;
}

.visionGraphSwitch {
    justify-content: flex-end;
    column-gap: 8px;
    width: 100%;
}

.visionPage .discGraphicImg img,
.swotPage .discGraphicImg img {
    max-width: 100%;
}

.visionGraphSwitch .itemControlGroup .onlyIconBtn {
    height: 24px;
}

.visionGraphSwitch .itemControlGroup .onlyIconBtn svg {
    pointer-events: none;
}

.visionGraphSwitch .itemControlGroup .onlyIconBtnSecondary:active path:first-child,
.visionGraphSwitch .itemControlGroup .onlyIconBtnSecondary.active path:first-child {
    fill: var(--button-active-color);
}

@media (hover: hover) {

    .visionGraphSwitch .itemControlGroup .onlyIconBtnSecondary:hover path,
    .visionGraphSwitch .itemControlGroup .onlyIconBtnSecondary.active:hover path {
        fill: var(--button-text-color);
    }

    .visionGraphSwitch .itemControlGroup .onlyIconBtnSecondary:hover path:first-child,
    .visionGraphSwitch .itemControlGroup .onlyIconBtnSecondary.active:hover path:first-child {
        fill: var(--button-hover-color);
    }
}

[data-diagram-type] {
    display: none;
}

[data-diagram-type].active {
    display: flex;
}

.visionPage .groupDetailWrap,
.swotPage .groupDetailWrap {
    row-gap: 10px;
}

.visionPage .filtersScroll,
.effectivenessPage .filtersScroll,
.swotPage .filtersScroll {
    padding-right: 0;
}

.champagneMomentBlock {
    padding: 16px;
    align-items: stretch;
    row-gap: 16px;
}

.champagneMomentBlock .wysiwyg {
    row-gap: 8px;
    align-items: stretch;
}

.champagneYearWrap {
    align-items: center;
    padding-top: 16px;
}

.champagneYearBtnsWrap {
    width: calc(100% - 56px * 2);
    column-gap: 8px;
    row-gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.champagneYearWrap .champagneYearBtn {
    min-width: calc(100% / 5 - 8px * 4 / 5);
    margin-top: 0;
}

.champagneYearBtn.active {
    background: var(--button-active-color);
    color: var(--button-text-color);
}

@media only screen and (min-width: 1024px) {
    .visionPage .groupTextareaInner textarea,
    .swotPage .groupTextareaInner textarea {
        height: calc(100% - 32px - 16px);
    }
}

@media only screen and (max-width: 1024px) {
    .visionColumnsWrap {
        display: flex;
        row-gap: 16px;
        flex-direction: column;
        justify-content: flex-start;
        align-self: stretch;
    }

}

@media only screen and (max-width: 768px) {
    .groupTextareaInner .wysiwyg-toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .groupTextareaInner .wysiwyg-toolbar-list,
    .groupTextareaInner .wysiwyg-toolbar-textAlign,
    .champagneMomentTab .wysiwyg-toolbar-list,
    .champagneMomentTab .wysiwyg-toolbar-textAlign {
        padding-left: 0;
    }

    .groupTextareaInner .wysiwyg-toolbar-fontStyle,
    .groupTextareaInner .wysiwyg-toolbar-list,
    .groupTextareaInner .wysiwyg-toolbar-textAlign,
    .champagneMomentTab .wysiwyg-toolbar-fontStyle,
    .champagneMomentTab .wysiwyg-toolbar-list,
    .champagneMomentTab .wysiwyg-toolbar-textAlign {
        border: none;
    }

    .champagneMomentBlock {
        padding: 16px 8px;
    }

    .champagneYearBtnsWrap {
        justify-content: center;
    }
}

/* ==========================================================================
              VALUES PAGE
             ========================================================================== */

.valuesMainWrap {
    padding: 8px 8px 16px 16px;
    column-gap: 32px;
}

.valuesContentInner {
    height: 100%;
    overflow-y: auto;
    align-items: stretch;
    row-gap: 16px;
    padding: 0px 24px 16px;
}

.valueColumn:first-child {
    width: 100%;
    max-width: 408px;
    position: relative;
    align-items: stretch;
}

.valueColumn:first-child.collapsed {
    max-width: 200px;
    overflow-x: hidden;
}

.valueColumn:not(:first-child) {
    flex-grow: 1;
    row-gap: 16px;
}

.iconControlWrap {
    position: absolute;
    top: 6px;
    right: 0;
    column-gap: 8px;
}

.itemControlCollapse.collapsed {
    transform: rotate(180deg);
}

.valueVeryImportantColumn,
.valueImportantColumn {
    width: calc(50% - 4px);
    min-width: calc(50.1% - 4px);
}

.collapsed .valueVeryImportantColumn,
.collapsed .valueImportantColumn {
    width: 100%;
    min-width: 100%;
}

.valueImportantColumn {
    --background-color: #3BA1DF;
    --text-color: #3BA1DF;
}

.valueVeryImportantColumn {
    --background-color: #A02F1F;
    --text-color: #A02F1F;
}

.valueImportantTitle,
.valueVeryImportantTitle {
    color: var(--text-color);
    line-height: 30px;
}

.valueImportantList {
    align-items: stretch;
    padding-top: 16px;
    padding-bottom: 35px;
    min-height: 41px;
    width: 100%;
}

.valueItem {
    cursor: pointer;
    border-radius: 6px;
    background: var(--background-color);
    text-align: left;
    padding: 11px 15px 12px 16px;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 18px;
    color: #fff;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 8px;
    width: 100%;
    touch-action: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;

}

.valueItem span {
    pointer-events: none;
    flex-grow: 1;
}

.valueItem path {
    pointer-events: none;
}

.valueItem.dropdownOpen {
    position: relative;
    background: var(--button-hover-color);
}

.valueDropdown {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    color: var(--secondary-text-color);
    font-weight: 400;
    padding: 8px;
    max-width: 200px;
    position: absolute;
    top: calc(100% - 3px);
    left: 0;
    right: 0;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.valueDropdownItem {
    padding: 8px;
    width: 100%;
}

.valueVeryImportantColumn .valueItem,
.valueImportantColumn .valueItem {
    max-width: 200px;
}


.newValueWrap {
    align-items: stretch;
    padding-top: 6px;
    min-height: 556px;
}

.addValue {
    position: relative;
    margin-right: 16px;
}

.addValueBtn {
    position: absolute;
    top: 32px;
    right: 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: transparent;
}

@media (hover: hover) {
    .addValueBtn:hover path {
        fill: var(--button-hover-color);
    }
}

.addValueBtn:active path {
    fill: var(--button-active-color);
}

.valuesWrap {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100%;
    --background-color: #556784;
    align-items: stretch;
    row-gap: 8px;
}

.valuesWrap + .containerRow {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 8px;
    row-gap: 8px;
}

.customValuesWrap {
    padding-right: 8px;
    column-gap: 8px;
    row-gap: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    position: relative;
}

.customValuesWrap .valueItem {
    width: calc(100% / 3 - 8px * 2 / 3);
    margin-bottom: 0;
}

.personalValuesTab .customValuesWrap .valueItem {
    width: calc(100% / 4 - 8px * 3 / 4);
    margin-bottom: 0;
}

.defaultValuesWrap {
    padding-right: 8px;
    column-count: 3;
    column-gap: 8px;
    position: relative;
}

.closeValue {
    min-width: 16px;
    cursor: pointer;
}

.valuesMainWrap .close.js-remove-item {
    background: transparent;
    padding: 0;
}

.freePlace {
    background: transparent;
    border: 2px dashed var(--background-color);
    width: 100%;
    margin-bottom: 8px;
    border-radius: 6px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

.personalValuesTab .valueColumn:first-child {
    max-width: 200px;
}

.personalValuesTab .valueImportantColumn {
    width: 100%;
    min-width: 100%;
}

.personalValuesTab .customValuesWrap,
.personalValuesTab .defaultValuesWrap {
    column-count: 4;
}

.valuesContent .grourTextareasWrap {
    width: 100%;
}

.valuesContent .groupTextareaInner {
    padding: 16px;
}

.valuesContent .groupTextareaInner label {
    min-height: 0;
    align-items: center;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
    padding: 24px 0 6px 8px;
}

.openValuesBtn {
    display: none;
}

.valueItemDropBtn {
    display: none;
    touch-action: none;
    min-width: 24px;
    min-height: 24px;
}

@media only screen and (max-width: 1200px) {
    .defaultValuesWrap,
    .customValuesWrap,
    .personalValuesTab .customValuesWrap,
    .personalValuesTab .defaultValuesWrap {
        column-count: 2;
    }

    .customValuesWrap .valueItem {
        width: calc(100% / 2 - 8px * 1 / 2);
        margin-bottom: 0;
    }

    .personalValuesTab .customValuesWrap .valueItem {
        width: calc(100% / 3 - 8px * 2 / 3);
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 1024px) {
    .valuesMainWrap {
        flex-direction: column-reverse;
        padding: 8px 16px 16px 16px;
        align-items: stretch;
    }

    .valuesMainWrap .h3 {
        margin-bottom: 0;
    }

    .newValueWrap {
        max-height: 100% !important;
        min-height: 0;
    }

    .addValue {
        margin-right: 0px;
    }

    .valuesWrap {
        overflow-y: visible;
        display: none;
    }

    .defaultValuesWrap,
    .customValuesWrap {
        padding-right: 0;
    }

    .openValuesBtn {
        display: flex;
    }

    .valuesWrap + .openValuesBtn {
        display: none;
    }

    .valuesWrap.valuesOpen {
        display: flex;
    }

    .valuesWrap.valuesOpen + .openValuesBtn {
        display: flex;
    }

    .valueColumn:first-child {
        max-width: 100%;
        padding-top: 24px;
    }

    .personalValuesTab .valueColumn:first-child {
        max-width: 100%;
    }

    .iconControlWrap {
        top: 30px;
    }

    .valueColumn:first-child.collapsed {
        max-width: 100%;
        overflow: visible;
    }

    .collapsed .valueVeryImportantColumn, .collapsed .valueImportantColumn {
        width: calc(50% - 4px);
        min-width: calc(50.1% - 4px);
    }

    .itemControlCollapse {
        display: none;
    }

    .valueVeryImportantColumn .valueItem, .valueImportantColumn .valueItem {
        max-width: 100%;
    }

    .valuesContent .grourTextareasWrap {
        flex-direction: column;
        row-gap: 8px;
    }

    .valuesContent .grourTextareasWrap .groupTextareaInner {
        width: 100%;
        padding: 16px 8px 8px 8px;
    }

    .valueItem {
        touch-action: auto;
    }

    .valueItem span {
        flex-grow: 1;
    }

    .valueItemDropBtn {
        display: block;
    }
}

@media only screen and (max-width: 768px) {
    .valuesContentInner {
        padding: 0px 8px 16px 16px !important;
    }

    .valuesMainWrap {
        padding: 8px 8px 16px 8px;
    }

    .customValuesWrap .valueItem {
        width: 100%;
    }

    .personalValuesTab .customValuesWrap .valueItem {
        width: 100%;
    }

    .valueColumn:first-child {
        flex-direction: column;
        padding-top: 0;
    }

    .valueVeryImportantColumn, .valueImportantColumn {
        width: 100%;
        padding-top: 24px;
    }

    .defaultValuesWrap,
    .customValuesWrap,
    .personalValuesTab .customValuesWrap,
    .personalValuesTab .defaultValuesWrap {
        column-count: 1;
    }
}

.wysiwyg {
    flex-direction: column;
    row-gap: 0;
}


.valuesTableWrap {
    align-items: stretch;
    padding: 16px;
}

.valuesTableWrap .tableValue {
    height: 57px;
}

.valuesTableWrap .tableValue:not(.dropdownValue),
.blueprintReportBlockContent .tableValue.textAreaValue {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 16px;
    word-break: break-word;
}

.blueprintReportBlockContent .tableValue.textAreaValue,
.blueprintReportBlockContent .tableValue.dropdownValue {
    height: 100%;
}

.valuesTableDescriptionWrap {
    align-items: flex-end;
    column-gap: 8px;
    padding: 8px 0 8px 8px;
}

.valuesTableDescriptionWrap .onlyIconBtn {
    height: 24px;
}

.valuesTableLegend {
    display: none;
    justify-content: flex-start;
    column-gap: 16px;
    padding-top: 16px;
    padding-left: 8px;
}

.legendColumn {
    row-gap: 8px;
}

.legendItem {
    column-gap: 8px;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
}

.valuesTableInnerWrap {
    column-gap: 8px;
    align-items: flex-start;
}

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

.selectColumnsWrap {
    position: relative;
    height: 32px;
    align-items: flex-start;
}

.selectColumnsBtn {
    height: 24px;
}

.selectColumnsDropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-lg);
    z-index: 2;
}

.selectColumnsDropdown .checkboxWrap {
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 16px;
    padding: 16px;
    color: var(--secondary-text-color);
    white-space: nowrap;
}

.checkbox.path input:disabled {
    --b: var(--button-disabled-color);
    background: var(--button-disabled-color);
}

.selectColumnsDropdown.open {
    display: flex;
}

.valuesTableDescription {
    font-weight: 500;
    flex-grow: 1;
}

/*.table {*/
/*    display: grid;*/
/*}*/

.tableRow {
    display: grid;
    grid-template-columns: 320px repeat(auto-fit, minmax(calc((100% - 320px) / 4), 1fr));
    align-items: center;
}

.tableRow:nth-child(2) > div {
    min-height: 52px;
    padding: 8px 4px 4px;
}

.tableRow:nth-child(2) > div:nth-child(2) {
    padding: 8px 4px 4px 8px;
}

.tableRow > div {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 4px;
    height: 100%;
}

.tableRow > div.hiddenRate {
    color: var(--triple-text-color);
}

.tableRow.tableHeader > div {
    background: #3B68E0;
    padding-left: 8px;
    min-height: 40px;
}

.tableRow.tableHeader > div svg {
    display: none;
}

.tableRow.tableHeader > div:first-child {
    border-top-left-radius: 6px;
    background: #3B68E0;
}

.tableRow.tableHeader > div:nth-child(2) {
    padding-left: 16px;
}

.tableHeader > div:last-child {
    border-top-right-radius: 6px;
    border: none;
}

.tableRow > div:first-child {
    background: var(--main-text-color);
    padding-left: 16px;
    height: 100%;
}

.tableRow > div:last-child {
    border-right: 1px solid rgba(162, 168, 184, 0.5);
}

.tableRow:last-child > div {
    border-bottom: 1px solid rgba(162, 168, 184, 0.5);
}

.tableRow:last-child > div:first-child {
    border-bottom-left-radius: 6px;
}

.tableRow:last-child > div:last-child {
    border-bottom-right-radius: 6px;
}

.mobileRowTitle {
    display: none;
}

.tableValue {
    background: var(--textarea-bg) !important;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 6px;
    position: relative;
    padding: 8px 8px 8px 8px;
    column-gap: 8px;
    cursor: pointer;
}

.tableValue.hiddenRate[data-selected-value] {
    color: var(--triple-text-color);
}

.tableValue.hiddenRate[data-selected-value].hasValue::before {
    background: var(--triple-text-color);
}

.tableValue span {
    flex-grow: 1;
}

.tableValue > svg {
    display: none;
}

.tableIcon {
    display: none;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.tableValueDropdown {
    display: none;
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-lg);
    position: absolute;
    z-index: 2;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    min-width: 122px;
    padding: 8px;
}

.tableRow:nth-last-child(-n+4) .tableValueDropdown {
    bottom: calc(100% + 5px);
    top: auto;
}

.tableValue.open .tableValueDropdown {
    display: flex;
}

.tableValue.selected {
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
}

.tableValue.selected > svg {
    display: block;
    transform: rotate(180deg);
}

.tableValue.open > svg {
    display: block;
    transform: rotate(0);
}


.tableValueDropdown .tableValue {
    background: inherit;
}

.tableValueDropdown .tableValue.active {
    background: var(--button-active-color);
    color: var(--button-text-color);
}

@media (hover: hover) {
    .dropdownValueRateValue:hover {
        background: var(--button-hover-color);
        color: var(--button-text-color);
    }
}


.tableValue.dropdownValue::before {
    content: '';
    width: 8px;
    min-width: 8px;
    height: 24px;
    border-radius: 10px;
}

.tableValue.textAreaValue {
    color: #000;
    align-items: flex-start;
}

.tableValue.textAreaValue.hiddenRate {
    color: #c8c8c8;
}

.tableValue[data-value="4"],
.tableValue[data-selected-value="4"] {
    color: #419195;
}

.readonlyIcon {
    width: 20px;
    height: auto;
    padding-left: 5px;
    display: none;
}

.readonlyIcon.active {
    display: inline-block;
}

.tableValue[data-value="4"]::before,
.tableValue[data-selected-value="4"]::before {
    background: #419195;
}

.dropdownValueRateValue[data-value="4"]::before {
    background: #419195;
}

.dropdownValueRateValue[data-value="4"] {
    color: #419195;
}

.tableValue[data-value="5"],
.tableValue[data-selected-value="5"] {
    color: #4DB990;
}

.tableValue[data-value="5"]::before,
.tableValue[data-selected-value="5"]::before {
    background: #4DB990;
}

.dropdownValueRateValue[data-value="5"]::before {
    background: #4DB990;
}

.dropdownValueRateValue[data-value="5"] {
    color: #4DB990;
}

.tableValue[data-value="3"],
.tableValue[data-selected-value="3"] {
    color: #E39E37;
}

.tableValue[data-value="3"]::before,
.tableValue[data-selected-value="3"]::before {
    background: #E39E37;
}

.dropdownValueRateValue[data-value="3"]::before {
    background: #E39E37;
}

.dropdownValueRateValue[data-value="3"] {
    color: #E39E37;
}

.tableValue[data-value="2"],
.tableValue[data-selected-value="2"] {
    color: #BE6B27;
}

.tableValue[data-value="2"]::before,
.tableValue[data-selected-value="2"]::before {
    background: #BE6B27;
}

.dropdownValueRateValue[data-value="2"]::before {
    background: #BE6B27;
}

.dropdownValueRateValue[data-value="2"] {
    color: #BE6B27;
}

.tableValue[data-value="1"],
.tableValue[data-selected-value="1"] {
    color: #A02F1F;
}

.tableValue[data-value="1"]::before,
.tableValue[data-selected-value="1"]::before {
    background: #A02F1F;
}

.dropdownValueRateValue[data-value="1"]::before {
    background: #A02F1F;
}

.dropdownValueRateValue[data-value="1"] {
    color: #A02F1F;
}

.tableValue[data-column="5"] {
    color: var(--main-text-color);
}


.dropdownValueRateValue::before {
    content: '';
    width: 8px;
    min-width: 8px;
    height: 24px;
    border-radius: 10px;
}

.dropdownValueRateValue:hover {
    background: var(--button-hover-color) !important;
    color: var(--button-text-color) !important;
}

.dropdownValueRateValue.active {
    background: var(--button-active-color) !important;
    color: var(--button-text-color) !important;
}

.textareasTable {
    padding-top: 16px;
}

.textareasTable .tableRow {
    grid-template-columns: 168px repeat(auto-fit, minmax(calc((100% - 168px) / 6), 1fr));
}

.textareasTable .tableRow.tableHeader > div {
    min-height: 56px;
}

.textareasTable .tableRow:nth-child(2) > div {
    min-height: 92px;
}

.textareasTable .tableRow > div {
    min-height: 88px;
}

.textareasTable .tableValue {
    height: 100%;
    min-height: 80px;
    color: var(--secondary-text-color);
    padding: 0px;
    font-weight: 400;
    line-height: 24px;
    align-items: flex-start;
    max-height: 200px;
}

.blueprintReportBlockContent .textareasTable .tableValue {
    max-height: 100%;
    column-gap: 4px;
}

.textareasTable .tableValue::before {
    display: none;
}

.textareasTable .tableValue.edit {
    padding: 0;
}

.textareasTable textarea {
    display: none;
}

.textareasTable textarea {
    padding: 8px 8px 0px 16px;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    height: 100%;
    min-height: 80px;
    overflow: auto;
}

.valueTable textarea {
    display: none;
}

.tableValue.textAreaValue.selected textarea {
    display: block;
}

.tableValue.textAreaValue.selected span {
    display: none;
}

.valueTable textarea {
    font-weight: 400;
    font-size: var(--main-font-size);
    height: 100%;
    min-height: 30px;
    overflow: auto;
}

.textareasTable span {
    word-break: break-word;
    max-width: 100%;
    pointer-events: none;
}

.textareasTable .tableRow > div.mobileCellTitle {
    display: none;
}

.companyValuesTab .textAreaValue.selected {
    padding: 0;
}

.companyValuesTab .textAreaValue.selected textarea {
    padding: 4px 7px 0px 6px;
    border: 1px solid var(--triple-text-color);
    resize: none;
}

.valuesContentInner .mobileRowTitle {
    display: none;
}

.personalValuesTab .textareasTable .tableValue:not(.selected) {
    padding: 4px 8px;
}

@media only screen and (max-width: 1024px) {

    .valuesContentInner .mobileRowTitle {
        display: block;
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-right: 1px solid rgba(162, 168, 184, 0.5);
        font-weight: 500;
        font-size: var(--main-font-size);
        line-height: 16px;
        padding-left: 8px;
        padding-top: 8px;
    }
}

@media only screen and (max-width: 1024px) {
    .tableHeader > div:nth-child(2) {
        border-top-left-radius: 6px;
    }

    .mobileRowTitle {
        display: block;
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-right: 1px solid rgba(162, 168, 184, 0.5);
        font-weight: 500;
        font-size: var(--main-font-size);
        line-height: 16px;
        padding-left: 8px;
        padding-top: 8px;
    }

    .tableRow > div:first-child {
        padding: 0;
        overflow: hidden;
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        background: transparent;
        line-height: 0;
    }

    .tableRow:last-child > div:nth-child(2) {
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-bottom-left-radius: 6px;
    }

    .tableRow:last-child > div:first-child {
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-bottom-left-radius: 6px;
    }

    .tableHeader > div:first-child {
        border: none;
    }

    .tableRow {
        display: grid;
        grid-template-columns: 0 repeat(auto-fit, minmax(calc((100%) / 4), 1fr));
        align-items: center;
    }

    .textareasTable .tableRow {
        grid-template-columns: 0 repeat(auto-fit, minmax(calc((100%) / 6), 1fr));
    }
}

@media only screen and (max-width: 768px) {
    .valuesTableWrap {
        padding: 16px 8px 8px 8px;
    }

    .valuesTableLegend {
        display: flex;
    }

    .tableRow.tableHeader > div {
        justify-content: center;
    }

    .tableRow.tableHeader > div svg {
        display: block;
        padding: 0;
    }

    .tableRow.tableHeader > div svg path {
        stroke: white;
    }

    .tableRow.tableHeader > div span {
        display: none;
    }

    .tableIcon {
        display: flex;
    }

    .hidden .tableIcon path {
        fill: var(--button-disabled-color);
    }

    .tableValue span,
    .tableValueDropdown .tableValue svg {
        display: none;
    }

    .tableValueDropdown .tableValue span {
        display: block;
        text-align: left;
    }

    .tableValueDropdown .tableIcon {
        flex-grow: 0;
    }

    .tableRow > div > .tableValue::before {
        display: none;
    }

    .textareasTable .tableRow {
        grid-template-columns: repeat(1, 1fr);
    }

    .textareasTable .tableHeader {
        display: none;
    }

    .textareasTable .mobileRowTitle {
        border: none;
        font-weight: 500;
        font-size: var(--title-font-size-sm);
        line-height: 16px;
        padding-bottom: 24px;
        padding-left: 0;
    }

    .textareasTable .tableRow > div:first-child {
        display: none;
    }

    .textareasTable .tableRow > div:last-child {
        border: none;
    }

    .textareasTable .tableRow:last-child > div:nth-child(2),
    .textareasTable .tableRow:last-child > div {
        border: none;
    }

    .textareasTable .tableValue span {
        display: block;
    }

    .textareasTable .tableRow > div.mobileCellTitle {
        display: block;
        min-height: 0;
        color: var(--main-text-color);
        font-weight: 500;
        font-size: var(--main-font-size);
        line-height: 16px;
        padding-left: 8px;
    }

    .tableRow > .mobileCellTitle br {
        display: none;
    }
}

/* ==========================================================================
              YEAR END SEQUENCE PAGE
             ========================================================================== */


.yearEndTabs {
    padding-top: 32px;
}

.yearEndSequenceContent {
    height: 100%;
    overflow-y: auto;
    align-items: stretch;
    row-gap: 16px;
    padding: 0px 24px 26px;
}

.yearEndSequenceContent .itemBg {
    padding: 16px;
    width: 100%;
}

.yearEndSequenceContentTitle,
.yearEndSequenceContentTitle .text-info {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 29px;
    color: var(--main-text-color) !important;
}

.yearEndSequenceContentTitle.blue {
    color: #3264E8;
}

.yearEndSequenceContentDescription {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 14px;
    padding-left: 0;
    padding-bottom: 8px;
}

.annualPlanningTab .yearEndSequenceContentDescription {
    line-height: 19px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.annualPlanningTab .yearEndSequenceContentDescription.fullWidthTextareaDescription {
    padding-left: 0;
    padding-top: 12px;
    line-height: 16px;
    min-height: auto;
    padding-bottom: 0;
}

.reviewOfPastYearTab .yearEndSequenceTwoColumnsWrap .yearEndSequenceContentDescription,
.annualPlanningTab .yearEndSequenceTwoColumnsWrap .yearEndSequenceContentDescription {
    padding-left: 0;
    padding-bottom: 8px;
}

.reviewOfPastYearTab .yearEndSequenceContentDescription,
.annualPlanningTab .yearEndSequenceContentDescription {
    height: calc(100% - 128px);
    padding-bottom: 8px;
}

.reviewOfPastYearTab .yearEndSequenceContentDescription {
    line-height: 20px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 8px;
}

.annualPlanningTab .yearEndSequenceTwoColumnsWrap .yearEndSequenceContentDescription {
    height: calc(100% - 88px);
}

.yearEndSequenceColumnsWrap {
    align-self: stretch;
}

.yearEndSequenceTwoColumnsWrap,
.annualPlanningTab .yearEndSequenceColumnsWrap.yearEndSequenceTwoColumnsWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 16px;
}

.yearEndSequenceThreeColumnsWrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
    row-gap: 16px;
}

.yearEndSequenceTwoColumnsWrap .yearEndSequenceColumn, .yearEndSequenceThreeColumnsWrap .yearEndSequenceColumn {
    width: 100%;
}

.annualPlanningTab .yearEndSequenceColumnsWrap {
    padding-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
}

.yearEndSequenceColumn {
    width: calc(100% / 3 - 16px * 2 / 3);
    row-gap: 8px;
}

.annualPlanningTab .yearEndSequenceColumn {
    width: 100%;
}

.yearEndSequenceIconWrap {
    row-gap: 3px;
}

.yearEndSequenceContentStop {
    color: #C61F3C;
}

.yearEndSequenceContentStart {
    color: #7EC03D;
}

.yearEndSequenceContentContinue {
    color: #FFBE0D;
}

.yearEndSequenceContent textarea {
    background: var(--textarea-bg);
    border: none;
    resize: none;
    border-radius: 6px;
    max-height: 64px;
    min-height: 64px;
    height: 64px;
    max-width: 100%;
    overflow: auto;
    color: var(--secondary-text-color);
}

.yearEndSequenceContent .annualPlanningTab textarea {
    max-height: 128px;
    min-height: 128px;
    height: 128px;
    padding: 4px 27px 8px 8px;
    align-self: end;
}

.yearEndSequenceContent .yearEndSequenceTwoColumnsWrap textarea {
    max-height: 128px;
    min-height: 128px;
    height: 128px;
    align-self: end;
}

.yearEndSequenceContent .annualPlanningTab .yearEndSequenceTwoColumnsWrap textarea {
    max-height: 88px;
    min-height: 88px;
    height: 88px;
}

.annualPlanningTab textarea.fullWidthTextarea {
    max-height: 88px;
    min-height: 88px;
    height: 88px;
    margin-bottom: 16px;
}

.yearEndSequenceContent .horizontalDiagramWrap {
    width: calc(100% - 16px);
    max-width: 812px;
    padding-left: 16px;
    padding-bottom: 8px;
}

.yearEndSequenceContent .horizontalDiagramItemWrap {
    column-gap: 0;
}

.yearEndSequenceContent .horizontalDiagramItemTitle {
    width: 0;
}

.yearEndSequenceContent .horizontalDiagramPartsWrap {
    width: calc(100% - 16px - 8px);
    margin: 0 8px 0 16px;
}

.yearEndSequenceContent .horizontalDiagramItemWrap:first-child .horizontalDiagramPart.active {
    background: var(--menu-active-color);
    color: var(--menu-active-color);
}

.horizontalDiagramItemWrap:first-child .horizontalDiagramPart:not(.active).hovered {
    background: var(--menu-active-color);
    color: var(--menu-active-color);
}

.yearEndSequenceContent .textareasTable {
    width: 100%;
}

.yearEndSequenceContent .textareasTable .tableHeader {
    grid-template-columns: 168px repeat(3, minmax(calc((100% - 168px - 34%) / 3), 1fr)) 34%;
}

.yearEndSequenceContent .textareasTable .tableRow {
    grid-template-columns: 168px repeat(3, minmax(calc((100% - 168px - 34%) / 3), 1fr)) 34%;
}

.yearEndSequenceContent .textareasTable .tableRow:nth-child(3) > div {
    padding-top: 8px;
}

.yearEndSequenceContent .textareasTable .tableRow:last-child > div {
    padding-bottom: 8px;
}

.yearEndSequenceContent .textareasTable .tableRow.tableHeader > div {
    min-height: 40px;
    justify-content: center;
}

.yearEndSequenceContent .textareasTable input,
.yearEndSequenceContent .textareasTable span {
    padding: 7px 4px 4px 16px;
    font-weight: 400;
    font-size: var(--main-font-size-sm);
    line-height: 24px;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    overflow: auto;
    background: var(--textarea-bg);
    border-radius: 6px;
    box-sizing: border-box;
    border: none;
    width: 100%;
    color: var(--secondary-text-color);
}

.yearEndSequenceContent .textareasTable .tableValue {
    min-height: 40px;
    background: transparent;
    padding: 0;
}

.yearEndSequenceContent .textareasTable .tableRow > div {
    min-height: 40px;
}

.yearEndSequenceContent .textareasTable .tableRow > div:nth-child(3) {
    padding-left: 8px;
}

.yearEndSequenceContent .textareasTable .tableRow > div:last-child {
    padding-right: 8px;
}

.yearEndSequenceContent .checkbox label {
    --background: #fff;
    --border: #a2a8b8;
    --border-active: #83c29d;
    --border-hover: #83c29d;
    --tick: #fff;
    position: relative;
    display: flex;
    column-gap: 16px;
    cursor: pointer;
}

.yearEndSequenceContent .checkbox input,
.yearEndSequenceContent .checkbox svg {
    width: 24px;
    height: 24px;
    display: block;
}

.yearEndSequenceContent .checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    outline: none;
    background: var(--background);
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    transition: box-shadow 0.3s;
    box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));

}

@media (hover: hover) {
    .yearEndSequenceContent .checkbox input:hover {
        --s: 2px;
        --b: var(--border-hover);
    }
}

.yearEndSequenceContent .checkbox input:checked {
    --b: var(--border-active);
    background: var(--border-active);
}

.yearEndSequenceContent .checkbox svg {
    pointer-events: none;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--stroke, var(--tick));
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transform: scale(var(--scale, 1)) translateZ(0);
}

.yearEndSequenceContent .checkbox input:checked {
    --s: 2px;
    transition-delay: 0.4s;
}

.yearEndSequenceContent .checkbox input:checked + svg {
    --a: 16.1 86.12;
    --o: 102.22;
}

.yearEndSequenceContent .checkbox svg {
    stroke-dasharray: var(--a, 86.12);
    stroke-dashoffset: var(--o, 86.12);
    transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}

.yearEndSequenceContent .checkbox.bounce {
    --stroke: var(--tick);
}

.yearEndSequenceContent .checkbox.bounce input:checked {
    --s: 11px;
}

.yearEndSequenceContent .checkbox.bounce input:checked + svg {
    animation: bounce 0.4s linear forwards 0.2s;
}

.yearEndSequenceContent .checkbox.bounce svg {
    --scale: 0;
}

@keyframes bounce {
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.pastYearCheckboxWrap {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-left: 8px;
    padding-top: 8px;
}

.pastYearCheckboxWrap .checkbox-wrapper {
    width: 50%;
}

.pastYearCheckboxWrap .checkbox-wrapper:last-child {
    width: 50%;
    flex-wrap: wrap;
    row-gap: 8px;
}

.other-wrapper {
    width: 100%;
}

.yearEndSequenceContent .checkbox .other-wrapper input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--triple-text-color);
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 1px 32px 1px 7px;
    color: var(--input-text-color);
    outline: 0 none;
    box-shadow: none;
    transition: none;
    cursor: text;
}

@media (hover: hover) {
    .yearEndSequenceContent .checkbox .other-wrapper input:hover {
        border: 1px solid var(--input-hover-color);
        outline: 0 none;
    }
}

.yearEndSequenceContent .checkbox .other-wrapper input:disabled,
.yearEndSequenceContent .checkbox .other-wrapper input:read-only {
    border: 1px solid var(--input-disabled-border);
    color: var(--button-disabled-color);
    outline: 0 none;
    background: transparent;
}

.yearEndSequenceContent .checkbox .other-wrapper input:focus,
.yearEndSequenceContent .checkbox .other-wrapper input:focus-visible {
    border: 1px solid var(--input-active-color);
    outline: 0 none;
    box-shadow: none;
    background: transparent;
}

.yearEndSequenceContent .mobileRowTitle {
    display: none;
}


.yearEndSequenceContent .visionSlider-12 .ui-slider-range-min {
    background: rgb(59, 104, 224, 1) !important;
}

.yearEndSequenceContent .visionSlider-12 .bgBar .bgBaritem.empty.hover {
    background-color: rgb(59, 104, 224, 0.3) !important;
}


@media only screen and (max-width: 1024px) {

    .yearEndSequenceContent .mobileRowTitle {
        display: block;
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-right: 1px solid rgba(162, 168, 184, 0.5);
        font-weight: 500;
        font-size: var(--main-font-size);
        line-height: 16px;
        padding-left: 8px;
        padding-top: 8px;
    }

    .yearEndSequenceColumnsWrap {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .yearEndSequenceColumn {
        width: calc(100% / 2 - 16px * 1 / 2);
    }

    .yearEndSequenceContent .textareasTable .tableRow {
        grid-template-columns: 0 repeat(3, minmax(calc((100% - 30%) / 3), 1fr)) 30%;
    }

    .annualPlanningTab .yearEndSequenceColumnsWrap {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 16px;
    }
}

@media only screen and (max-width: 768px) {

    .yearEndSequenceContent .mobileRowTitle {
        border-left: none;
        border-right: none;
    }

    .yearEndSequenceContent {
        padding: 0px 8px 0 16px;
    }

    .yearEndSequenceContent .itemBg {
        padding: 16px 8px;
    }

    .yearEndSequenceColumn {
        width: calc(100%);
    }

    .yearEndSequenceContentDescription {
        padding-left: 0;
    }

    .yearEndSequenceContent .horizontalDiagramWrap {
        width: calc(100%);
        padding-left: 0;
    }

    .yearEndSequenceContent .horizontalDiagramItemWrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .yearEndSequenceContent .textareasTable .tableRow {
        grid-template-columns: repeat(1, 1fr);
    }

    .annualPlanningTab .yearEndSequenceColumnsWrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .yearEndSequenceTwoColumnsWrap,
    .annualPlanningTab .yearEndSequenceColumnsWrap.yearEndSequenceTwoColumnsWrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .yearEndSequenceContent .textareasTable .tableRow > div.mobileCellTitle {
        min-height: 0;
    }

    .pastYearCheckboxWrap .checkbox-wrapper,
    .pastYearCheckboxWrap .checkbox-wrapper:last-child {
        width: 100%;
    }
}


/* ==========================================================================
              FINANCIAL PERFORMANCE PAGE
             ========================================================================== */

.performanceContent {
    padding-bottom: 30px;
}

.performanceContent .itemControlPinnedWrap {
    justify-content: flex-end;
    width: 100%;
}

.performanceContent .itemBg {
    padding: 16px;
}

.performanceContent .fiscal-year-wraqpper {
    width: 200px;
}

.performanceContent .fiscal-year-wraqpper span {
    padding-left: 7px;
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    position: relative;
}

.performanceSettingsWrap {
    justify-content: flex-end;
    width: 100%;
}

.performanceSettingsIcon {
    background: #E8E9EE;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.performanceSettingsIcon:hover {
    background: var(--button-hover-color);

}

.performanceSettingsIcon:hover path {
    fill: white;
}

.performanceSettingsIcon svg {
    pointer-events: none;
}


#financial_report .selectIcon::after {
    bottom: 10px;
}

.performanceContent .itemControlPinnedWrap {
    column-gap: 8px;
}

.performanceTablesWrap {
    width: 100%;
    display: grid;
    grid-template-columns: 152px repeat(3, minmax(calc((100% - 152px - 24px) / 3), 1fr));
    column-gap: 8px;
    align-items: start;
}

.performanceContent .textareasTable {
    width: 100%;
    padding-top: 10px;
}

.tableName {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 28px;
    text-align: center;
    padding-bottom: 11px;
}

.performanceContent .textareasTable:first-child .tableRow {
    grid-template-columns: repeat(1, 1fr);
}

.performanceContent .textareasTable .tableRow {
    grid-template-columns: repeat(3, minmax(calc(100% / 3), 1fr));
}

.performanceContent .textareasTable input,
.performanceContent .textareasTable span {
    padding: 7px 4px 4px 0px;
    font-weight: 400;
    font-size: var(--main-font-size-sm);
    line-height: 24px;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    overflow: auto;
    background: var(--textarea-bg);
    border-radius: 6px;
    box-sizing: border-box;
    border: none;
    width: 100%;
    color: var(--secondary-text-color);
}

.performanceContent .textareasTable span {
    background: transparent;
    color: white;
}

.performanceContent:not(.blueprintReportBlock) .textareasTable .tableValue {
    background: var(--triple-text-color);
    color: white;
}

.performanceContent .tableValue {
    cursor: auto;
}

.performanceContent .textareasTable input:focus-visible,
.yearEndSequenceContent .textareasTable input:focus-visible {
    border: none;
    outline: 0 none;
}

.performanceContent .textareasTable .tableValue {
    min-height: 40px;
    background: transparent;
    padding: 0;
}

.performanceContent .textareasTable .tableValue-editable.tableValue {
    background: var(--textarea-bg) !important;
}

.performanceContent .textareasTable .tableValue {
    background: var(--triple-text-color) !important;
}

.performanceContent .textareasTable .tableRow > div {
    min-height: 40px;
}

.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div:first-child {
    background: transparent;
    border-left: 1px solid rgba(162, 168, 184, 0.5);
    padding-left: 8px;
}

.performanceContent .textareasTable .tableRow > div:last-child {
    padding-right: 8px;
}

.performanceContent .textareasTable .tableRow:nth-child(4) > div {
    padding-top: 8px;
}

.performanceContent .textareasTable .tableRow:nth-child(10) > div,
.performanceContent .textareasTable .tableRow:nth-child(16) > div {
    position: relative;
    padding-bottom: 8px;
}

.performanceContent .textareasTable .tableRow:nth-child(10) > div:after,
.performanceContent .textareasTable .tableRow:nth-child(16) > div:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    height: 1px;
    background: #D0D3DB;
}

.performanceContent .textareasTable .tableRow:nth-child(10) > div:first-child:after,
.performanceContent .textareasTable .tableRow:nth-child(16) > div:first-child:after {
    left: 8px;
}

.performanceContent .textareasTable .tableRow:nth-child(10) > div:last-child:after,
.performanceContent .textareasTable .tableRow:nth-child(16) > div:last-child:after {
    right: 8px;
}

.performanceContent .textareasTable .tableRow:nth-child(12) > div,
.performanceContent .textareasTable .tableRow:nth-child(18) > div {
    padding-top: 8px;
}

.performanceContent .textareasTable .tableRow:last-child > div {
    padding-bottom: 8px;
}

.performanceContent .textareasTable .tableRow.tableHeader > div {
    min-height: 48px;
    justify-content: center;
    padding-left: 8px;
    padding-top: 5px;
    text-align: center;
}

.performanceContent .textareasTable:first-child .tableRow.tableHeader > div:first-child {
    border-top-right-radius: 6px;
    justify-content: flex-start;
    padding-left: 16px;
}

.performanceContent .textareasTable:first-child .tableRow:last-child > div:first-child {
    border-bottom-right-radius: 6px;
}

.performanceContent .textareasTable:first-child .tableRow:not(.tableHeader) > div {
    box-sizing: content-box;
    height: 40px;
}

.performanceContent .textareasTable .tableValue-red {
    background: #E81A0C !important;
    color: #fff;
}

.performanceContent .textareasTable .tableValue-green {
    background: #039C55 !important;
    color: #fff;
}

.performanceTablesWrap .tableValuePrefix {
    background: transparent;
    width: auto;
    min-width: max-content;
    padding-left: 4px;
    height: 40px;
    color: white;
    font-weight: 400;
    line-height: 38px;
}

.performanceTablesWrap .tableValue-editable .tableValuePrefix {
    color: var(--secondary-text-color);
    line-height: 42px;
}


.performanceContent .performanceTablesWrap .textareasTable input,
.performanceContent .performanceTablesWrap .textareasTable span {
    flex-grow: 1;

}

@media only screen and (max-width: 1400px) {

    .performanceTablesWrap {
        grid-template-columns: 140px repeat(3, minmax(calc((100% - 140px - 24px) / 3), 1fr));
    }

    .performanceContent .textareasTable input,
    .performanceContent .textareasTable span {
        padding-left: 7px;
        white-space: nowrap;
        overflow: hidden;
    }

    .performanceContent .textareasTable:first-child .tableRow > div:first-child {
        padding-left: 7px;
    }
}

@media only screen and (max-width: 1300px) {
    .performanceTablesWrap {
        grid-template-columns: repeat(3, minmax(calc((100% - 16px) / 3), 1fr));
    }

    .performanceContent .textareasTable:first-child {
        display: none;
    }

    .mobileRowTitle {
        display: block;
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-right: 1px solid rgba(162, 168, 184, 0.5);
        font-weight: 500;
        font-size: var(--main-font-size);
        line-height: 16px;
        padding-left: 8px;
        padding-top: 8px;
    }

    .performanceContent .textareasTable .tableRow.tableHeader > div {
        padding-left: 0;
        padding-right: 0;
    }
}

@media only screen and (max-width: 1300px) {
    .performanceContent .textareasTable input,
    .performanceContent .textareasTable span {
        font-size: var(--small-text-font-size);
        padding-left: 4px;
        padding-right: 4px;
    }
}

@media only screen and (max-width: 1024px) {
    .performanceTablesWrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .performanceContent .tableHeader > div:nth-child(2) {
        border-top-left-radius: 0;
    }

    .performanceContent .tableRow > div:first-child {
        padding: 4px 4px 8px;
    }

    .performanceContent .tableRow:last-child > div:first-child {
        border-bottom: 1px solid rgba(162, 168, 184, 0.5);
    }

    .performanceContent .tableRow:last-child > div:nth-child(3) {
        border-left: none;
        border-radius: 0;
    }
}

@media only screen and (max-width: 768px) {

    .performanceContent {
        padding: 0px 8px 0 16px;
    }

    .performanceContent .itemBg {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .itemControlPinnedWrap {
        display: none;
    }

    .performanceContent .textareasTable {
        background: #fff;
    }

    .performanceContent .textareasTable .tableHeader {
        display: grid;
    }

    .performanceContent .textareasTable .tableRow > div:first-child {
        display: flex;
    }

    .performanceContent .textareasTable .mobileRowTitle {
        font-weight: 500;
        font-size: var(--main-font-size);
        line-height: 16px;
        padding-left: 16px;
        padding-bottom: 0;
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-right: 1px solid rgba(162, 168, 184, 0.5);
    }

    .performanceContent .textareasTable .tableRow > div:last-child {
        border-right: 1px solid rgba(162, 168, 184, 0.5);
    }

    .performanceContent .textareasTable .tableRow:last-child > div:nth-child(2),
    .performanceContent .textareasTable .tableRow:last-child > div {
        border-bottom: 1px solid rgba(162, 168, 184, 0.5);
    }

    .performanceContent .tableRow:last-child > div:nth-child(3) {
        border-bottom-right-radius: 6px;
    }

    .performanceContent .textareasTable .tableRow.tableHeader > div {
        text-align: center;
    }
}


/*!* ==========================================================================*/
/*              KPI PAGE*/
/*             ========================================================================== *!*/


.groupAssigned {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 14px;
    color: var(--secondary-text-color);
    padding-left: 6px;
    padding-top: 5px;
    width: calc(100%);
}

.groupAssigned.clear {
    padding-left: 8px;
}

.kpiPage .groupItem > .containerColumn:first-child {
    width: calc(100% - 24px);
    position: relative;
}

.kpiPage .groupItem {
    padding-left: 16px;
}

.kpiPage .kpiGroupItem > .containerColumn:first-child {
    width: calc(100% - 24px);
    position: relative;
}

.kpiPage .kpiGroupItem {
    padding-left: 16px;
}

.kpiPage .groupItem > .containerColumn:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 100%;
    border-radius: 100px;
    background: #039C55;
}

.kpiPage .kpiGroupItem > .containerColumn:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 100%;
    border-radius: 100px;
    background: #039C55;
}

.kpiGroupItem.active {
    border: 1px solid var(--button-active-color);
}

.kpiPage [data-status="green"] > .containerColumn:first-child::before {
    background: #039C55;
}

.kpiTitle[data-status="green"] {
    color: #039C55;
}

.kpiPage [data-status="red"] > .containerColumn:first-child::before {
    background: #E81A0C;
}

.kpiTitle[data-status="red"] {
    color: #E81A0C;
}

.kpiPage [data-status="yellow"] > .containerColumn:first-child::before {
    background: #FEB912;
}

.kpiTitle[data-status="yellow"] {
    color: #FEB912;
}

.kpiPage [data-status="gray"] > .containerColumn:first-child::before {
    background: #BBB9C2;
}

.kpiTitle[data-status="gray"] {
    color: #BBB9C2;
}


.blueprintReportBlockBlueTitle.yellow {
    color: #FEB912 !important;
}

.blueprintReportBlockBlueTitle.red {
    color: #E81A0C;
}

.blueprintReportBlockBlueTitle.green {
    color: #039C55;
}

.blueprintReportBlockBlueTitle.gray {
    color: #BBB9C2;
}

.graphSwitch {
    justify-content: flex-end;
    column-gap: 8px;
    width: auto;
}

.groupDetailTitle {
    flex-grow: 1;
}

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

.kpisGrafFilter .inputWrap {
    width: 144px;
}

.costOfAquisitionsGraphWrap {
    padding-left: 16px;
}

.costOfAquisitionsGraphWrap img {
    width: 100%;
}

.kpiPage .groupDetailWrap .scroll.containerColumn:not(.userMoreMenuWrap) {
    padding: 0;
}


.kpiPage .textareasTable .tableHeader {
    grid-template-columns: 104px repeat(3, minmax(calc((100% - 104px - 34%) / 3), 1fr)) 34%;
}

.kpiPage .textareasTable .tableRow {
    grid-template-columns: 104px repeat(3, minmax(calc((100% - 104px - 34%) / 3), 1fr)) 34%;
}

.kpiPage .textareasTable .tableRow:nth-child(3) > div {
    padding-top: 8px;
}

.kpiPage .textareasTable .tableRow:last-child > div {
    padding-bottom: 8px;
}

.kpiPage .textareasTable .tableRow.tableHeader > div {
    min-height: 40px;
    padding-left: 12px;
}

.kpiPage .textareasTable .tableRow.tableHeader > div:nth-child(2) {
    background: #4DB990;
    padding-left: 16px;
}

.kpiPage .textareasTable .tableRow.tableHeader > div:nth-child(3) {
    background: #DCB53C;
    padding-left: 12px;
}

.kpiPage .textareasTable .tableRow.tableHeader > div:nth-child(4) {
    background: #265D71;
}

.kpiPage .textareasTable input {
    padding: 7px 4px 7px 0px;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    overflow: auto;
    border-radius: 6px;
    box-sizing: border-box;
    border: none;
    width: 100%;
    color: var(--secondary-text-color);
    background: transparent;
    outline: 0 none;
}

.kpiPage .textareasTable .tableValue {
    min-height: 40px;
    background: var(--textarea-bg);
    padding: 0;
    align-items: center;
    padding-left: 8px;
}

.kpiPage .tableValue > svg {
    display: block;
}

.kpiPage .textareasTable .tableRow > div {
    min-height: 40px;
}

.kpiPage .textareasTable .tableRow > div:nth-child(3) {
    padding-left: 8px;
}

.kpiPage .textareasTable .tableRow > div:last-child {
    padding-right: 8px;
}

.kpiPage .groupDetailTitle {
    width: calc(100% - 80px);
}

.tableValuePrefix,
.textInputPrefix {
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: #E8E9ED;
    border-radius: 4px;
    color: var(--secondary-text-color);
    font-weight: 700;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    text-align: center;
}

.kpiPage .newGroupPopup {
    max-width: 800px;
}

.kpiPage .newGroupPopup .popupInner {
    padding: 0 48px;
}

.textInputPrefix {
    position: absolute;
    bottom: 8px;
    left: 8px;
}

.textInputPrefixWrap {
    position: relative;
}

.textInputPrefixWrap input {
    padding-left: 40px;
}

.kpiPage .newGroupPopup .formWrap {
    max-width: 100%;
    align-items: stretch;
}

.newGroupPopupRowWrap:nth-child(3) {
    padding-bottom: 32px;
}

.newGroupPopupRowWrap:nth-child(5) {
    padding-bottom: 32px;
}

.newGroupPopupRowWrap .inputWrap {
    width: 100%;
}

.newGroupPopupRowWrap .selectIcon::after {
    bottom: 15px;
}

.newGroupPopupRowWrap:nth-child(5) .inputWrap:first-child,
.newGroupPopupRowWrap:nth-child(6) .inputWrap:first-child {
    max-width: 80px;
}

.newGroupPopupRowWrap:nth-child(6) .inputWrap:nth-child(2),
.newGroupPopupRowWrap:nth-child(6) .inputWrap:nth-child(3) {
    max-width: 104px;
}

.newGroupPopupRowWrap:nth-child(2) .inputWrap {
    flex-grow: 1;
}

.chartBtnsWrapLabel {
    padding-left: 7px;
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 15px;
    padding-bottom: 5px;
    text-align: left;
    color: var(--main-text-color);
}

.kpiInputWithSign .control-label {
    width: calc(90%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.newGroupPopup .chartBtnsWrap .active.btn-icon {
    background: var(--button-active-color);
    color: #fff;
}

.chartBtnsWrap .active.btn-icon path {
    fill: #fff;
}

.chartBtnsWrap label:last-child .active.btn-iconpath:nth-child(2) {
    fill: transparent;
    stroke: #fff;
}


@media (hover: hover) {
    .chartBtnsWrap label:last-child:hover path:nth-child(2) {
        fill: transparent;
        stroke: #fff;
    }

    .chartBtnsWrap .btn-icon:hover {
        background: var(--button-hover-color);
        color: #fff;
    }
}

@media only screen and (max-width: 1300px) {
    .kpiPage .mobileRowTitle {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .kpiPage .textareasTable .tableRow {
        grid-template-columns: 0 repeat(3, minmax(calc((100% - 30%) / 3), 1fr)) 30%;
    }
}

@media only screen and (max-width: 768px) {
    .kpiPage .groupDetailWrap.itemBg {
        padding: 16px 8px;
    }

    .kpiPage .textareasTable .tableRow {
        grid-template-columns: repeat(1, 1fr);
    }

    .kpiPage .textareasTable .tableRow > div.mobileCellTitle {
        min-height: 0;
    }

    .kpiPage .newGroupPopup .popupInner {
        padding: 0 8px;
    }

    .kpiPage .newGroupPopupRowWrap {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .newGroupPopupRowWrap:nth-child(2) {
        padding-bottom: 0;
    }

    .newGroupPopupRowWrap:nth-child(4) {
        padding-bottom: 0;
    }

    .kpiPage .newGroupPopupRowWrap .inputWrap,
    .newGroupPopupRowWrap:nth-child(4) .inputWrap:first-child,
    .newGroupPopupRowWrap:nth-child(5) .inputWrap:first-child,
    .newGroupPopupRowWrap:nth-child(5) .inputWrap:nth-child(2),
    .newGroupPopupRowWrap:nth-child(5) .inputWrap:nth-child(3) {
        width: 100%;
        max-width: 100%;
    }

    .kpiPage .mobileRowTitle {
        display: block;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .costOfAquisitionsGraphWrap {
        padding-left: 0px;
    }
}


/* ==========================================================================
              MANAGE MEMBERS PAGE
             ========================================================================== */

@media (hover: hover) {
    .mmTableControlsWrap .btn-secondary:hover path {
        stroke: var(--button-text-color);
    }

    .mmTableControlsWrap .btn-secondary:hover path.fill {
        fill: var(--button-text-color);
        stroke: none;
    }

    .mmTableControlsWrap .btn-secondary:hover circle {
        fill: var(--button-text-color);
    }
}

.manageMembersPage .contentWrap {
    padding-top: 8px;
}

.mmTableWrap {
    height: 100%;
    overflow-y: auto;
    align-items: stretch;
    row-gap: 8px;
    padding: 0 8px 0 24px !important;
}

.mmTable {
    display: grid;
    background: #fff;
}

.mmTableRow {
    display: grid;
    grid-template-columns: 14.3% 14.3% 14.3% calc(14.3% - 68px) 14.3% 14.3% 14.3% 68px;
    align-items: center;
    position: relative;
}

.mmTableRow.billingGreed {
    display: grid;
    grid-template-columns: 10% 10% 11% 10% 11% 11% 10% calc(27% - 68px) 68px;
    align-items: center;
    position: relative;
    font-size: 13px;
}

.mmTableRow.companyGreed {
    display: grid;
    grid-template-columns: 10% 14.3% 14.3% calc(18.6% - 68px) 14.3% 14.3% 14.3% 68px;
    align-items: center;
    position: relative;
}

.companyTable .mmTableRow {
    display: grid;
    grid-template-columns: 10% 14.3% 14.3% calc(19.6% - 68px) 13.3% 14.3% 14.3% 68px;
    align-items: center;
    position: relative;
}

.mmTableRow.facilitatorGreed {
    display: grid;
    grid-template-columns: 20% 20% 20% calc(20% - 34px) calc(20% - 34px) 68px;
    align-items: center;
    position: relative;
}

.memberAppGreed .mmTableRow {
    --grid-width: calc((100% - 75px - 100px - 110px - 68px) / 2);
    display: grid;
    grid-template-columns: 75px var(--grid-width) var(--grid-width) 100px 110px 68px;
    align-items: center;
    position: relative;
}

.memberAppMasterGreed .mmTableRow {
    --grid-width: calc((100% - 75px - 110px - 130px - 88px - 68px) / 2);
    display: grid;
    grid-template-columns: 75px var(--grid-width) var(--grid-width) 110px 130px 88px 68px;
    align-items: center;
    position: relative;
}

.memberAppMasterGreed .facilitatorGreed {
    display: grid;
    grid-template-columns: 75px var(--grid-width) var(--grid-width) 110px 130px 88px 68px;
    align-items: center;
    position: relative;
}

.memberAppMasterGreed .mmTableCellInner .label-table {
    padding: 8px;
}

.memberTableGrid .mmTableRow .mmTableCell:first-child a {
    position: relative;
    padding-left: 28px;
}

.memberTableGrid .mmTableRow .mmTableCell:first-child a,
.memberTableGrid .mmTableRow .mmTableCell:nth-child(2) a {
    position: relative;
    padding-left: 28px;
}

.memberTableGrid .mmTableRow.mmTableHeader .mmTableCell:nth-child(2) a,
.memberTableGrid .mmTableRow.mmTableHeader .mmTableCell:first-child a {
    position: relative;
    padding-left: 20px;
}

.memberTableGrid .mmTableRow .mmTableCell:first-child a svg,
.memberTableGrid .mmTableRow .mmTableCell:nth-child(2) a svg {
    position: absolute;
    left: 8px;
    top: 7px;
}

.mmTableHeader .mmTableCell {
    background: #3B68E0;
    color: var(--button-text-color);
    min-height: 48px;
    display: flex;
    align-items: center;
    column-gap: 5px;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 16px;
    padding-left: 8px;
}

.mmTableHeader .mmTableCell:first-child {
    padding-left: 16px;
}

.mmTableHeader .mmTableCell:first-child {
    border-top-left-radius: 6px;
}

.mmTableHeader .mmTableCell:last-child {
    border-top-right-radius: 6px;
}

.mmTableRow:last-child .mmTableCell:first-child {
    border-bottom-left-radius: 6px;
}

.mmTableRow:last-child .mmTableCell:nth-last-child(1) {
    border-bottom-right-radius: 6px;
}

.mmTableRow:not(.mmTableHeader) .mmTableCell:first-child {
    border-left: 1px solid rgba(162, 168, 184, 0.5);
}

.mmTableRow:not(.mmTableHeader) .mmTableCell:nth-last-child(1) {
    border-right: 1px solid rgba(162, 168, 184, 0.5);
}

.mmTableRow:last-child .mmTableCell {
    border-bottom: 1px solid rgba(162, 168, 184, 0.5);
}

.mmTableRow:nth-child(2) .mmTableCell {
    padding: 8px 0 4px;
}

.mmTableRow:last-child .mmTableCell {
    padding: 4px 0 8px;
}

.mmTableCellInner {
    display: flex;
    align-items: center;
    background: var(--manual-bg);
    padding: 8px 0;
    position: relative;
}

.mmTableCell {
    color: var(--secondary-text-color);
    display: grid;
    height: 100%;
    padding: 4px 0;
}

.mmTableCell:first-child .mmTableCellInner {
    margin-left: 8px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.mmTableCell:nth-last-child(1) .mmTableCellInner {
    margin-right: 8px;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    justify-content: flex-end;
    padding-right: 8px;
}

.mmTableCell a {
    color: var(--button-active-color);
    text-decoration: underline;
    padding: 0 8px;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.mmTable .editFields {
    display: none;
}

.mmTable .trEditable .editFields {
    display: block;
    padding: 0;
    width: 100%;
    margin-right: 16px;
}

.mmTableRow .mmTableCell:last-child .editFields {
    margin-right: 0;
    width: auto;
}

.mmTable .trEditable .editFields input {
    display: block;
    width: 100%;
    height: 40px;
    border: 1px solid var(--triple-text-color);
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 1px 32px 1px 7px;
    color: var(--input-text-color);
    outline: 0 none;
}

.editFields a.jsEditableSave {
    padding-left: 0;
    padding-right: 4px;
}

.mmTable .trEditable .mainFields {
    display: none;
}

.mmTableHeader .mmTableCell a {
    padding: 0;
}

.mmTableCell span {
    padding: 0 8px;
}

.mmTableCell .inputWrap {
    width: 100%;
    margin-right: 16px;
}

.mmTableCellStatus,
a.mmTableCellStatus {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 10px;
    color: #fff;
    width: 100%;
    margin-right: 8px;
    text-align: center;
    padding: 8px 0 !important;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    justify-content: center;
}

.awaitingStatus {
    background: #E81A0C;
}

.finalizedStatus {
    background: #3264E8;
}

.completedStatus {
    background: #039C55;
}

.notAssignedStatus {
    background: #BBB9C2;
}

.inProgressStatus {
    background: #FE6900;
}

.pendingStatus {
    background: #FE6900;
}

.mmTableCellInner .label-table,
.billingGreed .mmTableCellInner .label {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 10px;
    color: #fff;
    width: 100%;
    margin-right: 8px;
    text-align: center;
    padding: 8px 0;
    border-radius: 6px;
}


.mmTableCellInner .label-table.label-success {
    background-color: var(--success-green);
}

.mmTableCellInner .label-table.label-warning {
    background-color: var(--attention-yellow);
}

.mmTableCellInner .label-table.label-danger {
    background-color: var(--warning-red);
}

.mmTableCellInner .label-table.label-default {
    background-color: var(--button-disabled-color);
}

.billingGreed .mmTableCellInner .label-success {
    background-color: var(--success-green);
}

.billingGreed .mmTableCellInner .label-warning {
    background-color: var(--attention-yellow);
}

.billingGreed .mmTableCellInner .label-danger {
    background-color: var(--warning-red);
}

.billingGreed .mmTableCellInner .label-default {
    background-color: var(--button-disabled-color);
}


.dues {
    row-gap: 8px;
}

.duesRow {
    display: grid;
    grid-template-columns: 86px 37px 1fr;
    column-gap: 8px;
    align-items: center;
    font-size: 12px;
}

.mmTableCellInner .duesRow .label-table {
    margin-right: 0;
    padding-left: 4px;
    padding-right: 4px;
    width: 100%;
    display: block;
    font-size: 10px;
}

.duesInnerRow {
    font-size: 12px;
    justify-content: flex-start;
}

.duesInnerRow > div {
    white-space: nowrap;
}

.notPublishedIcon {
    height: 12px;
    line-height: 12px;
}

.mmTableDropdownBtn {
    position: relative;
    cursor: pointer;
}

.mmTableDropdownBtn:active path,
.mmTableDropdownBtn.active path {
    fill: #fff;
}

.mmTableDropdown {
    display: none;
    position: absolute;
    z-index: 2;
    top: 44px;
    right: 0;
    background: #fff;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-lg);
    min-width: 213px;
    text-align: left;
}

.mmTableRow:nth-child(n+7) .mmTableDropdown {
    top: auto;
    bottom: calc(100% - 16px);
}

.mmTableDropdown.open {
    display: block;
}

.mmTableDropdown li {
    padding: 0 8px;
}

.mmTableDropdown li:first-child {
    padding-top: 8px;
}

.mmTableDropdown li:last-child {
    padding-bottom: 8px;
}

.mmTableDropdown a {
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 32px;
    color: var(--main-text-color);
    text-decoration: none;
}

.mmTablePagination {
    padding-top: 8px;
    padding-bottom: 40px;
}

.amountPerPage,
.pages {
    color: var(--secondary-text-color);
    align-items: center;
    padding: 0 18px;
}

.pages .onlyIconBtn {
    height: 16px;
}

.amountPerPage .inputWrap {
    width: 64px;
}

.page {
    padding: 7px 8px;
    width: 40px;
    min-width: 40px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid transparent;
}

.page.active {
    color: #3B68E0;
    border: 1px solid #3B68E0;

}

.page:first-child {
    margin-left: 8px;
}

.page:last-child {
    margin-right: 8px;
}

.pages .onlyIconBtn:nth-child(2) {
    margin-left: 18px;
}


@media (hover: hover) {
    .page:hover {
        color: var(--button-hover-color);
        border: 1px solid var(--button-hover-color);
    }

    .pages .onlyIconBtn:hover path {
        fill: var(--button-hover-color);
    }

    .mmTableDropdown a:hover {
        color: #fff;
        background: #3B68E0;
    }

    .mmTableDropdownBtn:hover path {
        fill: #fff;
    }
}


@media only screen and (max-width: 1200px) {
    .mmTableControlsWrap {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

@media only screen and (max-width: 1024px) {
    .mmHeading.pageHeading {
        width: calc(100% - 172px - 8px);
    }

    .mmTableControlsFilter {
        flex-wrap: wrap;
        column-gap: 3px;
        justify-content: normal;
    }

    .mmTableControlsFilter .btn {
        margin-bottom: 5px;
    }

    .userDetailsRow span {
        padding-bottom: 8px;
    }


    .mmTableHeader,
    .mmTableHeader.facilitatorGreed,
    .companyTable .mmTableHeader,
    .billingGreed.mmTableHeader {
        display: none;
    }

    .mmTableRow:not(.mmTableHeader) .mmTableCell:first-child {
        border-left: none;
    }

    .mmTableRow .mmTableCell:nth-child(2) {
        padding-right: 24px !important;
    }

    .subscriptionSchedule .mmTableRow .mmTableCell:first-child,
    .subscriptionTable .mmTableRow .mmTableCell:first-child {
        padding-right: 24px !important;
    }

    .subscriptionSchedule .mmTableRow .mmTableCell:nth-child(2),
    .subscriptionTable .mmTableRow .mmTableCell:nth-child(2) {
        padding-right: 0 !important;
    }

    .subscriptionSchedule .mmTableCellInner,
    .subscriptionTable .mmTableCellInner {
        width: calc(100%);
    }


    .mmTableRow:not(.mmTableHeader) .mmTableCell:nth-last-child(1) {
        border-right: none;
        position: absolute;
        top: 0;
        right: 4px;
        height: 32px;
        width: 32px;
        padding: 0;
    }

    .mmTableRow:last-child .mmTableCell {
        border-bottom: none;
    }

    .mmTable {
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        border-radius: var(--border-radius-lg);
        row-gap: 8px;
        padding: 8px;
    }

    .mmTableRow,
    .mmTableRow.facilitatorGreed,
    .companyTable .mmTableRow,
    .mmTableRow.billingGreed {
        grid-template-columns: repeat(auto-fill, minmax(calc(50% - 4px), 1fr) );
        background: var(--manual-bg);
        border-radius: 6px;
        column-gap: 8px;
        padding: 8px;
        position: relative;
    }

    .mmTableRow .mmTableCell {
        padding: 0;
    }

    .mmTableCell .inputWrap {
        margin-right: 0;
    }

    .mmTableCell a,
    .mmTableCell span {
        padding: 0;
    }

    .mmTableCell:first-child .mmTableCellInner {
        margin-left: 0;
        column-gap: 8px;
    }

    .mmTableCell:nth-last-child(1) .mmTableCellInner {
        padding: 0;
        margin: 0;
    }

    .mmTableRow:nth-child(2) .mmTableCell {
        padding: 0;
    }

    .mmTableCellInner {
        padding: 0;
        width: calc(90%);
    }

    .mmTableCellInner span,
    .mmTableCellInner a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100%);
        display: inline-block;
    }

    .mmTableCellStatus {
        margin-right: 0;
    }

    .mmTableRow .mmTableCell:nth-child(5) {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .mmTableCell:nth-last-child(2) .mmTableCellInner {
        margin-right: 0;
    }

    .noDisplayMobile {
        display: none;
    }

    .amountPerPage {
        padding: 0 0 0 8px;
    }

    .pages {
        padding: 0 8px 0 0;
    }
}

@media only screen and (max-width: 768px) {
    .mmHeading.pageHeading {
        width: calc(100% - 32px - 32px - 12px);
    }

    .mmTableControlsWrap {
        padding-top: 0;
    }

    .mmTableWrap {
        padding: 0 8px 0 16px !important;
    }

    .mmTableDropdown {
        top: 40px;
    }

    .mmTableRow:nth-child(n+7) .mmTableDropdown {
        top: auto;
        bottom: calc(100%);
    }

}


/* ==========================================================================
              MANAGE DISC PAGE
             ========================================================================== */

.scroll.containerColumn:not(.userMoreMenuWrap).manageDiscContent {
    align-items: stretch;
    padding: 8px 24px;
    row-gap: 8px;
    overflow: auto;
    height: 100%;
}

.motivatorsTypeControlsWrap {
    padding: 20px 16px;
    row-gap: 16px;
}

.motivatorsTypeHeading {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
}

.motivatorsTypeSubHeading {
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 15px;
}

.motivatorsRadioWrap {
    padding: 13px 0 6px;
    column-gap: 24px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.motivatorsTypeWrap {
    padding: 20px 16px 8px;
    row-gap: 8px;
    align-items: stretch;
    margin-bottom: 24px;
    align-self: stretch;
}

.motivatorsTypeInnerWrap {
    row-gap: 8px;
    align-items: stretch;
    align-self: stretch;
}

.motivatorsTypeRow {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(25% - 8px * 3 / 4), 1fr) );
    column-gap: 8px;
    padding-bottom: 10px;
}

.js_motivators:not(:last-child) .motivatorsTypeRow {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 6 - 8px * 5 / 6), 1fr) );
}

[data-type-content] {
    display: none;
}

[data-type-content].active {
    display: flex;
}

@media only screen and (max-width: 1024px) {
    .motivatorsRadioWrap label {
        width: 100%;
    }

    .motivatorsTypeRow.sixColumns {
        grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3 - 8px * 2 / 3), 1fr) );
        row-gap: 8px;
    }
}

@media only screen and (max-width: 768px) {
    .scroll.containerColumn:not(.userMoreMenuWrap).manageDiscContent {
        padding: 8px 8px 8px 16px;
    }

    .motivatorsTypeControlsWrap {
        padding: 16px 8px;
        row-gap: 16px;
    }

    .motivatorsTypeWrap {
        padding: 16px 8px 8px;
    }

    .motivatorsTypeRow {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr) );
        row-gap: 8px;
    }

    .js_motivators:not(:last-child) .motivatorsTypeRow {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr) );
        row-gap: 8px;
    }
}


/* ==========================================================================
              VIEW USER DETAILS PAGE
             ========================================================================== */

.viewUserDetailsContent {
    align-items: stretch;
    padding: 0px 10px 8px 24px !important;
    row-gap: 16px;
    overflow: auto;
    height: 100%;
}


.userDetailsContentWrap {
    padding: 16px;
    align-items: stretch;
}

.userDetailsWrap {
    justify-content: flex-start;
    column-gap: 8px;
}

.userDetails,
.subscriptionDetails {
    flex-grow: 1;
    width: calc(100% / 3);
}

.subscriptionDetails .userDetailsHeading {
    padding-left: 0;
}

.userDetailsHeading {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 34px;
    padding-left: 0;
    padding-bottom: 14px;
}

.userDetailsGrid {
    justify-content: flex-start;
    column-gap: 24px;
}

.viewUserDetailsContent .itemUserInfoImgWrap {
    width: 80px;
    min-width: 80px;
    height: 80px;
}

.userDetailsRow {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: 12px;
    padding-top: 8px;
}

.userDetailsRow strong {
    font-weight: 500;
    white-space: nowrap;
}

.userDetailsRow .link {
    line-height: 24px;
}

.userDetailsBtns {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 8px;
    padding: 24px 0 16px 0;
    row-gap: 8px;
}

.subscriptionBlock {
    align-items: stretch;
    row-gap: 8px;
}

.subscriptionBlock .userDetailsHeading {
    padding: 0;
}

.subscriptionControls {
    justify-content: flex-start;
    column-gap: 8px;
}

.userDetailsFilterIcon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
}

.userDetailsFilterIcon:hover rect {
    fill: var(--button-hover-color);
}

.userDetailsFilterIcon:hover path {
    fill: var(--button-text-color);
}

.userDetailsFilterIcon.disabled path {
    fill: var(--button-text-color);
}

.userDetailsFilterIcon.disabled rect {
    fill: var(--button-disabled-color);
}

.subscriptionTable .mmTableRow {
    grid-template-columns: 10% 14.3% 15.6% calc(18.6% - 68px) 14.3% 14.3% 13% 68px;

}

.subscriptionSchedule .mmTableRow {
    grid-template-columns: 10% 15.6% 14.3% calc(18.6% - 68px) 14.3% 14.3% 13% 68px;
}

.mmTableCellSubType {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 12px;
    color: #fff;
    width: 100%;
    margin: 0 8px;
    text-align: center;
    padding: 6px 0;
    border-radius: 6px;
    background: #3BA2DF;
}

.canceledStatus {
    background: #E81A0C;
}

.LOAStatus {
    background: #FE6900;
}

.subscriptionBlock .mmTableCellInner span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.subscriptionBlock .mmTableCellInner span.label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
    display: block;
}

.subscriptionBlock .mmTableCell:not(:last-child) .mmTableCellInner.ellipsis,
.mmTableCell:not(:last-child) .mmTableCellInner,
.mmTableCell:not(:last-child) .mmTableCellInner {
    overflow: hidden;
}

.subscriptionBlock .mmTableCell:not(:last-child) .mmTableCellInner {
    padding: 16px 0 14px;
    max-width: calc(100%);
    overflow: hidden;
}

.subscriptionBlock .mmTableCell:nth-last-child(2) .mmTableCellInner {
    padding-right: 32px;
    padding-left: 8px;
}

.scheduleBlock .subscriptionControlsWrap {
    align-items: center;
}

.scheduleBlock .mmTableRow {
    grid-template-columns: 10.9% 38% 6.5% 10.8% 15% 18.8%;
}

.scheduleBlock .mmTableCell:nth-last-child(2) .mmTableCellInner {
    padding-right: 0;
    margin-right: 0;
    padding-left: 0;
}

.scheduleBlock .mmTableCell:last-child .mmTableCellInner {
    margin-right: 8px;
    padding-left: 8px;
}

.scheduleBlock .mmTableRow:not(.mmTableHeader) .mmTableCell:nth-last-child(2) {
    border-right: 0;
}

.scheduleBlock .mmTableCellInner {
    padding: 9px 0 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
}

.scheduleBlock .mmTableCellSubType {
    width: auto;
    margin: 0;
    padding: 6px 16px;
}

.scheduleBlock .mmTableCell:nth-child(2) .mmTableCellInner {
    padding-left: 8px;
}

.typeRed {
    background: #E81A0C;
}

.typeGreen {
    background: #039C55;
}

.typeGrey {
    background: #BBB9C2;
}

.typeOrange {
    background: #FE6900;
}

.scheduleBlock .mmTableRow:not(.mmTableHeader) .mmTableCell:last-child {
    border-right: 1px solid rgba(162, 168, 184, 0.5);
}

.scheduleBlock .mmTableRow:not(.mmTableHeader):last-child .mmTableCell:last-child {
    border-bottom-right-radius: 6px;
}

.scheduleBlock .transactionIcon {
    width: 24px;
    text-align: center;
    padding: 6px 0;
}

.scheduleBlock .mmTableCell .inputWrap {
    width: 100%;
    margin-right: 7px;
}

.field-user-disabled_discussion {
    margin-top: 50px;
}

.floatLeft {
    float: left;
    padding: 0 15px;
}

.board_datepicker_wrapper {
    display: none;
}

.board_datepicker_wrapper.active {
    display: block;
}

.my-account-pannel-header {
    padding-bottom: 16px;
}

.updateUserRow {
    column-gap: 8px;
    flex-wrap: wrap;
}

.updateUserWrap {
    column-gap: 8px;
    flex-wrap: wrap;
}

.updateUserWrap .form-group,
.updateUserWrap .inputWrap {
    width: calc(100% / 2 - 8px * 1 / 2);
}

.updateUserWrap .form-group:last-child,
.updateUserWrap .inputWrap:last-child {
    width: 100%;
}

.updateUserRow .form-group,
.updateUserRow .inputWrap {
    width: calc(100% / 3 - 8px * 2 / 3);
}

.inputWrap.field-createuserform-newpassword {
    row-gap: 0;
    position: relative;
}

.inputWrap.field-createuserform-newpassword .help-block {
    position: absolute;
    bottom: -18px;
}

.inputWrap.field-createuserform-newpassword label {
    padding-bottom: 5px;
}

.my-account-pannel {
    padding-bottom: 24px;
}

.showBillingCompanyWrap .form-group {
    column-gap: 8px;
    align-items: flex-start;
    justify-content: center;
}

.showBillingCompanyWrap {
    padding-bottom: 16px;
}

.billing-company-pannel .profileAddressEdit {
    column-gap: 8px;
}

.billing-company-pannel .profileAddressEdit > .form-group:first-child,
.billing-company-pannel .profileAddressEdit > .form-group:nth-child(2) {
    padding-left: 0;
    width: 23%;
}

.billing-company-pannel .profileAddressEdit > .form-group {
    padding-left: 0;
    width: calc((100% - 46%) / 3 - 8px * 4 / 3);
}

.my-account-pannel.companyInfo {
    padding-bottom: 0;
}

.my-account-pannel label.control-label {
    color: var(--main-text-color);
    width: calc(90%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prospectFormRow:nth-child(2) > .form-group,
.prospectFormRow.twoColumnRow > .form-group {
    width: calc(50% - 4px);
}

.prospectFormRow > .form-group {
    width: calc(100% / 3 - 8px * 2 / 3);
}

.my-account-pannel > div:not(.my-account-pannel-header) {
    padding-bottom: 7px;
}

.mergeRow {
    column-gap: 8px;
    margin-bottom: 8px;

}

.mergeRow > .form-group {
    width: calc(50% - 4px);
}

@media only screen and (max-width: 1200px) {

    .userDetailsWrap {
        flex-wrap: wrap;
        row-gap: 16px;
    }

    .subscriptionBlock .mmTableRow {
        grid-template-columns: 13% 17% 20% 12% 8% 10% 20% 0;
    }

    .scheduleBlock .mmTableRow {
        grid-template-columns: 14% 38% 8% 12% 15% 13%;
    }

    .scheduleBlock .mmTableRow:not(.mmTableHeader) .mmTableCell:last-child .mmTableCellInner {
        padding-right: 0px;
    }
}

@media only screen and (max-width: 1024px) {
    .userDetailsWrap {
        flex-wrap: wrap;
        row-gap: 24px;
    }

    .userDetails,
    .subscriptionDetails {
        flex-grow: 1;
        width: calc(100%);
    }

    .userDetailsGrid {
        flex-direction: column;
        row-gap: 16px;
    }

    .userDetailsRow strong {
        min-width: 100px;
    }

    .userDetailsRow a,
    .userDetailsRow span {
        width: calc(100%);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .subscriptionControls {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .subscriptionBlock .mmTableRow:not(.mmTableHeader) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 0;
    }

    .subscriptionBlock .mmTableRow .mmTableCell {
        width: 100%;
        height: auto;
    }

    .subscriptionBlock:not(.scheduleBlock) .mmTableRow .mmTableCell:nth-child(5),
    .subscriptionBlock:not(.scheduleBlock) .mmTableRow .mmTableCell:nth-child(6) {
        width: 50%;
    }

    .scheduleBlock .mmTableRow {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr) );
    }

    .subscriptionBlock .mmTableCellInner {
        padding: 4px 0;
    }

    .subscriptionBlock .mmTableCellInner:first-child {
        padding-top: 8px;
    }

    .subscriptionBlock .mmTableCellInner:nth-last-child(2) {
        padding-bottom: 8px;
    }

    .mmTableCellSubType {
        margin: 0;
    }

    .subscriptionBlock .mmTableCell:nth-last-child(2) .mmTableCellInner {
        padding-left: 0;
        padding-right: 0;
    }

    .subscriptionBlock .mmTableDropdown {
        top: 38px;
    }

    .scheduleBlock .mmTableCell:nth-child(2) .mmTableCellInner {
        padding-left: 0;
    }

    .scheduleBlock .mmTableRow:not(.mmTableHeader) .mmTableCell:last-child .mmTableCellInner {
        padding-left: 0;
        margin-right: 0;
    }

    .scheduleBlock .mmTableRow:not(.mmTableHeader) .mmTableCell:last-child {
        border-right: 0;
    }

    .scheduleBlock .mmTableCell .inputWrap {
        margin-right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .userDetails {
        width: 100%;
    }

    .viewUserDetailsContent {
        padding: 0px 8px 8px 16px !important;
    }

    .userDetailsContentWrap {
        padding: 16px 8px;
    }

    .userDetailsRow {
        grid-template-columns: 1fr;
    }

    .updateUserRow .form-group,
    .updateUserRow .inputWrap,
    .billing-company-pannel .profileAddressEdit > .form-group:first-child,
    .billing-company-pannel .profileAddressEdit > .form-group:nth-child(2),
    .billing-company-pannel .profileAddressEdit > .form-group {
        width: 100%;
    }

    .prospectFormRow > .form-group,
    .prospectFormRow:nth-child(2) > .form-group {
        width: 100%;
    }

    .prospectFormRow {
        flex-wrap: wrap;
    }

    .updateUserWrap .form-group,
    .updateUserWrap .inputWrap {
        width: 100%;
    }


    .pageHeading .h1.ellipsisOneLine {
        max-width: calc(100% - 24px - 14px - 8px);
    }

    .strategicHeading .pageHeading .h1.ellipsisOneLine {
        max-width: calc(100% - 24px - 14px - 32px);
    }

    .strategicHeading .pageHeading {
        width: calc(100% - 40px);
    }
}


/* ==========================================================================
              BLUEPRINT REPORT PAGE
             ========================================================================== */


.blueprintPage .pageHeadingInner {
    margin-top: 21px;
}

.blueprintContent {
    overflow-y: scroll;
    height: 100%;
    padding: 4px 24px 8px 24px !important;
    align-items: stretch;
    row-gap: 8px;
}

.generalSettingsWrap,
.selectComponentsWrap {
    padding: 16px;
    flex-wrap: wrap;
    row-gap: 14px;
    align-items: stretch;
}

.selectComponentsWrap {
    row-gap: 10px;
    margin-bottom: 24px;
}

.reportContentHeading {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 30px;
    width: 100%;
}

.generalSettingsInner {
    justify-content: flex-start;
    column-gap: 40px;
}

.generalSettingsRadioWrap {
    row-gap: 12px;
    padding-right: 22px;
}

.generalSettingsRadioInner {
    column-gap: 18px;
    justify-content: flex-start;
}

.generalSettingsWrap .inputWrap {
    width: 30%;
}

.generalSettingsRadioHeading {
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 15px;
    width: 100%;
}

.generalSettingsRadioInner .radio {
    white-space: nowrap;
}

.selectComponentsControls {
    justify-content: flex-start;
    column-gap: 8px;
}

.advancedSettingsHeading {
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}

.advancedSettingsHeading h3 {
    margin-bottom: 0;
}

.selectComponentsCheckboxesWrap {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 1fr;
    padding: 6px 0 16px;
    row-gap: 8px;
}

.selectComponentsCheckboxesWrap .checkbox {
    height: 24px;
}

.advancedSettingsItem {
    padding-top: 12px;
    align-items: stretch;
}


.advancedSettingsWrap {
    padding-top: 10px;
    padding-bottom: 8px;
    column-gap: 16px;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
    row-gap: 12px;
    width: 100%;
}

.advancedSettingsWrap .inputWrap,
.advancedSettingsRadioWrap {
    width: calc(93% / 3 - 16px * 2 / 3);
}

.kpiNoteswrapper .generalSettingsRadioHeading{
    padding-bottom: 7px;
}

.kpiNoteswrapper.active{
    visibility: visible;
}
.kpiNoteswrapper{
    visibility: hidden;
}


.advancedSettingsRadioWrap {
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
    padding-bottom: 8px;
}

#generate {
    align-items: center;
}

#mp_datepicker {
    width: 100%;
}

@media only screen and (max-width: 1200px) {
    .generalSettingsInner {
        flex-wrap: wrap;
        row-gap: 16px;
    }

    .generalSettingsWrap,
    .selectComponentsWrap {
        padding: 16px 8px;
    }

    .generalSettingsWrap .inputWrap {
        width: 100%;
    }

    .blueprintPage .pageHeading {
        width: calc(100% - 40px);
    }

    .selectComponentsCheckboxesWrap {
        grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
    }

    .advancedSettingsWrap .inputWrap,
    .advancedSettingsRadioWrap {
        width: calc(100% / 2 - 16px / 2);
    }

    .nodisplayInput {
        display: none;
    }
}

@media only screen and (max-width: 1024px) {
    .selectComponentsCheckboxesWrap {
        grid-template-columns: calc(100% / 2) calc(100% / 2);
    }
}

@media only screen and (max-width: 990px) {
    .advancedSettingsWrap .inputWrap,
    .advancedSettingsRadioWrap {
        width: 100%;
    }

    .advancedSettingsRadioWrap {
        padding-bottom: 0;
    }
}

@media only screen and (max-width: 768px) {
    .blueprintContent {
        overflow-y: scroll;
        height: auto;
        padding: 4px 8px 8px 16px !important;
    }

    .blueprintPage .pageHeadingInner {
        margin-top: 0;
    }

    .selectComponentsCheckboxesWrap {
        grid-template-columns: 100%;
    }
}


/* ==========================================================================
              BLUEPRINT REPORT PRINT PAGE
             ========================================================================== */


.blueprintReportPrintWrap {
    width: 100%;
    background: #fff;
}

.blueprintReportPrintHeader {
    background-color: #1B335A;
    height: 64px;
}

.blueprintReportPrintContainer {
    max-width: 1072px;
    margin: 0 auto;
    align-items: center;
    height: 100%;
    width: 100%;
}

.blueprintReportMainHeading {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 35px;
    padding: 68px 0 74px;
}

.blueprintReportMainInfo {
    align-items: center;
}

.blueprintReportMainInfo .itemUserInfoImgWrap {
    width: 120px;
    height: 120px;
    min-width: 120px;
    min-height: 120px;
}

.blueprintReportUserName {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
    padding: 26px 0 11px;
}

.blueprintReportCompanyName {
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    line-height: 24px;
}

.blueprintReportGeneratedDate {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
    padding: 69px 0 76px;
}

.blueprintReportBlock .focusGraphMainWrap {
    padding-top: 0;
    column-gap: 123px;
    padding-bottom: 48px;
}

.blueprintReportBlock .focusGraphWrap {
    width: calc(52% - 9px);
    padding-top: 12px;
    padding-left: 62px;
}

.blueprintReportBlock .focusGraphField {
    aspect-ratio: 3 / 2;
}

.blueprintReportBlock .focusGraphAxisNumbers {
    left: 57px;
}

.blueprintReportBlock .verticalAxisNumber {
    left: 33px;
    bottom: 44px;
    right: 33%;
}

.blueprintReportBlock .focusGraphAxisName:not(.verticalAxisName) {
    bottom: -16px;
}

.blueprintReportBlock .bdCategoriesWrap {
    padding-top: 16px;
}

.blueprintReportBlock .responseGraphMainWrap {
    padding: 0px 8px 94px 0;
}

.blueprintReportBlock .responseCategory {
    grid-template-columns: 164px 1fr;
    column-gap: 11px;
}

.blueprintReportBlock .responseGraphWrap .hBarAxesNames {
    left: 173px;
    right: -10px;
    bottom: -28px;
}

.blueprintReportBlock .responseCategoryAmount {
    background-image: repeating-linear-gradient(to right, #fff, rgba(120, 116, 134, 0.2) 1px, #fff 1px, #fff 10%, rgba(120, 116, 134, 0.2) 1px);
}

.blueprintReportBlock .responseLegend {
    left: 180px;
    bottom: -71px;
}

.blueprintReportBlock {
    align-items: stretch;
    padding-bottom: 32px;
}

.blueprintReportDISC {
    padding-bottom: 25px;
}

.blueprintReportBlockHeader {
    height: 56px;
    align-items: center;
    background: var(--manual-bg);
}

.blueprintReportBlockHeading {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 35px;
    align-items: center;
    column-gap: 14px;
    flex-grow: 1;
    justify-content: flex-start;
    width: calc(100% - 84px);
}

.blueprintReportBlock .blueprintReportBlockHeading .ellipsisOneLine {
    white-space: nowrap;
    overflow: hidden;
    max-width: calc(100% - 14px - 24px);
}

.blueprintReportBlockHeader .mainLogo {
    height: 42px;
    padding-right: 8px;
}

.blueprintReportBlockContent {
    align-items: stretch;
    padding-top: 28px;
    padding-right: 8px;
}

.blueprintReportBlockBlueTitle {
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: #3264E8;
}

.blueprintReportBlockSubTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
    padding: 24px 0 16px;
}

.totalResponseSummaryTitle {
    padding-bottom: 30px;
}

.blueprintReportBlockContentImg {
    padding-bottom: 28px;
}

.blueprintReportPersonalEffectiveness,
.blueprintReportChampagneMoment {
    padding-bottom: 37px;
}

.blueprintReportPersonalVision {
    padding-bottom: 87px;
}

.blueprintReportCompanyVision {
    padding-bottom: 66px;
}

.blueprintReportStrategicAdvantage {
    padding-bottom: 55px;
}

.blueprintReportBlockContentImg img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.blueprintReportBlockContent .discGraphicItem {
    padding: 15px 0 16px 0;
    width: 39.5%;
}

.blueprintReportBlockContent .discGraphicItem .vbarTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
    padding: 0px 0 38px;
    text-align: left;
}

.blueprintReportBlockContent .discGraphicItem .vbar {
    padding-left: 55px;
}

.blueprintReportBlockContent .vbarAxesNames {
    left: 0;
}

.blueprintReportBlockContent .grourTextareasWrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    padding-top: 24px;
    padding-bottom: 30px;
}

.blueprintReportBlockContent .groupTextareaInner {
    width: 100%;
}

.blueprintReportBlockContent .grourTextareasWrap .groupTextareaInner label {
    min-height: auto;
    padding-left: 8px;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 15px;
}

.blueprintReportBlockContent .wysiwyg-textarea {
    background: #FFFFFF;
    border: 1px solid #D0D3DB;
    border-radius: 6px;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    margin-top: 0;
    padding: 6px 43px 6px 6px;
    height: 100%;
    min-height: 128px;
}

.blueprintReportBlockContent .wysiwyg-wrapper,
.blueprintReportBlockContent .grourTextareasWrap .groupTextareaInner .wysiwyg,
.blueprintReportBlockContent .grourTextareasWrap .groupTextareaInner .textarea {
    height: 100%;
    width: 100%;
}

.blueprintReportPersonalVision .blueprintReportBlockContent .groupDetailWrap,
.blueprintReportCompanyVision .blueprintReportBlockContent .groupDetailWrap {
    padding: 19px 0 0;
}

.blueprintReportCompanyVision .blueprintReportBlockContent .groupDetailWrap {
    padding-top: 49px;
}

.blueprintReportBlockContent .visionColumnsWrap {
    column-gap: 32px;
    grid-template-columns: 1fr;
    row-gap: 32px;
}

.blueprintReportBlockContent .horizontalDiagramWrap {
    width: calc(100% - 21px);
}

.blueprintReportPersonalVision .visionColumnsWrap .wysiwyg label,
.blueprintReportCompanyVision .visionColumnsWrap .wysiwyg label,
.blueprintReportStrategicAdvantage .visionColumnsWrap .wysiwyg label {
    margin-bottom: 3px;
}

.blueprintReportBlockGreyTitle {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    padding-top: 4px;
}

.blueprintReportBlockGreyTitle strong {
    font-weight: 500;
    color: var(--main-text-color);
    padding-right: 3px;
}

.blueprintReportBlockContent .champagneMomentBlock {
    padding: 25px 0 28px;
}

.blueprintReportChampagneMoment .inputWrap label,
.blueprintReportStrategicAdvantage .inputWrap label {
    padding-left: 0;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 15px;
}

.blueprintReportChampagneMoment .wysiwyg-textarea,
.blueprintReportStrategicAdvantage .textarea {
    min-height: 120px;
}

.blueprintReportStrategicAdvantage .groupDetailWrap {
    padding: 16px 0 8px;
    row-gap: 14px;
}

.blueprintReportStrategicAdvantage .groupDetailInner {
    column-gap: 54px;
}

.blueprintReportBlockContent .groupDetailProps {
    width: calc(100%);
    padding-top: 11px;
}

.blueprintReportBlockContent .groupProp {
    background: transparent;
    color: #3BA1DF;
    border: 1px solid #3BA2DF;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 14px;
}

.blueprintReportStrategicAdvantage .blueprintReportBlockContent .grourTextareasWrap {
    padding-top: 8px;
    padding-bottom: 2px;
}

.blueprintReportStrategicAdvantage .textarea {
    background: #FFFFFF;
    border: 1px solid #D0D3DB;
    border-radius: 6px;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    margin-top: 0;
    padding: 6px 43px 6px 6px;
    height: 100%;
    width: 100%;
}

.blueprintReportStrategicAdvantage .inputWrap {
    height: 100%;
}

.blueprintReportStrategicAdvantage .grourTextareasWrap .groupTextareaInner label {
    min-height: 30px;
    padding-left: 8px;
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 15px;
}

.blueprintReportStrengthsAndWeaknesses .blueprintReportBlockContent .groupDetailWrap {
    padding: 33px 0 61px;
}

.blueprintReportStrengthsAndWeaknesses .wysiwyg label {
    margin-bottom: 2px;
}

.blueprintReportStrengthsAndWeaknesses .groupTextareaInnerRows {
    row-gap: 11px;
}


.blueprintReportBlock .valueColumn {
    padding-top: 14px;
    column-gap: 31px;
}

.blueprintReportBlock .valueColumn:first-child {
    max-width: 100%;
}

.blueprintReportCompanyValues .valueImportantList {
    padding-top: 8px;
}

.blueprintReportCompanyValues .valueVeryImportantColumn .valueItem,
.blueprintReportCompanyValues .valueImportantColumn .valueItem,
.blueprintReportPersonalValues .valueVeryImportantColumn .valueItem,
.blueprintReportPersonalValues .valueImportantColumn .valueItem {
    max-width: none;
    width: 95.1%;
    color: var(--background-color);
    background: transparent;
    border: 1px solid var(--background-color);
    padding: 10px 15px 10px 14px;
}

.blueprintReportCompanyValues .blueprintReportBlockContent .grourTextareasWrap,
.blueprintReportPersonalValues .blueprintReportBlockContent .grourTextareasWrap {
    grid-template-columns: repeat(2, 1fr);
    padding-top: 48px;
    column-gap: 56px;
}

.blueprintReportCompanyValues .grourTextareasWrap .groupTextareaInner label,
.blueprintReportPersonalValues .grourTextareasWrap .groupTextareaInner label {
    padding-top: 5px;
}

.blueprintReportCompanyValues .wysiwyg-textarea,
.blueprintReportPersonalValues .wysiwyg-textarea {
    min-height: 120px;
    padding-right: 24px;
}

.blueprintReportPersonalValues .textareasTable .tableValue,
.blueprintReportCompanyValues .tableValue {
    background: transparent;
}

.blueprintReportCompanyValues .table {
    padding: 33px 0;
}

.blueprintReportPersonalValues .table {
    padding: 16px 0 33px 0;
}

.blueprintReportPersonalValues .valueImportantList {
    padding-top: 7px;
    padding-bottom: 40px;
}


.blueprintReportAccountability .totalResponseSummaryTitle {
    padding-bottom: 2px;
}

.blueprintReportAccountability .blueprintReportBlockContentImg {
    padding-bottom: 10px;
}

.blueprintReportStrategicPlan .totalResponseSummaryTitle {
    padding: 21px 0 23px;
}

.blueprintReportStrategicPlan .blueprintReportBlockContentImg {
    padding-bottom: 22px;
}

.blueprintReportFinancialPerformance.performanceContent {
    overflow: auto;
    padding: 0;
    padding-bottom: 64px;
    row-gap: 0;
}

.blueprintReportFinancialPerformance .performanceTablesWrap {
    grid-template-columns: 14.1% repeat(3, minmax(calc((100% - 14.1% - 24px) / 3), 1fr));
    padding-top: 2px;
}

.blueprintReportFinancialPerformance .textareasTable .tableRow {
    grid-template-columns: repeat(3, minmax(calc(100% / 3), 1fr));
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow.tableHeader > div {
    text-align: center;
}

.blueprintReportFinancialPerformance .textareasTable span {
    background: transparent;
    padding-left: 0;
    overflow: visible;
    white-space: nowrap;
}

.blueprintReportFinancialPerformance .textareasTable .tableValue-editable span {
    color: var(--secondary-text-color);
}

.blueprintReportFinancialPerformance .performanceTablesWrap .tableValue-editable .tableValuePrefix {
    line-height: 38px;
}

.blueprintReportPersonalValues .textareasTable span {
    background: transparent;
    padding-left: 4px;
    overflow: visible;
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow:nth-child(10) > div:after,
.blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow:nth-child(16) > div:after {
    display: none;
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow:nth-child(10) > div,
.blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow:nth-child(16) > div {
    padding-bottom: 4px;
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow:nth-child(12) > div,
.blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow:nth-child(18) > div {
    padding-top: 4px;
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div {
    border-left: 1px solid rgba(162, 168, 184, 0.5);
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader):not(:nth-child(4)) > div {
    border-top: 1px solid rgba(162, 168, 184, 0.5);
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable:first-child .tableRow:not(.tableHeader):not(:nth-child(4)) > div {
    border-top: 1px solid var(--main-text-color);
}

.blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div:first-child {
    padding-left: 4px;
}

.blueprintReportKPI .blueprintReportBlockContentImg {
    padding-bottom: 8px;
}

.blueprintReportKPI.kpiPage .textareasTable .tableRow {
    grid-template-columns: 104px repeat(3, minmax(calc((100% - 104px - 31%) / 3), 1fr)) 31%;
}

.blueprintReportKPI.kpiPage .textareasTable.withNotes .tableRow {
    grid-template-columns: 104px repeat(4, minmax(calc((100% - 104px - 31%) / 4), 1fr)) 31%;
}
.kpiPage .textareasTable .tableRow.tableHeader > div:nth-child(6) {
    background: var(--main-text-color);
}

.blueprintReportKPI.kpiPage .textareasTable {
    padding-bottom: 58px;
}

.blueprintReportKPI.kpiPage .noBreak:last-child .textareasTable {
    padding-bottom: 32px;
}

.blueprintReportKPI.kpiPage .tableValue {
    background: transparent;
}

.videoModal .modal-dialog {
    max-width: 800px !important;
}
.groupDetailProps .is-invalid {
    background-image: none;
}
.groupDetailProps .is-valid {
    background-image: none;
}
.blueprintReportYearEndSequence .yearEndSequenceContentTitle:first-child {
    padding-top: 21px;
    padding-bottom: 5px;
}

.blueprintReportYearEndSequence .yearEndSequenceColumnsWrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 16px;
}

.blueprintReportYearEndSequence .yearEndSequenceColumn:not(.oneRow) {
    display: grid;
    grid-template-rows: 48px repeat(3, auto);
    row-gap: 8px;
    justify-content: stretch;
}

.blueprintReportYearEndSequence .yearEndSequenceTwoColumnsWrap {
    grid-template-columns: repeat(2, 1fr);
}

.blueprintReportYearEndSequence .yearEndSequenceColumn {
    width: 100%;
}

.blueprintReportYearEndSequence .yearEndSequenceContentDescription {
    padding-left: 0px;
    padding-bottom: 6px;
    padding-top: 16px;
}

.blueprintReportYearEndSequence .textarea {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    border: 1px solid #D0D3DB;
    border-radius: 6px;
    width: 100%;
    min-height: 64px;
    height: 100%;
    padding: 8px;
}

.blueprintReportYearEndSequence .yearEndSequenceTwoColumnsWrap .yearEndSequenceColumn .textarea {
    height: calc(100% - 46px);
}

.blueprintReportYearEndSequence .horizontalDiagramItemTitle {
    width: 0;
}

.blueprintReportYearEndSequence .horizontalDiagramWrap {
    width: 100%;
    margin-bottom: 33px;
}

.blueprintReportYearEndSequence .horizontalDiagramItemWrap {
    column-gap: 0;
    width: 100%;
}

.blueprintReportYearEndSequence .horizontalDiagramItemWrap:first-child .horizontalDiagramPart.active {
    background: #3B68E0;
    color: #3B68E0;
}

.blueprintReportYearEndSequence .horizontalDiagramPartsWrap {
    width: 100%;
}

.horizontalDiagramLabel {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
    padding-top: 24px;
    padding-bottom: 4px;
}

.blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable span {
    background: transparent;
    padding-left: 8px;
    overflow: visible;
    font-size: 11px;
    height: auto;
    max-height: 100%;
}

.blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable .tableRow:not(.tableHeader) > div,
.blueprintReportPersonalValues .textareasTable .tableRow:not(.tableHeader) > div,
.blueprintReportCompanyValues .tableRow:not(.tableHeader) > div,
.blueprintReportKPI .tableRow:not(.tableHeader) > div {
    border-right: 1px solid rgba(162, 168, 184, 0.5);
}

.blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable .tableRow:not(.tableHeader) > div:not(:first-child),
.blueprintReportPersonalValues .textareasTable .tableRow:not(.tableHeader) > div:not(:first-child),
.blueprintReportCompanyValues .tableRow:not(.tableHeader) > div:not(:first-child),
.blueprintReportKPI .tableRow:not(.tableHeader) > div:not(:first-child) {
    border-bottom: 1px solid rgba(162, 168, 184, 0.5);
}

.blueprintReportYearEndSequence .fullWidthTextareaDescription {
    line-height: 16px;
    padding-left: 0;
}

.blueprintReportYearEndSequence .fullWidthTextarea {
    min-height: 88px;
    margin-bottom: 5px;
}

.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign .yearEndSequenceContentDescription {
    padding-top: 0;
    padding-left: 0;
    line-height: 16px;
    padding-bottom: 4px;
}

.blueprintReportYearEndSequence .yearEndSequenceContentTitle.blue {
    color: #3264E8;
}

.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-auto-flow: column;
    grid-auto-rows: 0;
    row-gap: 0;
}

.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign:not(:nth-child(even)) {
    padding-top: 13px;
}

.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign.yearEndSequenceColumnsWrap:last-child,
.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign {
    padding-bottom: 4px;
}

.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign .yearEndSequenceContentDescription.pt26 {
    padding-top: 26px;
}

.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign.pb36,
.blueprintReportYearEndSequence .yearEndSequenceColumnsAlign.yearEndSequenceColumnsWrap:last-child.pb36 {
    padding-bottom: 36px;
}

.blueprintReportYearEndSequence {
    padding-bottom: 60px;
}


.blueprintReportBlock .itemsWrap {
    padding: 24px 0 0 0;
}

.blueprintReportBlock .futureEvent .itemBange {
    background: #FEB912;
    border-radius: 10px;
    width: 8px;
    left: 6px;
    top: 6px;
    height: calc(100% - 12px);
    max-height: 64px;
}

.blueprintReportBlock .item {
    background: #FFFFFF;
    border: 1px solid #D0D3DB;
    border-radius: 6px;
    box-shadow: none;
    margin-bottom: 8px;
}

.blueprintReportBlock .itemControls {
    display: none;
}

.blueprintReportBlock .itemInnerWrap {
    width: 100%;
    padding-right: 16px;
}

.blueprintReportBlock .eventActions {
    display: none;
}

.blueprintReportBlock .eventsList .eventDescription {
    display: block;
    max-height: 100%;
}

.blueprintReportEvents,
.blueprintReportBoardTopicsCommitments,
.blueprintReportBoardFeedback,
.blueprintReportBoardMeetingUpdates,
.blueprintReportNotes {
    padding-bottom: 56px;
}

.blueprintReportBoardTopicsCommitments .item,
.blueprintReportBoardMeetingUpdates .item,
.blueprintReportBoardFeedback .item {
    padding: 16px 0 7px;
}

.blueprintReportBlock .ellipsisOneLine {
    white-space: inherit;
    overflow: visible;
}

.blueprintReportBlock .itemUserInfoImgWrap {
    width: 56px;
    min-width: 56px;
    height: 56px;
}

.blueprintReportBoardTopicsCommitments .itemUserName {
    padding-top: 7px;
}

.blueprintReportTABenosCharter .textarea {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    border: 1px solid #D0D3DB;
    border-radius: 6px;
    width: 100%;
    min-height: 128px;
    height: 100%;
    padding: 8px;
    margin-top: 27px;
}

.blueprintReportBlock .mobileRowTitle {
    display: none;
}

.blueprintReportBlock .actionListItemsWrap {
    padding-top: 16px;
}

.blueprintReportBlock .priorityAssistantDescriptionWrap {
    display: flex;
    min-width: 73px;
}

.blueprintReportBlock .actionListItem {
    background: #FFFFFF;
    border: 1px solid #D0D3DB;
    box-shadow: none;
    margin-bottom: 8px;
    border-radius: 6px;
}

.blueprintReportBlock .actionListItemContent {
    padding-right: 0;
}

.blueprintReportBlock .priorityAssistantBlock {
    height: auto;
    flex-wrap: nowrap;
}

.blueprintReportBlock .priorityAssistantDescriptionLine {
    flex-wrap: nowrap;
}

.blueprintReportBlock .jstree-default .jstree-icon.jstree-themeicon.icon-Accountability:empty {
    background-image: none;
    width: 24px;
    height: 24px;
    margin: 0 !important;
    left: -32px;
}

.blueprintReportBlock .icon-Accountability:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3.75C12.4142 3.75 12.75 3.41421 12.75 3C12.75 2.58579 12.4142 2.25 12 2.25C11.5858 2.25 11.25 2.58579 11.25 3C11.25 3.41421 11.5858 3.75 12 3.75ZM15 3C15 4.25902 14.2244 5.33689 13.125 5.78193V12.375H21C21.6213 12.375 22.125 12.8787 22.125 13.5V18.2181C23.2244 18.6631 24 19.741 24 21C24 22.6569 22.6569 24 21 24C19.3431 24 18 22.6569 18 21C18 19.741 18.7756 18.6631 19.875 18.2181V14.625H13.125V18.2181C14.2244 18.6631 15 19.741 15 21C15 22.6569 13.6569 24 12 24C10.3431 24 9 22.6569 9 21C9 19.741 9.77556 18.6631 10.875 18.2181V14.625H4.125V18.2181C5.22444 18.6631 6 19.741 6 21C6 22.6569 4.65685 24 3 24C1.34315 24 0 22.6569 0 21C0 19.741 0.775564 18.6631 1.875 18.2181V13.5C1.875 12.8787 2.37868 12.375 3 12.375H10.875V5.78193C9.77556 5.33689 9 4.25902 9 3C9 1.34315 10.3431 0 12 0C13.6569 0 15 1.34315 15 3ZM12.75 21C12.75 21.4142 12.4142 21.75 12 21.75C11.5858 21.75 11.25 21.4142 11.25 21C11.25 20.5858 11.5858 20.25 12 20.25C12.4142 20.25 12.75 20.5858 12.75 21ZM21 21.75C21.4142 21.75 21.75 21.4142 21.75 21C21.75 20.5858 21.4142 20.25 21 20.25C20.5858 20.25 20.25 20.5858 20.25 21C20.25 21.4142 20.5858 21.75 21 21.75ZM3.75 21C3.75 21.4142 3.41421 21.75 3 21.75C2.58579 21.75 2.25 21.4142 2.25 21C2.25 20.5858 2.58579 20.25 3 20.25C3.41421 20.25 3.75 20.5858 3.75 21Z' fill='%233B68E0'/%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
}

.blueprintReportBlock .jstree-icon {
    margin-right: 8px !important;
}

.blueprintReportBlock .jstree > ul > li > a {
    margin-bottom: 16px;
    margin-left: 32px;
    padding-left: 0 !important;
}

.blueprintReportBlock .jstree > ul > li > a::after {
    display: none !important;
}

.blueprintReportBlock .jstree-default > ul > .jstree-node > ul > .jstree-node > .jstree-anchor .jstree-icon.jstree-themeicon:empty {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.5C11 6.15685 9.65685 7.5 8 7.5C6.34315 7.5 5 6.15685 5 4.5C5 2.84315 6.34315 1.5 8 1.5C9.65685 1.5 11 2.84315 11 4.5Z' fill='%231B335A'/%3E%3Cpath d='M3.3424 12.4456C3.72187 10.1688 5.69178 8.5 8 8.5C10.3082 8.5 12.2781 10.1688 12.6576 12.4456L13 14.5H3L3.3424 12.4456Z' fill='%231B335A'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin: 0 !important;
    position: absolute;
    top: 0;
    left: 8px;
}

.blueprintReportBlock .jstree-default .jstree-icon.jstree-themeicon:empty {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Group 1073'%3E%3Cpath id='Ellipse 109' d='M8 3.5C8 5.15685 6.65685 6.5 5 6.5C3.34315 6.5 2 5.15685 2 3.5C2 1.84315 3.34315 0.5 5 0.5C6.65685 0.5 8 1.84315 8 3.5Z' fill='%233B68E0'/%3E%3Cpath id='Rectangle 1325' d='M0.342404 11.4456C0.721873 9.16876 2.69178 7.5 5 7.5C7.30822 7.5 9.27813 9.16876 9.6576 11.4456L10 13.5H0L0.342404 11.4456Z' fill='%233B68E0'/%3E%3C/g%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin: 0 !important;
    position: absolute;
    top: 0;
    left: 8px;
}

.blueprintReportBlock .jstree-default .jstree-node {
    margin-left: 38px;
}

.blueprintReportBlock .jstree-container-ul > .jstree-node {
    margin-left: 0;
}

.blueprintReportBlock .jstree-container-ul > .jstree-node > ul {
    margin-left: 0;
}


.blueprintReportBlock .jstree-default .jstree-node:after {
    content: '';
    position: absolute;
    display: block;
    width: 0px;
    border-left: none;
    left: 15px;
    top: 22px;
    height: calc(100% - 22px);
}

.blueprintReportBlock .jstree-node .jstree-anchor {
    position: relative;
    padding-left: 32px;
}

.blueprintReportBlock .jstree-default .jstree-container-ul > .jstree-node:after {
    border-left: none;
}

.blueprintReportBlock .jstree-ocl:before {
    border-left: none;
}

.blueprintReportBlock .jstree-ocl:after {
    border-top: none;
}


.blueprintReportBlock .jstree-default .jstree-icon:empty {
    width: 0;
    margin-right: 0 !important;
}

.blueprintReportBlock .jstree-open > .jstree-anchor .responsibility:after {
    border-left: none;
}

.blueprintReportBlock .responsibility,
.blueprintReportBlock .jstree-anchor {
    color: var(--secondary-text-color) !important;
    font-size: var(--small-text-font-size);
    font-weight: 400;
    line-height: 1;
    padding: 0;
}

.blueprintReportBlock .jstree-anchor b {
    color: var(--main-text-color) !important;
    font-size: var(--main-font-size);
    font-weight: 700;
    line-height: 1;
    padding: 0;
}

.blueprintReportBlock .header-tree {
    font-size: var(--title-font-size-lg-s);
    font-weight: 700;
    color: var(--main-text-color) !important;
}

.blueprintReportBlock .jstree-default .jstree-node:not(.jstree-last):before {
    content: "";
    height: calc(100% + 17px);
    width: 2px;
    background: var(--menu-active-color);
    display: block;
    position: absolute;
    top: -7px;
    left: -24px;
}

.blueprintReportBlock .jstree-anchor:before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--menu-active-color);
    display: block;
    position: absolute;
    top: 8px;
    left: -24px;
}

.blueprintReportBlock .jstree-node:not(.jstree-leaf) > .jstree-anchor:after {
    content: "";
    height: calc(100% + 8px);
    width: 2px;
    background: var(--menu-active-color);
    display: block;
    position: absolute;
    top: 20px;
    left: 14px;
}

.blueprintReportBlock .jstree > ul > li > a::before,
.blueprintReportBlock .jstree > ul > li > a::after {
    display: none;
}


.report .tree-shortname {
    max-width: calc(100% - 32px);
}

.report .tree-name {
    width: 120px;
    min-width: 120px;
}

.blueprintReportBlock .groupDetailTitle {
    padding: 16px 0;
}

.blueprintReportBlock .groupDetailInner,
.blueprintReportBlock .tree-csfs {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
}

.blueprintReportBlock .tree-csfs li {
    max-width: 100%;
}

.blueprintReportBlock .tree-csfs .tree-li-wrapper {
    margin-bottom: 0;
    column-gap: 8px;
}

.tree-csfs .tree-shortname {
    flex-grow: 1;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    column-gap: 8px;
}

.blueprintReportBlock .strategic-plan-tree {
    width: 100%;
    padding-left: 0;
    padding-top: 0;
}

.blueprintReportBlock .strategic-plan-tree .tree-li-wrapper {
    padding: 12px 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--input-disabled-border);
    border-radius: 0;
}

.reportCSFWrap {
    flex-grow: 1;
}

.blueprintReportBlock .tree-comment {
    font-weight: 400;
    color: var(--secondary-text-color);
    font-size: var(--small-text-font-size);
}

.report .csf-status span,
.my-checkbox-row label.goal-status span {
    max-width: calc(100% - 14px - 8px);
}

.report span.csf-status {
    border-radius: 6px;
    padding: 6px !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    width: auto;
    min-width: 100px;
    color: var(--button-text-color);
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}

.report .matrix-overdue .tree-date {
    color: var(--warning-red);
}

.advancedSettingsBlock .selectIcon::after {
    bottom: 10px;
}

.blueprintReportStrategicAdvantage .groupDetailSubTitle {
    min-height: 54px;
}

.blueprintReportPersonalValues .valueImportantColumn {
    width: 100%;
}

.blueprintReportPersonalValues .valueImportantColumn .valueItem {
    width: 100%;
}

@media only screen and (max-width: 1300px) {
    .blueprintReportFinancialPerformance .performanceTablesWrap {
        grid-template-columns: repeat(3, minmax(calc((100% - 16px) / 3), 1fr));
    }
}


@media only screen and (max-width: 1072px) {
    .blueprintReportPrintContainer {
        padding-left: 8px;
        padding-right: 8px;
    }

    .blueprintReportBlockHeader .mainLogo {
        height: auto;
        width: 76px;
        overflow: visible;
    }
}

@media only screen and (max-width: 1024px) {

    .blueprintReportBlock .mobileRowTitle {
        display: block;
    }

    .blueprintReportFinancialPerformance .performanceTablesWrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div {
        border-left: none;
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div:first-child {
        border-left: 1px solid rgba(162, 168, 184, 0.5);
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div:last-child {
        border-right: 1px solid rgba(162, 168, 184, 0.5);
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:last-child > div {
        border-bottom: 1px solid rgba(162, 168, 184, 0.5);
    }


    .blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow > div:last-child {
        border-right: none;
    }


    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader):not(:nth-child(4)) > div {
        border-top: none;
    }

    .blueprintReportFinancialPerformance .performanceTablesWrap .tableRow:last-child > div:nth-child(2) {
        border-left: none;
        border-bottom-left-radius: 0;
    }

    .blueprintReportFinancialPerformance .performanceTablesWrap .tableRow > div {
        padding: 4px 4px 8px;
    }

    .blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable .tableRow:not(.tableHeader) > div:first-child {
        border-right: 0;
    }

    .blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable .tableRow:not(.tableHeader) > div {
        border-top: 1px solid rgba(162, 168, 184, 0.5);
    }

    .blueprintReportYearEndSequence.yearEndSequenceContent .tableRow:last-child > div:nth-child(3),
    .blueprintReportPersonalValues .tableRow:last-child > div:nth-child(3),
    .blueprintReportKPI .tableRow:last-child > div:nth-child(3) {
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-bottom-left-radius: 6px;
    }

    .blueprintReportCompanyValues .tableRow:not(.tableHeader) > div:not(:first-child),
    .blueprintReportPersonalValues .textareasTable .tableRow:not(.tableHeader) > div:not(:first-child),
    .blueprintReportKPI .tableRow:not(.tableHeader) > div:not(:first-child) {
        border-top: 1px solid rgba(162, 168, 184, 0.5);
    }

    .blueprintReportPersonalValues .textareasTable .tableRow:not(.tableHeader) > div:first-child,
    .blueprintReportKPI .tableRow:not(.tableHeader) > div:first-child {
        border-right: none;
    }

    .blueprintReportBlockContent .textareasTable .tableValue {
        background: transparent;
        border: 1px solid #D0D3DB;
    }

    .blueprintReportKPI.kpiPage .textareasTable .tableRow {
        grid-template-columns: 0 repeat(3, minmax(calc((100% - 30%) / 3), 1fr)) 30%;
    }

}

@media only screen and (max-width: 768px) {

    .blueprintReportBlockHeading {
        width: calc(100%);
    }

    .blueprintReportBlockHeader .mainLogo {
        display: none;
    }

    .toColumn {
        flex-direction: column;
    }

    .blueprintReportBlock .focusGraphWrap {
        width: 100%;
    }

    .blueprintReportBlock .responseCategory {
        grid-template-columns: 100%;
    }

    .blueprintReportBlock .responseCategoryName {
        background: repeating-linear-gradient(to right, transparent, rgba(120, 116, 134, 0.2) 1px, transparent 1px, transparent 10%, rgba(120, 116, 134, 0.2) 1px);
    }

    .blueprintReportBlock .responseLegend {
        left: 0;
    }

    .blueprintReportBlock .discGraphicItem {
        width: 100%;
    }

    .blueprintReportBlockContent .grourTextareasWrap {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 16px;
    }

    .blueprintReportCompanyValues .valueVeryImportantColumn .valueItem,
    .blueprintReportCompanyValues .valueImportantColumn .valueItem,
    .blueprintReportPersonalValues .valueVeryImportantColumn .valueItem,
    .blueprintReportPersonalValues .valueImportantColumn .valueItem {
        width: 100%;
    }

    .blueprintReportCompanyValues .blueprintReportBlockContent .grourTextareasWrap,
    .blueprintReportPersonalValues .blueprintReportBlockContent .grourTextareasWrap {
        grid-template-columns: repeat(1, 1fr);
    }


    .blueprintReportYearEndSequence .yearEndSequenceColumnsWrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .blueprintReportYearEndSequence .yearEndSequenceColumnsAlign {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: auto;
        grid-template-rows: none;
        grid-auto-flow: row;
        row-gap: 8px;
    }

    .blueprintReportKPI.kpiPage .textareasTable .tableRow {
        grid-template-columns: repeat(1, 1fr);
    }

    .blueprintReportBlock.yearEndSequenceContent {
        padding-left: 0;
        padding-right: 0;
    }

    .blueprintReportBlock.kpiPage .textareasTable .tableRow > div {
        padding-left: 0;
        padding-right: 0;
    }

    .blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable .tableRow:not(.tableHeader) > div:not(:first-child) {
        border-bottom: 0;
    }

    .blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable .tableRow:not(.tableHeader) > div {
        border-right: 0;
        border-top: 0;
    }

    .blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable .tableRow > div {
        padding-left: 0;
        padding-right: 0;
    }

    .blueprintReportBlock .item {
        padding: 8px 8px 8px 16px;
    }

    .blueprintReportBlock .itemInnerWrap {
        padding-right: 0;
    }

    .blueprintReportBlock .eventsList .itemText {
        max-width: 100%;
    }

    .blueprintReportPersonalValues .textareasTable .tableRow:not(.tableHeader) > div:not(:first-child),
    .blueprintReportKPI .textareasTable .tableRow:not(.tableHeader) > div:not(:first-child) {
        border-bottom: 0;
    }

    .blueprintReportPersonalValues .textareasTable .tableRow:not(.tableHeader) > div,
    .blueprintReportKPI .textareasTable .tableRow:not(.tableHeader) > div {
        border-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .blueprintReportCompanyValues .tableRow:not(.tableHeader) > div:first-child {
        border-right: 0;
    }

    .blueprintReportCompanyValues .tableRow:not(.tableHeader) > div {
        border-top: 1px solid rgba(162, 168, 184, 0.5);
    }

    .blueprintReportPersonalValues .textareasTable .tableValue {
        padding-left: 8px;
    }

    .blueprintReportPersonalValues .textareasTable .tableRow:not(.tableHeader) > div:not(:first-child),
    .blueprintReportKPI .tableRow:not(.tableHeader) > div:not(:first-child) {
        border-top: none;
    }

    .blueprintReportPersonalValues .tableRow:last-child > div:nth-child(3),
    .blueprintReportKPI .tableRow:last-child > div:nth-child(3) {
        border-left: none;
    }

}

.blueprintReportCompanyValues .blueprintReportBlockContent .groupTextareaInner {
    height: 100%;
}

.blueprintReportPersonalEffectiveness.blueprintReportBlock .grourTextareasWrap {
    grid-template-columns: 1fr;
    column-gap: 16px;
    row-gap: 16px;
}

@media print {
    .breakBefore {
        page-break-before: always;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        margin: 0;
    }

    .noBreak {
        page-break-inside: avoid !important;
        visibility: visible;
        position: relative;
        display: block !important;
    }

    .tableBdAnalysisQuestionsFull .tableRow.noBreak {
        display: grid !important;
    }

    .blueprintReportKPI .blueprintReportBlockContent:not(:nth-child(2)) {
        page-break-before: always;
        page-break-inside: avoid;
        position: relative;
        display: block !important;
    }

    .blueprintReportBoardTopicsCommitments .blueprintReportBlockContent,
    .blueprintReportNotes .blueprintReportBlockContent {
        page-break-before: auto !important;
        page-break-inside: auto !important;
        display: block !important;
    }

    .blueprintReportBlock .blueprintReportPrintContainer .item {
        display: flex !important;
    }

    div.blueprintReportBlock:not(.avoidBreak) {
        page-break-before: always;
    }

    .blueprintReportPrintContainer {
        padding: 0 16px;
    }

    .blueprintReportBlockSubTitle {
        display: table;
    }

    .blueprintReportBlockContent {
        padding-top: 28px;
    }

    .blueprintReportFinancialPerformance .textareasTable span {
        font-size: 11px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .blueprintReportFinancialPerformance .tableRow > div {
        font-size: var(--small-text-font-size);
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow.tableHeader > div {
        padding-left: 2px;
        padding-right: 2px;
    }

    .blueprintReportYearEndSequence.yearEndSequenceContent .textareasTable span {
        padding-left: 0;
        padding-right: 0;
        font-size: 11px;
    }

    .blueprintReportStrategicAdvantage .groupDetailSubTitle {
        min-height: 48px;
    }

    .blueprintReportStrategicAdvantage .groupDetailSubTitle {
        min-height: 54px;
    }

    .blueprintReportBlock .responseGraphWrap {
        display: block;
    }

    .blueprintReportBlock .responseCategory {
        width: 100%;
    }

    .blueprintReportBlock .responsePriorityPoint span,
    .blueprintReportBlock .responsePerformancePoint span {
        box-shadow: none;
        border: 1px solid var(--triple-text-color);
        z-index: 1000;
    }


    .blueprintReportBlock .ui-slider-handle.ui-state-focus,
    .blueprintReportBlock .ui-slider-handle.ui-state-active,
    .blueprintReportBlock .ui-slider-handle.ui-state-hover,
    .blueprintReportBlock .ui-slider-handle.ui-state-default {
        box-shadow: none !important;
        border: 1px solid var(--triple-text-color) !important;
    }

    .ui-slider.ui-state-disabled .ui-slider-handle,
    .ui-slider.ui-state-disabled .ui-slider-range {
        filter: none !important;
    }

    .blueprintReportBlock .visionSlider {
        background-color: transparent !important;
        border: 1px solid var(--triple-text-color) !important;
    }

    .visionSlider .bgBar .bgBaritem.empty {
        border-right: 1px solid var(--triple-text-color);
    }

    .tableValue {
        background: transparent !important;
    }

    .blueprintReportBlock .discGraphicItem .vbar {
        background: repeating-linear-gradient(to bottom, #fff, rgba(120, 116, 134, 0.2) 1px, #fff 1px, #fff 10%, rgba(120, 116, 134, 0.2) 1px);
    }

    .blueprintReportBlock .discGraphicItem .motivatorsGraphBg {
        background: repeating-linear-gradient(to right, #fff, rgba(120, 116, 134, 0.2) 1px, #fff 1px, #fff 5%, rgba(120, 116, 134, 0.2) 1px);
    }

    .blueprintReportBlock .csf-belong {
        box-shadow: none;
    }

    .blueprintReportBlock .discGraphicItem .vbar .bar .graphNumber,
    .blueprintReportBlock .motivatorsGraphItemNumWrap,
    .blueprintReportBlock .motivatorsGraphItemBarAmount,
    .blueprintReportBlock .motivatorsGraphItemBarLetter {
        box-shadow: none;
        border: 1px solid var(--triple-text-color);
    }

    .tableBdAnalysisQuestions .tableRow > div,
    .bdAnalysisScoreTable .tableHeader > div,
    .reportTable .tableHeader > div {
        font-size: 9px;
    }

    .blueprintReportFinancialPerformance .performanceTablesWrap {
        column-gap: 4px;
        grid-template-columns: 80px repeat(3, minmax(calc((100% - 80px - 12px) / 3), 1fr));
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow.tableHeader > div {
        min-height: 60px;
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow span {
        padding-left: 2px;
        padding-right: 2px;
        font-size: 10px;
    }

    .blueprintReportFinancialPerformance .tableRow > div {
        padding: 4px 2px;
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable .tableRow > div:last-child {
        padding-right: 4px;
    }

    .blueprintReportCompanyValues.blueprintReportBlock .mobileRowTitle,
    .blueprintReportPersonalValues.blueprintReportBlock .mobileRowTitle,
    .blueprintReportYearEndSequence.blueprintReportBlock .mobileRowTitle {
        display: none;
    }

    .blueprintReportFinancialPerformance .mobileRowTitle {
        border-left: 1px solid rgba(162, 168, 184, 0.5);
        border-right: 1px solid rgba(162, 168, 184, 0.5);
        padding-left: 8px;
    }

    .blueprintReportBlockContent .textareasTable .tableValue {
        border: 1px solid #D0D3DB;
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div {
        border-left: none;
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader) > div:first-child {
        border-left: 1px solid rgba(162, 168, 184, 0.5);
    }

    .blueprintReportFinancialPerformance.performanceContent .textareasTable:not(:first-child) .tableRow:not(.tableHeader):not(:nth-child(4)) > div {
        border-top: 0;
    }

    .textareasTable.breakBefore {
        min-height: 100%;
    }

    .blueprintReportDISC {
        padding-bottom: 0;
    }

    .visionColumnsWrap .wysiwyg {
        height: auto !important;
    }

    .visionColumnsWrap {
        display: block;
    }

    .groupTextareaInnerRows {
        row-gap: 32px;
        margin-top: 32px;
    }
}


/* ==========================================================================
              BUSINESS DIAGNOSTIC PAGE
             ========================================================================== */

.businessDiagnosticPageHeading {
    align-items: center;
}

.businessDiagnosticPage .pageHeading {
    width: calc(100% - 271px);
}

.scroll.containerColumn:not(.userMoreMenuWrap) {
    align-items: stretch;
    overflow-y: auto;
    height: 100%;
    padding: 0 24px 16px 24px;
}

.businessDiagnosticGraphWrap {
    display: grid;
    grid-template-columns: 59% 1fr;
    column-gap: 8px;
}

.focusGraphMainWrap {
    padding-top: 16px;
    column-gap: 16px;
}

.focusGraphWrap {
    position: relative;
    width: calc(50% - 13px);
    padding-bottom: 52px;
    padding-left: 55px;
    padding-top: 28px;
}

.focusGraphAxisName {
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
    position: absolute;
    bottom: 0;
    left: 52%;
}

.verticalAxisName {
    left: 3px;
    bottom: 37%;
    transform-origin: 0 0;
    transform: rotate(-90deg);
}

.focusGraphAxisNumbers {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    position: absolute;
    bottom: 20px;
    right: -8px;
    left: 49px;
}

.focusGraphAxisNumbers span {
    width: 14px;
    text-align: center;
}

.verticalAxisNumber {
    left: 26px;
    bottom: 44px;
    right: 16px;
    transform-origin: 0 0;
    transform: rotate(-90deg);
}

.verticalAxisNumber span {
    transform-origin: 0 0;
    transform: rotate(90deg);
    text-align: right;
}

.focusGraphField {
    aspect-ratio: 1 / 1;
    position: relative;

}

.focusGraphField::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: repeating-linear-gradient(to right, transparent, rgba(120, 116, 134, 0.1) 1px, transparent 2px, transparent 10%),
    repeating-linear-gradient(to bottom, transparent, rgba(120, 116, 134, 0.1) 1px, transparent 1px, transparent 10%);
}

.focusGraphField::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(180deg, transparent, transparent calc(50% - 1px), #000000 calc(50% - 1px), transparent calc(50% + 2px), transparent calc(100% - 1px), rgba(120, 116, 134, 0.1) 100%),
    linear-gradient(90deg, transparent, transparent calc(50% - 1px), #000000 calc(50% - 1px), transparent calc(50% + 2px), transparent calc(100% - 1px), rgba(120, 116, 134, 0.1) 100%);
    z-index: 1;
}

.focusGraphPoint {
    position: absolute;
    z-index: 2;
}

.accContainer .jstree-anchor {
    border: 1px solid black;
    padding: 10px;
}

.pointLegend {
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    align-items: stretch;
    padding: 16px 0;
    position: absolute;
    width: 160px;
    left: 50%;
    margin-left: -80px;
    z-index: 5;
}

.pointLegend::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

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

.pointLegendItem {
    display: grid;
    grid-template-columns: 60% 1fr;
}

.pointLegendItem strong {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    color: var(--main-text-color);
    text-align: right;
    margin-right: 3px;
}

.bdCategoriesWrap {
    flex-grow: 1;
    padding-right: 8px;
}

.bdCategory {
    display: grid;
    grid-template-columns: 28px 1fr 32px 32px;
    align-items: center;
    padding: 8px 0 8px 12px;
    cursor: pointer;
}

.bdCategory:hover {
    background: var(--menu-active-color);
    border-radius: 6px;
}

.bdCategory:hover .bdCategoryName {
    color: white;
}

.bdCategory:hover .bdPriorityPoint,
.bdCategory:hover .bdPerformancePoint {
    color: white;
}

.bdCategorySerialNumber {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
}

.bdCategoryName {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    padding-right: 8px;
}

.bdCategory-green .bdCategorySerialNumber {
    background: var(--success-green);
}

.bdCategory-green .bdCategoryName {
    color: var(--success-green);
}

.bdCategory-orange .bdCategorySerialNumber {
    background: #FE6900;
}

.bdCategory-orange .bdCategoryName {
    color: #FE6900;
}

.bdCategory-grey .bdCategorySerialNumber {
    background: #BBB9C2;
}

.bdCategory-grey .bdCategoryName {
    color: #BBB9C2;
}

.bdCategory-red .bdCategorySerialNumber {
    background: var(--warning-red);
}

.bdCategory-red .bdCategoryName {
    color: var(--warning-red);
}

.bdPriorityPoint,
.bdPerformancePoint {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
}

.responseGraphMainWrap {
    padding: 16px 54px 54px 0;
}

.responseGraphWrap {
    align-items: stretch;
    position: relative;
}

.responseCategory {
    display: grid;
    grid-template-columns: 138px 1fr;
    column-gap: 16px;
    align-items: center;
}

.responseCategoryName {
    text-align: right;
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 16px;
}

.responseCategoryAmount {
    row-gap: 2px;
    height: 32px;
    padding-top: 8px;
    position: relative;
    background: repeating-linear-gradient(to right, transparent, rgba(120, 116, 134, 0.2) 1px, transparent 1px, transparent 20%, rgba(120, 116, 134, 0.2) 1px);
}

.responseCategoryAmount::before {
    width: 1px;
    height: 100%;
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(120, 116, 134, 0.1);
}

.responsePriorityPoint,
.responsePerformancePoint {
    position: relative;
    border-radius: 20px;
    height: 8px;
}

.responsePriorityPoint {
    background: #77BFEF;
}

.responsePerformancePoint {
    background: #2BCA92;
}

.responsePriorityPoint span,
.responsePerformancePoint span {
    position: absolute;
    top: -5px;
    left: calc(100% + 2px);
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
    padding: 0px 4px;
    min-width: 16px;
    text-align: center;
    box-sizing: border-box;
}

.responseGraphWrap .hBarAxesNames {
    left: 150px;
    right: -3px;
    bottom: -27px;
}

.responseLegend {
    position: absolute;
    left: 55px;
    right: 0;
    bottom: -60px;
    justify-content: center;
    column-gap: 26px;
}

.responseLegendItem {
    position: relative;
    padding-left: 16px;
}

.responseLegendItemColor {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
    background: #2BCA92;
}

.responseLegendItemColor.priorityColor {
    background: #77BFEF;
}

.responseLegendItemName {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
}

.prioritizationBlock {
    padding-top: 9px;
}

.bdHeadline {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
    padding: 19px 0 16px;
}

.categoriesBlock .bdHeadline {
    padding-bottom: 21px;
    padding-top: 20px;
}

.bdHintWrap {
    padding-bottom: 12px;
}

.hintText {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
    justify-content: flex-start;
}

.orangeHint {
    color: #F3A73B;
    font-weight: 700;
    column-gap: 10px;
}

.bdBlockSm {
    padding: 16px 16px 16px;
    margin-bottom: 8px;
    border-radius: 6px;
    align-items: center;
    column-gap: 8px;
}

.bdBlockLink {
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    line-height: 19px;
}

.bdBlockSmControls a {
    height: 24px;
}

.bdBlockSmControls {
    column-gap: 8px;
}

.bdStatus {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 10px;
    color: #F9F9FB;
    border-radius: 6px;
    padding: 7px 0;
    text-align: center;
    width: 80px;
}


.bdCompletedStatus {
    background: var(--success-green);
}

.bdAvailableStatus {
    background: var(--button-hover-color);
}

.bdInProgressStatus {
    background: #FE6900;
}

.bdNotStartedStatus {
    background: var(--button-disabled-color);
}

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

.bdNotFinalizedStatus {
    background: var(--denim-blue);
}

.bdBlockSmControls .onlyIconBtnSecondary:hover path {
    stroke: white;
    fill: none;
}

.bdBlockSmControls .onlyIconBtnSecondary:hover rect {
    fill: var(--button-hover-color);
}

.bdBlockSmControls .bdCompletedStatus + .onlyIconBtnSecondary:hover path {
    stroke: none;
    fill: white;
}

.modal-content .forgotPasswordWrap {
    min-height: auto;
}

.modal-content .forgotPasswordFormWrap {
    margin: 40px 0;
}

.password-status {
    display: none;
}

.password-status.active {
    display: block;
}

.forgotPasswordFormWrap .hiddenPasswordInput .hiddenPasswordInputIcon.hidePass {
    top: 28px;
}

@media only screen and (max-width: 1200px) {
    .businessDiagnosticGraphWrap {
        grid-template-columns: 50% 1fr;
    }

    .focusGraphMainWrap {
        flex-wrap: wrap;
    }

    .focusGraphWrap {
        width: 100%;
    }
}

@media only screen and (max-width: 1024px) {
    .businessDiagnosticGraphWrap {
        grid-template-columns: 100%;
        row-gap: 8px;
    }

    .focusGraphMainWrap {
        flex-wrap: nowrap;
    }

    .focusGraphWrap {
        width: calc(50% - 4px);
    }

    .responseGraphWrap .hBarAxesNames.bottomNames {
        display: flex;
    }

    .hBarAxesNames span:nth-child(-n+10), .hBarAxesNames span:nth-child(even) {
        display: block;
    }
}

@media only screen and (max-width: 768px) {

    .businessDiagnosticPage .pageHeading {
        width: calc(100% - 48px);
    }

    .reviewAssessmentBtn {
        padding-left: 0;
        padding-right: 0;
        width: 40px;
        min-width: 40px;
    }

    .reviewAssessmentBtn span {
        display: none;
    }

    .businessDiagnosticPageHeading {
        padding-right: 0;
    }

    .businessDiagnosticPage .scroll.containerColumn {
        overflow-y: visible;
        padding: 0 8px 16px 16px;
    }

    .focusGraphMainWrap {
        flex-wrap: wrap;
        padding-top: 0;
    }

    .focusGraphWrap {
        width: 100%;
        padding-left: 24px;
        padding-top: 0;
        margin-right: 8px;
    }

    .bdCategoriesWrap {
        padding: 0;
    }

    .bdCategory {
        grid-template-columns: 28px 1fr 24px 24px;
    }

    .responseGraphMainWrap {
        padding: 0px 0 54px 0;
    }

    .responseCategory {
        grid-template-columns: 100%;
    }

    .responseCategoryName {
        text-align: left;
        background: repeating-linear-gradient(to right, transparent, rgba(120, 116, 134, 0.2) 1px, transparent 1px, transparent 20%, rgba(120, 116, 134, 0.2) 1px);
        width: 100%;
        position: relative;
    }

    .responseCategoryName::before {
        width: 1px;
        height: 100%;
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        background-color: rgba(120, 116, 134, 0.1);
    }

    .responseGraphWrap .hBarAxesNames.bottomNames {
        left: 0;
    }

    .responseLegend {
        left: 0;
    }
}


.prioritizationPage .scroll.containerColumn {
    align-items: stretch;
    overflow-y: scroll;
    height: 100%;
    padding: 16px 24px 16px 24px;
}

.prioritizationStepBlock {
    padding: 17px 18px 16px 16px;
}

.prioritizationStepHeading {
    align-items: center;
}

.prioritizationStepTitleWrap {
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    column-gap: 16px;
}

.prioritizationStepTitleWrap span {
    flex-grow: 1;
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
}

.prioritizationStepBlock .bdStatus {
    padding: 7px 9px;
}

.prioritizationStepWrap {
    align-items: center;
    padding-top: 8px;
    column-gap: 24px;
}

.prioritizationStepInner {
    background: #F8F8FA;
    border-radius: 10px;
    width: 100%;
    height: 8px;
    position: relative;
}

.prioritizationStep {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 22px;
    text-align: right;
}

.step-1 .prioritizationStepInner::after,
.step-2 .prioritizationStepInner::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    width: 50%;
    height: 8px;
    background: var(--menu-active-color);
}

.step-2 .prioritizationStepInner::after {
    width: 100%;
}

.prioritizationAttention {
    padding-top: 15px;
}

.prioritizationAttentionTitle {
    font-weight: 700;
    font-size: var(--small-text-font-size);
    line-height: 15px;
    column-gap: 10px;
    justify-content: flex-start;
    align-items: center;
    color: var(--menu-active-color);
}

.prioritizationAttentionText {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
    width: 75%;
    padding-top: 8px;
}

.prioritizationGraphWrap {
    display: grid;
    grid-template-columns: 70% 1fr;
    align-items: center;
}

.prioritizationStepBlock .horizontalDiagramWrap {
    width: 100%;

}

.prioritizationStepBlock .horizontalDiagramItemWrap {
    column-gap: 8px;
}

.prioritizationStepBlock .horizontalDiagramItemTitle {
    width: 180px;
    margin-right: 0;
}

.prioritizationStepBlock .horizontalDiagramPartsWrap {
    width: calc(100% - 188px);
}

.prioritizationStepBlock .horizontalDiagramWrap .axisNames {
    width: calc(100% - 190px);
}


.prioritizationStepBlock .horizontalDiagramPart {
    border-right: none;
}


.prioritizationStepBlock .horizontalDiagramPart:nth-child(7),
.prioritizationStepBlock .horizontalDiagramPart:nth-child(12),
.prioritizationStepBlock .horizontalDiagramPart:nth-child(17),
.prioritizationStepBlock .horizontalDiagramPart:nth-child(22) {
    border-right: 1px solid white;
}

.prioritizationGraphWrap {
    padding-bottom: 20px;
    column-gap: 24px;
}

.totalScoreWrap {
    align-items: center;
    row-gap: 11px;
    padding-bottom: 91px;
}

.totalScoreText {
    font-weight: 700;
    font-size: var(--title-font-size-md);
    line-height: 24px;
}

.totalScoreBtn {
    background: #BBB9C2;
    border-radius: 6px;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: white;
    padding: 12px 0;
    width: 97px;
    text-align: center;
}

.fullScore {
    background: #039C55;
}

.prioritizationStepControls {
    justify-content: flex-start;
    column-gap: 8px;
    padding-left: 16px;
}

.prioritizationStepControls .btn-icon:hover path {
    fill: white;
}

@media only screen and (max-width: 1300px) {
    .prioritizationStepBlock .horizontalDiagramItemTitle {
        margin-right: 0;
    }
}

@media only screen and (max-width: 1200px) {
    .prioritizationStepBlock .horizontalDiagramItemWrap {
        column-gap: 16px;
    }

    .prioritizationStepBlock .horizontalDiagramPartsWrap {
        width: calc(100% - 188px - 8px);
    }

    .prioritizationStepBlock .horizontalDiagramWrap .axisNames {
        left: calc(3.84615% + 180px);
        width: auto;
    }
}

@media only screen and (max-width: 1024px) {
    .prioritizationGraphWrap {
        grid-template-columns: calc(100% - 48px - 100px) 1fr;
    }

    .prioritizationStepBlock .horizontalDiagramItemTitle {
        width: 130px;
        margin-right: 0;
    }

    .prioritizationStepBlock .horizontalDiagramPartsWrap {
        width: calc(100% - 130px - 16px);
    }

    .prioritizationStepBlock .horizontalDiagramWrap .axisNames {
        left: calc(3.84615% + 133px);
        width: auto;
    }
}

@media only screen and (max-width: 900px) {

    .prioritizationStepBlock .horizontalDiagramItemTitle {
        margin-right: 0;
    }
}

@media only screen and (max-width: 768px) {

    .prioritizationPage .scroll.containerColumn {
        padding: 16px 8px 16px 16px;
        overflow: visible;
    }

    .prioritizationStepBlock {
        padding: 17px 8px 16px 8px;
    }

    .prioritizationAttentionText {
        width: 100%;
    }

    .prioritizationStepHeading {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        row-gap: 16px;
    }

    .prioritizationGraphWrap {
        grid-template-columns: repeat(auto-fill, 100%);
    }

    .prioritizationStepBlock .horizontalDiagramWrap .axisNames {
        left: calc(3.84615% - 8px);
        right: 8px;
        width: auto;
    }

    .prioritizationStepBlock .horizontalDiagramItemTitle {
        width: 100%;
        padding-left: 32px;
    }

    .prioritizationStepBlock .horizontalDiagramPartsWrap {
        width: 100%;
    }

    .prioritizationStepBlock .horizontalDiagramItemWrap {
        padding-right: 16px;
        padding-left: 0;
    }

    .totalScoreWrap {
        padding-top: 24px;
        padding-bottom: 16px;
    }

    .prioritizationStepControls {
        flex-direction: column;
        align-items: center;
        row-gap: 16px;
        padding-left: 0;
    }
}


@media only screen and (max-width: 400px) {
    .prioritizationStepBlock .horizontalDiagramItemTitle {
        padding-left: 16px;
    }

    .prioritizationStepBlock .horizontalDiagramItemWrap {
        padding-left: 8px;
    }

    .prioritizationStepBlock .horizontalDiagramWrap .axisNames {
        left: calc(3.84615%);
    }
}


.prioritizationRadioWrap {
    align-items: stretch;
    row-gap: 16px;
    padding-top: 20px;
    padding-bottom: 48px;
}

.prioritizationRadioInnerWrap {
    display: grid;
    grid-template-columns: 25.7% 120px 1fr;
    align-items: center;
}

.prioritizationRadioHeading {
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
}


@media only screen and (max-width: 1200px) {
    .prioritizationRadioInnerWrap {
        grid-template-columns: 35% 120px 1fr;
    }
}

@media only screen and (max-width: 1024px) {
    .prioritizationRadioInnerWrap {
        grid-template-columns: 45% 120px 1fr;
    }
}

@media only screen and (max-width: 900px) {
    .prioritizationRadioInnerWrap {
        grid-template-columns: 55% 100px 1fr;
    }
}

@media only screen and (max-width: 768px) {
    .prioritizationRadioWrap {
        row-gap: 24px;
    }

    .prioritizationRadioInnerWrap {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 24px;
        row-gap: 8px;
    }

    .prioritizationRadioHeading {
        width: 100%;
    }
}

.bdCompletedStatus {
    background: #039C55;
}

.prioritizationDiagramResult {
    align-items: stretch;
    padding-top: 34px;
    padding-bottom: 52px;
    row-gap: 8px;
}

.prioritizationDiagramResultInner {
    display: grid;
    grid-template-columns: 24px 19.6% 1fr;
    align-items: center;
}

.prioritizationResultNumber {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
}

.prioritizationDiagramResultTitle {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
}

.prioritizationValue {
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: 100px;
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 32px;
    color: var(--secondary-text-color);
    width: auto;
    justify-self: start;
    width: 32px;
    height: 32px;
    text-align: center;
}

.prioritizationHeadingWrap {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
}

.prioritizationRadioResult {
    row-gap: 16px;
    padding-bottom: 24px;
}

.prioritizationStepResultBlock .prioritizationRadioValue {
    color: var(--secondary-text-color);
}

.prioritizationStepResultBlock {
    padding-bottom: 32px;
}

.prioritizationStepResultBlock .prioritizationStepControls {
    justify-content: center;
    padding-left: 0;
}


@media only screen and (max-width: 1200px) {
    .prioritizationDiagramResultInner {
        grid-template-columns: 24px 35% 1fr;
    }
}

@media only screen and (max-width: 1024px) {
    .prioritizationDiagramResultInner {
        grid-template-columns: 24px 50% 1fr;
    }
}

@media only screen and (max-width: 768px) {
    .prioritizationDiagramResultInner {
        grid-template-columns: 24px calc(100% - 24px - 32px) 32px;
    }

}


.categoryStepBlock {
    padding: 17px 18px 16px 17px;
}

.categoryStepBlock .prioritizationStepInner::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 10px;
    width: calc(100% / var(--data-steps) * var(--data-step-number));
    height: 8px;
    background: var(--menu-active-color);
}

.categoryStepBlock .prioritizationRadioWrap {
    padding-top: 11px;
    padding-bottom: 31px;
}

.categoryStepBlock .prioritizationRadioInnerWrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 8px;
}

.categoryStepBlock .prioritizationRadioHeading {
    font-weight: 700;
    font-size: var(--title-font-size-md);
    line-height: 32px;
    padding-bottom: 16px;
}

.categoryStepBlock .prioritizationStepControls {
    padding-left: 0;
}

.categoryStepBlock .prioritizationRadioResult .prioritizationRadioHeading {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
    padding-bottom: 0;
}

.categoryStepResultBlock .prioritizationRadioResult {
    padding-top: 16px;
}

.categoryStepResultBlock .prioritizationRadioValue {
    color: var(--secondary-text-color);
}

.categoryStepResultBlock .prioritizationStepControls {
    justify-content: center;
    padding-left: 0;
}

.prioritizationRadio-error input[type="radio"] {
    border-color: var(--warning-red);
}

.errorMessageWrap {
    justify-content: flex-start;
    align-items: center;
    column-gap: 4px;
    padding-left: 6px;
}

.errorMessage {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
}


/* ==========================================================================
              BUSINESS DIAGNOSTIC ANALYSIS PAGE
             ========================================================================== */

.bdAnalysisPage .tabsWrap {
    margin-top: 30px;
}

.bdAnalysisPage .scroll.containerColumn {
    align-items: stretch;
    overflow-y: scroll;
    height: 100%;
    padding: 0 24px 16px 24px;
}

.bdAnalysisPage .itemBg {
    padding: 10px 16px 32px;
    margin-bottom: 32px;
    align-items: stretch;
}

.bdAnalysisSettings {
    padding-top: 12px;
    justify-content: flex-start;
    column-gap: 16px;
    row-gap: 16px;
    flex-wrap: wrap;

}

.bdAnalysisPage .generalSettingsRadioWrap {
    padding-right: 0;
    min-width: calc(96% / 3 - 16px / 3);
}

.conditionalReportInner {
    column-gap: 8px;
}

.conditionalReportInner .inputWrap {
    width: calc(50% - 4px);
}

@media only screen and (max-width: 1200px) {

    .bdAnalysisSettings {
        flex-direction: column;
        row-gap: 24px;
        padding-top: 24px;
    }

}

@media only screen and (max-width: 768px) {

    .bdAnalysisPage .scroll.containerColumn {
        overflow-y: visible;
        padding: 0 8px 16px 16px;
    }

    .bdAnalysisPage .itemBg {
        padding: 10px 8px 32px;
        margin-bottom: 32px;
        align-items: stretch;
    }

    .conditionalReportInner {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .conditionalReportInner .inputWrap {
        width: 100%;
    }

}


.bd-report .blueprintReportBlock .responseGraphMainWrap {
    padding: 0px 8px 55px 0;
}

.bd-report .itemUserImg {
    height: 100%;
}

.bd-report .blueprintReportBlockContent {
    padding-top: 32px;
}

.bd-report .blueprintReportBlock .bdCategoriesWrap {
    padding-top: 21px;
}

.bd-report .bdCategory {
    grid-template-columns: 28px 1fr 40px 40px;
}

.responseChartColumns {
    column-gap: 128px;
}

.responseChartReport {
    flex-grow: 1;
}

.responseGraphWrap-report .bdCategory,
.responseGraphWrap-report .bdCategoryName-lg {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
    padding: 0;
}

.bd-report .responseGraphWrap-report .bdCategory {
    grid-template-columns: 24px 1fr;
    padding-bottom: 16px;
}

.bd-report .responseGraphWrap-report .bdCategory:hover {
    background: transparent;
    color: inherit;
}

.bd-report .blueprintReportBlock .responseCategory {
    grid-template-columns: 70px 1fr;
}

.bd-report .responseCategoryAmount {
    height: 24px;
    padding-bottom: 8px;
    padding-top: 8px;
}

.bd-report .responseCategory:nth-child(2) .responseCategoryAmount {
    padding-top: 12px;
    height: 28px;
}

.bdCategory-green .bdCategoryName-lg {
    color: var(--success-green);
}

.bdCategory-orange .bdCategoryName-lg {
    color: #FE6900;
}

.bd-report .blueprintReportBlock .responseGraphWrap .hBarAxesNames {
    left: 76px;
    right: -6px;
    bottom: -24px;
}

.bdAnalysisScoreTable {
    width: 27.1%;
    padding-top: 20px;
}

.bdAnalysisScoreTable .tableRow {
    grid-template-columns: repeat(3, calc(100% / 3));
}

.bdAnalysisScoreTable .tableRow > div {
    padding: 0;
    justify-content: center;
}

.bdAnalysisScoreTable .tableRow.tableHeader > div:nth-child(2) {
    padding-left: 0;
}

.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div:first-child,
.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    padding-top: 8px;
    padding-bottom: 8px;
}

.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div:first-child {
    padding-left: 8px;
    border-left: 1px solid rgba(162, 168, 184, 0.5);
}

.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div:first-child span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    padding-right: 8px;
}

.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div:last-child {
    padding-right: 8px;
}

.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div:last-child span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding-left: 8px;
}

.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div {
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: var(--main-text-color);
}

.bdAnalysisScoreTable .tableRow:not(.tableHeader) > div span {
    width: 100%;
    text-align: center;
    background: var(--manual-bg);
    height: 100%;
    line-height: 38px;
}

.tableBdAnalysisQuestions {
    padding-bottom: 60px;
}

.tableBdAnalysisQuestions .tableRow {
    grid-template-columns: 40px 69% repeat(auto-fit, minmax(calc((31% - 40px) / 3), 1fr));
}

.tableBdAnalysisQuestions .tableRow.tableHeader > div:nth-child(2) {
    padding-left: 8px;
    justify-content: flex-start;
}


.tableBdAnalysisQuestions .tableRow.tableHeader > div {
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
}

.tableBdAnalysisQuestions {
    --strength-color: #4DB990;
    --neutral-color: #E39E37;
    --weakness-color: #BBB9C2;
}


.tableBdAnalysisQuestions .tableRow.tableHeader > div:nth-child(3) {
    background: var(--weakness-color);
}

.tableBdAnalysisQuestions .tableRow.tableHeader > div:nth-child(4) {
    background: var(--neutral-color);
}

.tableBdAnalysisQuestions .tableRow.tableHeader > div:nth-child(5) {
    background: var(--strength-color);
}

.tableBdAnalysisQuestions .tableRow:nth-child(2) > div {
    min-height: 48px;
    padding: 14px 4px 9px;
}

.tableBdAnalysisQuestions .tableRow > div {
    min-height: 40px;
    padding: 6px 4px 9px;
}

.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    border-bottom: 1px solid rgba(162, 168, 184, 0.5);
}

.tableBdAnalysisQuestions .tableRow > div:nth-child(2) {
    padding-left: 8px;
}

.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:first-child {
    color: white;
    border-bottom: 1px solid var(--main-text-color);
    justify-content: center;
    align-items: start;
}

.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(3) {
    color: var(--weakness-color);
    justify-content: center;
}

.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(4) {
    color: var(--neutral-color);
    justify-content: center;
}

.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(5) {
    color: var(--strength-color);
    justify-content: center;
}

.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(3) span,
.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(4) span,
.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(5) span {
    display: none;
    position: relative;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
    padding-left: 16px;
}

.tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div span.selectedMark {
    display: block;
}

.tableBdAnalysisQuestions .tableRow > div span.selectedMark::before {
    content: "";
    width: 8px;
    border-radius: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0;
}

.tableBdAnalysisQuestions .tableRow > div:nth-child(3) span.selectedMark::before {
    background: var(--weakness-color);
}

.tableBdAnalysisQuestions .tableRow > div:nth-child(4) span.selectedMark::before {
    background: var(--neutral-color);
}

.tableBdAnalysisQuestions .tableRow > div:nth-child(5) span.selectedMark::before {
    background: var(--strength-color);
}

@media print {
    .bdAnalysisScoreTable {
        width: 34%;
        padding-top: 20px;
    }

    .responseChartColumns {
        column-gap: 100px;
    }
}

@media only screen and (max-width: 1200px) {
    .bd-report .blueprintReportMainHeading,
    .bd-full-report .blueprintReportMainHeading {
        text-align: center;
    }
}

@media only screen and (max-width: 1024px) {
    .bd-report .blueprintReportMainHeading {
        text-align: center;
    }

    .bd-report .tableHeader > div:nth-child(2) {
        border-top-left-radius: 0;
    }

    .bd-report .tableRow:last-child > div:nth-child(2) {
        border-left: none;
        border-bottom-left-radius: 0;
    }

    .bd-report .tableRow:last-child > div:first-child {
        border-bottom: 1px solid rgba(162, 168, 184, 0.5);
    }

    .bdAnalysisScoreTable {
        width: 34%;
        padding-top: 20px;
    }

    .responseChartColumns {
        column-gap: 100px;
    }

    .tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:first-child {
        background: var(--main-text-color);
    }
}

@media only screen and (max-width: 768px) {
    .responseChartColumns {
        flex-direction: column;
        align-items: stretch;
    }

    .bdAnalysisScoreTable {
        padding-top: 0;
        padding-bottom: 16px;
        width: 100%;
    }

    .bdAnalysisScoreTable .tableRow.tableHeader > div span,
    .tableBdAnalysisQuestions .tableRow.tableHeader > div span {
        display: inline;
    }

    .tableBdAnalysisQuestions .tableRow {
        grid-template-columns: 20px 1fr 20px 20px 20px;
    }

    .tableBdAnalysisQuestions .tableRow.tableHeader > div:nth-child(3) span,
    .tableBdAnalysisQuestions .tableRow.tableHeader > div:nth-child(4) span,
    .tableBdAnalysisQuestions .tableRow.tableHeader > div:nth-child(5) span {
        display: none;
    }

    .tableBdAnalysisQuestions .tableRow > div span.selectedMark::before {
        display: none;
    }

    .tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(3) span,
    .tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(4) span,
    .tableBdAnalysisQuestions .tableRow:not(.tableHeader) > div:nth-child(5) span {
        padding-left: 0;
    }

}


/* ==========================================================================
              Business Diagnostic Full Report
             ========================================================================== */

.bd-full-report .blueprintReportBlockContent {
    padding-top: 32px;
}

.topPrioritiesReviewWrap {
    align-items: center;
    row-gap: 8px;
}

.topPriorityItem {
    border: 1px solid #4DB990;
    padding: 12px 8px;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 14px;
    text-align: center;
    color: #4DB990;
    width: 46%;
}

.topPriorityItem:nth-child(2) {
    border: 1px solid #E39E37;
    color: #E39E37;
    width: 37%;
}

.topPriorityItem:nth-child(3) {
    border: 1px solid #BBB9C2;
    color: #BBB9C2;
    width: 31%;
}

.reportsColumns {
    column-gap: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
}

.reportsColumn {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: start;
    row-gap: 8px;
}

.alignTable .reportsColumn {
    grid-template-rows: auto 1fr;
    row-gap: 8px;
}

.reportsColumn > .reportTitle {
    height: auto;
}

.reportsColumn > .reportTable {
    justify-self: end;
}

.reportTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 24px;
}

.reportTable {
    width: 100%;
}

.reportTable .tableRow {
    grid-template-columns: 240px repeat(auto-fit, minmax(calc((100% - 240px) / 3), 1fr));
}

.reportTable .tableHeader > div {
    padding-left: 16px;
}

.reportTable .tableRow:not(.tableHeader) > div:not(:first-child) {
    color: var(--secondary-text-color);
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 14px;
    padding-left: 16px;
}


.reportTable .tableRow:not(.tableHeader) > div:first-child {
    border-bottom: 1px solid var(--main-text-color);
}

.reportTable .tableRow:not(.tableHeader) > div {
    border-bottom: 1px solid #D0D3DB;
    min-height: 48px;
}

.reportTable .tableRow:not(.tableHeader):not(:nth-child(2)) > div {
    min-height: 40px;
}

.reportTable .tableRow:nth-child(2) > div {
    padding-top: 10px;
}

.reportTable .tableRow > div:not(:first-child) {
    border-right: 1px solid #D0D3DB;
}

.reportTable .tableHeader > div:not(:first-child) {
    border-right: 1px solid #3B68E0;
}

.reportFullWidthTable {
    padding: 32px 0;

}

.reportTotalTable {
    margin-top: 8px;
}

.reportTotalTable .tableRow {
    grid-template-columns: 240px repeat(auto-fit, minmax(calc((82.7% - 240px) / 4), 1fr)) 17.3%;
}

.bd-full-report .blueprintReportBusinessDiagnostic .blueprintReportBlockContent {
    padding-top: 5px;
}

.bd-full-report .bdCategory {
    grid-template-columns: 28px 1fr 40px 40px;
}

.underperformingTable .tableRow {
    grid-template-columns: 240px repeat(auto-fit, minmax(calc((100% - 240px) / 2), 1fr));
}

.underperformingTablesWrap {
    padding-bottom: 32px;
}

#responseChartFull .responseCategory {
    grid-template-columns: 70px 1fr;
}

#responseChartFull .responseGraphWrap-report .bdCategory:hover {
    background: transparent;
    color: inherit;
}

#responseChartFull .responseGraphWrap-report .bdCategory {
    grid-template-columns: 24px 1fr;
    padding-bottom: 16px;
}

#responseChartFull .responseCategoryAmount {
    height: 24px;
    padding-bottom: 8px;
    padding-top: 8px;
}

#responseChartFull .responseCategory:nth-child(2) .responseCategoryAmount {
    padding-top: 12px;
    height: 28px;
}

#responseChartFull .responseGraphWrap .hBarAxesNames {
    left: 76px;
    right: -6px;
    bottom: -24px;
}

#responseChartFull .responseGraphMainWrap {
    padding-bottom: 54px;
}

.tableBdAnalysisQuestionsFull {
    margin-bottom: 32px;
}

.tableBdAnalysisQuestionsFull .tableRow {
    grid-template-columns: 40px 1fr;
    align-items: start;
}

.tableBdAnalysisQuestionsFull .tableRow.tableHeader {
    grid-template-columns: 40px 1fr minmax(48px, 16%);
    align-items: start;

}

.tableRow > .tableSubRowWrap > .tableSubRow {
    display: grid;
    grid-template-columns: 1fr minmax(48px, 16%);
    align-items: center;
    column-gap: 24px;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > .tableSubRowWrap {
    flex-direction: column;
    align-items: stretch !important;
    row-gap: 0 !important;
}

.tableBdAnalysisQuestionsFull .tableRow.tableHeader > div:nth-child(2) {
    padding-left: 8px;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > div {
    padding-top: 12px;
    padding-bottom: 11px;
    padding-left: 8px;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > div:first-child {
    padding-top: 20px;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > div {
    align-items: flex-start;
    border-bottom: 1px solid #D0D3DB;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > div:first-child {
    border-bottom: 1px solid var(--main-text-color);
    justify-content: center;
    padding-left: 2px;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > div:not(:first-child) {
    color: var(--secondary-text-color);
    align-items: flex-start;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > div:not(:first-child) span {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 25px;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow:not(:first-child) div:first-child span {
    padding-left: 16px;
    padding: 3px 16px;
    display: inline-block;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:first-child span.selectedMark {
    background: #3B68E0;
    color: var(--button-text-color);
    border-radius: 6px;
}

.tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) strong {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--main-text-color);
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:last-child {
    padding-left: 6px;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:last-child span {
    display: block;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: transparent;
    color: var(--secondary-text-color);
    text-align: center;
    border-radius: 6px;
    line-height: 32px;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:last-child span.selectedMark {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: #3B68E0;
    color: var(--button-text-color);
}

.bd-custom-report {
    row-gap: 8px;
}

.bd-custom-report > div.itemBg {
    width: 100%;
    margin-bottom: 0;
}

.bd-custom-report .selectComponentsCheckboxesWrap {
    grid-template-columns: 50% 50%;
    gap: 8px;
}

.advanced-items {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    padding-top: 8px;
}

.report-checkbox-wrap {
    align-items: stretch;
    padding-top: 16px;
}

.report-checkbox-wrap > div:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.report-checkbox-labels {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#conditional {
    margin-bottom: 16px;
}

.bd-custom-report .generalSettingsWrap {
    justify-content: flex-start;
    padding-left: 0;
}

@media print {
    .reportTable .tableRow {
        grid-template-columns: 140px repeat(auto-fit, minmax(calc((100% - 140px) / 3), 1fr));
    }

    .reportTotalTable .tableRow {
        grid-template-columns: 240px repeat(auto-fit, minmax(calc((82.7% - 240px) / 4), 1fr)) 17.3%;
    }

    .underperformingTable .tableRow {
        grid-template-columns: 140px repeat(auto-fit, minmax(calc((100% - 140px) / 2), 1fr));
    }
}


@media only screen and (max-width: 1024px) {
    .bd-full-report .blueprintReportMainHeading {
        text-align: center;
    }

    .bd-full-report .tableHeader > div:nth-child(2) {
        border-top-left-radius: 0;
    }

    .bd-full-report .tableRow:last-child > div:nth-child(2) {
        border-left: none;
        border-bottom-left-radius: 0;
    }

    .bd-full-report .tableRow:last-child > div:first-child {
        border-bottom: 1px solid rgba(162, 168, 184, 0.5);
    }


    .tableBdAnalysisQuestionsFull .tableRow:not(.tableHeader) > div:first-child,
    .reportTable .tableRow:not(.tableHeader) > div:first-child {
        background: var(--main-text-color);
    }

    .reportTable .tableRow {
        grid-template-columns: 170px repeat(auto-fit, minmax(calc((100% - 170px) / 3), 1fr));
    }

    .reportTotalTable .tableRow {
        grid-template-columns: 200px repeat(auto-fit, minmax(calc((82.7% - 200px) / 4), 1fr)) 17.3%;
    }

    .reportTable .tableRow > div:first-child {
        padding-left: 8px;
    }
}

@media only screen and (max-width: 768px) {

    .topPriorityItem {
        width: 80%;
    }

    .topPriorityItem:nth-child(2) {
        border: 1px solid #E39E37;
        color: #E39E37;
        width: 72%;
    }

    .topPriorityItem:nth-child(3) {
        border: 1px solid #BBB9C2;
        color: #BBB9C2;
        width: 65%;
    }

    .bdAnalysisScoreTable .tableRow.tableHeader > div span,
    .tableBdAnalysisQuestionsFull .tableRow.tableHeader > div span {
        display: inline;
    }


    .tableBdAnalysisQuestionsFull .tableRow {
        grid-template-columns: 20px 1fr;
    }

    .tableBdAnalysisQuestionsFull .tableRow.tableHeader {
        grid-template-columns: 20px 1fr minmax(50px, 16%);
    }

    .tableRow > .tableSubRowWrap > .tableSubRow {
        column-gap: 0;
    }

    .reportsColumns {
        row-gap: 16px;
        grid-template-columns: 1fr;
    }

    .reportTable .tableRow {
        grid-template-columns: 120px repeat(auto-fit, minmax(calc((100% - 120px) / 3), 1fr));
    }

    .reportTable .tableRow > div:first-child {
        overflow: visible;
        line-height: 16px;
    }

    .reportTable .tableRow.tableHeader > div span {
        display: block;
    }

    .reportTotalTable .tableRow {
        grid-template-columns: 120px repeat(auto-fit, minmax(calc((82.7% - 120px) / 5), 1fr));
    }

    .reportTotalTable .tableRow.tableHeader > div span {
        display: none;
    }

    .reportTotalTable .tableRow:not(.tableHeader) > div:not(:first-child) {
        padding-left: 4px;
    }
}


.topPrioritiesReviewWrapper {
    flex-grow: 1;
}

.topPriorityHeader {
    text-align: center;
    margin-bottom: 16px;
}

.topPrioritiesReviewWrapper .topPriorityItem {
    width: 66%;
}

.topPrioritiesReviewWrapper .topPriorityItem:nth-child(2) {
    width: 57%;
}

.topPrioritiesReviewWrapper .topPriorityItem:nth-child(3) {
    width: 46%;
}

.userCompanyResponseChart .responseCategoryAmount {
    height: 64px;
    row-gap: 8px;
}

.blueprintReportBlock .userCompanyResponseChart .responseGraphWrap {
    row-gap: 8px;
}

.responsePriorityPoint.companyPriorityPoint,
.companyPriorityPointColor {
    background: #FE6900;
}

.responsePriorityPoint.companyPerforamce,
.companyPerforamceColor {
    background: #9A8AEE;
}

.memberPriorityPointColor {
    background: #77BFEF;
}

.levelsOfImportanceTable.table .tableRow {
    grid-template-columns: 200px repeat(auto-fit, minmax(calc((100% - 200px) / 10), 1fr));
}

.levelsOfImportanceTable .tableRow:first-child > div:last-child {
    border-top-right-radius: 6px;
}

.levelsOfImportanceTable .tableRow:first-child > div:first-child {
    border-top-left-radius: 6px;
}

.levelsOfImportanceTable.reportTable .tableRow:first-child > div {
    border-top: 1px solid #D0D3DB;
}


.levelsOfImportanceTable .tableRow.tableHeader > div:first-child,
.levelsOfImportanceTable .tableRow.tableHeader > div:last-child {
    border-radius: 0;
}

.levelsOfImportanceTable .tableRow.tableHeader > div {
    font-size: var(--small-text-font-size);
    text-align: center;
}

.levelsOfImportanceTable .tableRow.tableHeader > div:not(:first-child) {
    padding-left: 0;
    padding-right: 0;
}

.levelsOfImportanceTable .tableRow.tableHeader div {
    min-height: 100px;
}

.levelsOfImportanceTable .tableRow.tableHeader div span,
.levelsOfImportanceTable .tableRow.tableHeader div:first-child span {
    rotate: -45deg;
    text-align: center;
    width: 100%;
}

.table-special-interests.levelsOfImportanceTable.table .tableRow {
    grid-template-columns: 121px repeat(auto-fit, minmax(calc((100% - 200px) / 11), 1fr));
}

.table-special-interests {
    margin-bottom: 32px;
}

@media print {
    .levelsOfImportanceTable .tableRow.tableHeader > div {
        font-size: 10px;
    }

    .levelsOfImportanceTable.table .tableRow {
        grid-template-columns: 100px repeat(auto-fit, minmax(calc((100% - 100px) / 10), 1fr));
    }

    .tableRow > div:first-child {
        font-size: 10px;
        padding-left: 8px;
    }

    .table-special-interests.levelsOfImportanceTable.table .tableRow {
        grid-template-columns: 100px repeat(auto-fit, minmax(calc((100% - 200px) / 11), 1fr));
    }

    .topPrioritiesReviewWrapper:first-child {
        margin-bottom: 16px;
    }
}

/* ==========================================================================
              DOCUMENT LIBRARIES PAGE
             ========================================================================== */

.documentLibrariesPage {
    width: 100%;
}

.documentLibrariesPage .scroll.containerColumn {
    align-items: stretch;
    overflow-y: scroll;
    height: 100%;
    padding: 0 8px 16px 24px;
}

.documentLibrariesControls {
    padding: 13px 24px 0 24px;
    column-gap: 8px;
    align-items: center;
    width: 100%;
}

.documentLibrariesSearch {
    align-items: center;
    justify-content: flex-start;
    column-gap: 8px;
    flex-grow: 1;
}

.documentLibrariesSearch .inputWrap {
    width: 52.2%;
}

.documentLibrariesSearch .checkbox {
    column-gap: 8px;
    margin-top: 19px;
}

.documentLibrariesControls .itemControlGroup {
    margin-top: 22px;
}

.documentLibrariesControls .onlyIconBtnSecondary:active path:not(:first-child),
.documentLibrariesControls .onlyIconBtnSecondary.active path:not(:first-child) {
    fill: var(--button-text-color);
}

.documentLibrariesControls .onlyIconBtnSecondary:active path:first-child,
.documentLibrariesControls .onlyIconBtnSecondary.active path:first-child {
    fill: var(--button-active-color);
}

.documentLibrariesControls .onlyIconBtnSecondary:hover path:not(:first-child) {
    fill: var(--button-text-color);
}

.documentLibrariesControls .onlyIconBtnSecondary:hover path:first-child {
    fill: var(--button-hover-color);
}

.documentsList {

}

.documentsList.listView {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.documentsList.gridView {
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(auto-fill, calc(100% / 4 - 8px * 3 / 4));
    grid-template-rows: auto;
}

.documentsListItem {
    display: flex;
    flex-direction: row;
    column-gap: 11px;
    align-items: center;
    padding: 15px 16px 14px 12px;
    background: #FFFFFF;
    border: 1px solid #ffffff;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    position: relative;
}

.folderItem.documentsListItem {
    grid-template-columns: 48px 1fr auto;
}

.gridView .documentsListItem {
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-items: flex-start;
}

.documentsListItem .folderIcon {
    width: 100%;
}

.gridView .documentsListItem .folderIcon img {
    justify-self: center;
    width: 50%;
}


.documentsListItem .documentImgWrap {
    justify-self: center;
    min-height: 75px;
    max-height: 80px;
    width: 100%;
}

.gridView .documentImgWrap {
    justify-self: center;
    min-height: 200px;
    max-height: 200px;
    width: 100%;
}

.listView .documentImgWrap {
    max-width: 48px;
}

.gridView .documentImgWrapper {
    width: 100%;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    overflow: hidden;
}

.gridView .documentImgWrapper img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.listView .documentImgWrapper img {
    width: 48px;
    height: 80px;
    object-fit: cover;
}

.documentsListItem:hover {
    border: 1px solid #3264E8;
}

.gridView .library-extension {
    position: absolute;
    top: 16px;
    left: 16px;
}

.documentsName {
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    line-height: 24px;
    color: var(--main-text-color);
}

.gridView .documentsName {
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 1.6em; /* I needed this to get it to work */
    overflow: hidden;
    max-width: calc(100%);
    min-height: 48px;
}

.greedDocumentNameExt {
    column-gap: 8px;
    width: 100%;
    margin-top: 16px;
    justify-content: flex-start;
}

.listView .greedDocumentNameExt {
    margin-top: 0;

}

.listView .searchGreedDocumentName {
    padding-bottom: 24px;
    min-height: 48px;
}

.listView .file-parent-path {
    position: absolute;
    left: 70px;
    bottom: 24px;
    width: calc(100% - 48px - 8px - 150px - 32px - 52px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 8px;
}

.gridView .file-parent-path {
    width: calc(100% - 100px - 8px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    column-gap: 8px;
}

.listView .file-item-text-title {
    width: calc(100% - 28px);
    display: block;
}

.gridView .modifiedRow {
    width: calc(100%);
    column-gap: 8px;
    min-height: 47px;

}

.modifiedTextWrap {
    column-gap: 8px;
    align-items: center;
    line-height: 20px;
}

.documentInfo {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
    align-items: flex-end;
    row-gap: 8px;
}

.gridView .documentInfo {
    align-items: flex-start;
    line-height: 20px;
}

.documentInfo span {
    white-space: nowrap;
}

.gridView .downloadDocumentButton {
    position: absolute;
    top: 16px;
    right: 16px;
}

.listView .downloadDocumentButton {
    margin-top: 8px;
    margin-right: 16px;
}

.downloadDocumentButton:hover path {
    fill: #ffffff;
}

.file-parent-path {
    text-align: left;
    line-height: 1;
}

.file-parent-path span {
    line-height: 1;
    height: 20px;
}

.file-parent-path img {
    width: 20px;
    height: 20px;
    min-width: 20px;
}


.file-parent-path .file-item-text-title {
    line-height: 20px;
}

.greedDocumentName {
    align-items: flex-start;
    flex-grow: 1;
}

.gridView .greedDocumentName {
    justify-content: flex-start;
    width: 100%;
}

@media only screen and (min-width: 1600px) {
    .documentsList.gridView {
        grid-template-columns: repeat(auto-fill, calc(100% / 5 - 8px * 4 / 5));
    }
}

@media only screen and (max-width: 1400px) {
    .documentsList.gridView {
        grid-template-columns: repeat(auto-fill, calc(100% / 3 - 8px * 2 / 3));
    }
}

@media only screen and (max-width: 1200px) {
    .documentsList.gridView {
        grid-template-columns: repeat(auto-fill, calc(100% / 2 - 8px * 1 / 2));
    }
}


@media only screen and (max-width: 1024px) {
    .documentsList.gridView {
        grid-template-columns: repeat(auto-fill, calc(100% / 2 - 8px * 1 / 2));
    }
}

@media only screen and (max-width: 991px) {
    .documentsList.gridView {
        grid-template-columns: repeat(auto-fill, 100%);
    }
}


@media only screen and (max-width: 768px) {

    .documentLibrariesPage .contentWrap {
        overflow-y: visible;
        height: 100% !important;
    }

    .documentLibrariesPage .scroll.containerColumn {
        overflow-y: visible;
        height: 100%;
        padding: 0 8px 16px 16px;
    }

    .documentLibrariesControls {
        align-items: flex-start;
        padding: 13px 8px 8px 16px;
        column-gap: 16px;
    }

    .documentLibrariesSearch {
        flex-direction: column;
        align-items: flex-start;
    }

    .documentLibrariesSearch .inputWrap {
        width: 100%;
    }

    .documentsListItem {
        grid-template-columns: 48px 1fr 24px;
    }

    .listView .documentInfo {
        display: none;
    }

    .documentLibrariesControls .itemControlGroup {
        height: 24px;
        margin-top: 18px;
    }

    .acceleratorBoardsPage .listView .documentsListItem {
        grid-template-columns: 48px 1fr 24px;
    }

    .listView .file-parent-path {
        width: calc(100% - 48px - 8px - 52px);
    }

    .listView .downloadDocumentButton {
        margin-top: 8px;
        margin-right: -8px;
    }
}

/* ==========================================================================
              FACILITATOR NOTES PAGE
             ========================================================================== */

.facilitatorNotesTabs {
    padding-top: 30px;
}


.tabsWithScroll.tabsWrap {
    height: 59px;
}

.tabsWithScroll .tabs {
    padding-bottom: 6px;
}

.tabsWithScroll.tabsWrap:after {
    display: none;
}

.tabsWithScroll.tabsWrap:before {
    content: "";
    position: absolute;
    bottom: 2px;
    right: -1px;
    width: 50px;
    top: 0;
    background: linear-gradient(90deg, rgba(249, 249, 251, 0) 0%, rgba(249, 249, 251, 0.28) 16%, rgba(249, 249, 251, 0.3) 17%, rgba(249, 249, 251, 0.59) 38%, rgba(249, 249, 251, 0.8) 67%, rgba(249, 249, 251, 1) 100%);
    z-index: 1;
}

.tabsWithScroll .tab:last-child {
    padding-right: 48px;
}

.tabsWithScroll .tab:last-child:after {
    width: calc(100% - 40px);
}

.facilitatorNotesPage .scroll.containerColumn {
    align-items: stretch;
    overflow-y: scroll;
    height: 100%;
    padding: 0 24px 16px 24px;
}


.facilitatorInfo {
    column-gap: 16px;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 16px;
}

.facilitatorName {
    font-weight: 700;
    font-size: var(--title-font-size-sm);
    line-height: 24px;
}

.fnBlock {
    padding: 19px 16px 32px;
    margin-bottom: 32px;
    row-gap: 12px;
    align-items: stretch;
}

.threeColumnsWrap,
.twoColumnsWrap {
    column-gap: 16px;
    row-gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.threeColumnsWrap > div {
    width: calc(100% / 3 - 16px * 2 / 3);
    column-gap: 16px;
}

.threeColumnsWrap > div.containerRow {
    justify-content: flex-start;
}

.threeColumnsWrap > div.containerRow > div {
    width: calc(100% / 2 - 16px / 2);
}

.threeColumnsWrap > .twoThirdCell {
    width: calc(100% / 3 * 2 - 8px);
    column-gap: 16px;
}

.facilitatorNotesPage .iti--allow-dropdown input,
.facilitatorNotesPage .iti--allow-dropdown input[type=tel],
.facilitatorNotesPage .iti--allow-dropdown input[type=text],
.facilitatorNotesPage .iti--separate-dial-code input,
.facilitatorNotesPage .iti--separate-dial-code input[type=tel],
.facilitatorNotesPage .iti--separate-dial-code input[type=text] {
    padding-left: 70px;
}

.twoColumnsWrap > div {
    width: calc(100% / 2 - 16px * 1 / 2);
    column-gap: 16px;
}

.fnBlock textarea {
    height: 160px;
}

.fnBlockTitle {
    font-weight: 700;
    font-size: var(--title-font-size-sm);
    line-height: 24px;
    padding-left: 8px;
}

.fnBlock .textareasTable {
    padding-top: 0;
    padding-bottom: 16px;
}

.fnBlock .textareasTable .tableRow {
    grid-template-columns: 191px repeat(auto-fit, minmax(calc((100% - 191px) / 4), 1fr));
}

.fnBlock .textareasTable .tableRow.tableHeader > div,
.fnBlock .textareasTable .tableRow > div {
    min-height: 40px;
}

.fnBlock .textareasTable .tableRow.tableHeader > div {
    padding-left: 16px;
}

.fnBlock .textareasTable .tableValue {
    min-height: 40px;
    background: var(--manual-bg);
    padding: 0;
    align-items: center;
    padding-left: 0;
}

.fnBlock .tableRow:nth-child(3) > div {
    padding-top: 8px;
}

.fnBlock .tableRow:last-child > div {
    padding-bottom: 8px;
}

.fnBlock .textareasTable .tableRow:not(.tableHeader) > div:nth-child(3) {
    padding-left: 8px;
}

.fnBlock .textareasTable .tableRow:not(.tableHeader) > div:last-child {
    padding-right: 8px;
}

.fnBlock .textareasTable input {
    padding: 7px 4px 7px 16px;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    min-height: 40px;
    max-height: 40px;
    height: 40px;
    overflow: auto;
    border-radius: 6px;
    box-sizing: border-box;
    border: none;
    width: 100%;
    color: var(--secondary-text-color);
    background: transparent;
    outline: 0 none;
}

.fileAttachementsTab .fnBlock,
.notesTab .fnBlock {
    padding-top: 16px;
    padding-bottom: 28px;
}

.fnAddAttachmentBlock {
    align-items: stretch;
    row-gap: 14px;
}

.fnAddAttachmentBlockBtn {
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 8px;
}

.fnAddAttachmentBlockBtn .form-group,
.submitFacilitatorNotes {
    width: auto;
}

.fnAttachmentsBlock {
    padding-left: 16px;
}

.fnAttachmentsBlock .attachedFiles {
    padding-top: 32px;
}

.fnBlock .searchWrap {
    padding-top: 13px;
}

.fnBlock .searchWrap.inputWrap {
    width: 50%;
    position: relative;
}

.facilitatorNotes {
    padding-top: 16px;
}

.threeColumnsWrap > form.fnAddAttachmentBlock {
    width: calc(100% / 3 - 16px * 2 / 3);
    column-gap: 16px;
}

.facilitatorNoteItem {
    width: 100%;
    padding: 8px 6px 8px 8px;
    background-color: var(--button-text-color);
    box-shadow: 0px 5px 20px rgb(0 0 0 / 5%);
    border-radius: 6px;
    margin-bottom: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 8px;
}

.facilitatorNoteItemTextWrap {
    align-items: stretch;
    flex-grow: 1;
}

.facilitatorNoteItemTitle {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 20px;
    color: var(--main-text-color);
}

.facilitatorNoteItemText {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    padding-top: 3px;

    display: none;
}

.toggleFacilitatorNote {
    width: 32px;
    min-width: 32px;
    height: 24px;
}

.toggleFacilitatorNote:hover path {
    fill: var(--button-hover-color);
}

.facilitatorNoteItem.open .toggleFacilitatorNote svg {
    transform: rotate(180deg);
}

.facilitatorNoteItem.open .facilitatorNoteItemText {
    display: block;
}


@media only screen and (min-width: 1200px) and (max-width: 1300px) {
    .mobileRowTitle {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
    .fnBlock .textareasTable .tableRow > div:first-child {
        display: none;
    }

    .fnBlock .textareasTable .tableRow {
        grid-template-columns: repeat(auto-fit, minmax(calc((100%) / 4), 1fr));
    }

    .fnBlock .textareasTable .tableRow:not(.tableHeader) > div:nth-child(3) {
        border-left: 1px solid rgba(162, 168, 184, 0.5);
    }

    .fnBlock .textareasTable .tableRow:last-child > div:nth-child(3) {
        border-bottom-left-radius: 6px;
    }

    .fnBlock .textareasTable .tableHeader > div:nth-child(2) {
        border-top-left-radius: 6px;
    }
}

@media only screen and (max-width: 1024px) {
    .threeColumnsWrap > div {
        width: calc(100% / 2 - 16px * 1 / 2);
    }

    .threeColumnsWrap > .twoThirdCell {
        width: calc(100% / 2 - 8px);
    }

    .threeColumnsWrap > div.fnAddAttachmentBlock,
    .threeColumnsWrap > div.fnAttachmentsBlock {
        width: 100%;
    }

    .threeColumnsWrap > div.fnAttachmentsBlock {
        padding-left: 0;
        padding-top: 16px;
    }

    .threeColumnsWrap > form.fnAddAttachmentBlock {
        width: 100%;
        column-gap: 16px;
    }
}

@media only screen and (max-width: 768px) {

    .facilitatorNotesPage .scroll.containerColumn {
        overflow-y: visible;
        padding: 0 8px 16px 16px;
    }

    .facilitatorNoteItemText {
        margin-right: -100px;
    }

    .fnBlock .textareasTable .tableRow {
        grid-template-columns: 125px 1fr;
    }

    .fnBlock .textareasTable .tableRow:not(.tableHeader) > div:nth-child(3) {
        border: none;
    }

    .fnBlock .textareasTable .tableRow:not(.tableHeader) > div:last-child {
        padding-right: 4px;
    }

    .fnBlock .textareasTable .tableRow:not(.tableHeader) > div:nth-child(3) {
        padding-left: 4px;
    }

    .fnBlock .searchWrap.inputWrap {
        width: 100%;
    }
}

@media only screen and (max-width: 500px) {
    .threeColumnsWrap > div {
        width: calc(100%);
    }

    .threeColumnsWrap > .twoThirdCell {
        width: calc(100%);
    }

    .twoColumnsWrap > div {
        width: 100%;
    }
}


/* ==========================================================================
              LOGIN PAGE
             ========================================================================== */

.mainLoginWrap {
    height: 100vh;
}

.mainLoginLeftPanel {
    min-height: 100%;
    width: 50%;
    background: var(--denim-blue);
    color: var(--manual-bg);
    display: grid;
    justify-content: end;
    padding: 0 72px;
}

.mainLoginLeftPanelInner {
    min-height: 100%;
    display: grid;
    align-items: center;
    grid-template-rows: minmax(min-content, 1fr)  minmax(78px, min-content);
}

.loginLogo {
    display: grid;
    justify-content: center;
    align-items: end;
    padding-bottom: 11px;
}

.loginHelloText {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 48px;
    display: grid;
    justify-content: center;
    align-items: end;
    text-align: center;
}

.loginImg {
    text-align: center;
    justify-content: center;
    align-items: start;
    overflow: hidden;
}

.loginHelloSlogan {
    font-weight: 500;
    font-size: var(--main-font-size-lg);
    text-align: center;
}

.mainLoginRightPanel {
    flex-grow: 1;
    height: 100vh;
    display: grid;
    justify-content: start;
    padding-left: 72px;
}

.mainLoginRightPanelInner {
    height: 100vh;
    width: 400px;
    display: grid;
    justify-content: stretch;
    align-items: center;
    grid-template-rows: minmax(min-content, 1fr)  minmax(78px, min-content);
}

.loginTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 35px;
    display: grid;
    justify-content: center;
    align-items: end;
}

.loginTitleWrap {
    display: grid;
    justify-content: center;
    align-items: end;
    grid-template-rows: 1fr;
}

.loginTitleWrap .loginTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 35px;
    display: grid;
    justify-content: center;
    align-items: end;

}

.loginFormWrap {
    max-width: 400px;
    width: 100%;
    display: grid;
    justify-content: stretch;
    align-content: start;
    align-items: center;
    justify-self: center;
    row-gap: 12px;
}


.modalformWrap {
    width: 100%;
    display: grid;
    justify-content: stretch;
    align-content: start;
    align-items: center;
    justify-self: center;
    row-gap: 12px;
}

.modalformWrap .inputWrap {
    width: 100%;
}

.loginFormWrap .inputWrap {
    width: 100%;
}

.loginControlsWrap {
    padding-top: 12px;
    padding-bottom: 11px;
    align-items: center;
}

.loginControlsWrap .checkbox {
    --border-active: #039C55;
    --border-hover: #039C55;
}

.loginBottomBlock {
    display: grid;
    justify-self: center;
    align-content: flex-end;
    row-gap: 10px;
}

.loginSocialWrap {
    align-self: center;
    max-width: 400px;
}

.loginSocialWrap .socialIconsWrap {
    padding: 0;
    height: 24px;
    column-gap: 18px;
}

.loginFooterText {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 16px;
    text-align: center;
}


.inputWrap.sucsess input {
    border-color: #039C55;
}

.inputWrap.error input {
    border-color: #E81A0C;
}

.inputWrap.error {
    position: relative;
}

.inputErrorMsg {
    column-gap: 4px;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: -9px;
    left: 6px;
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
}

@media only screen and (max-width: 1088px) {

    .mainLoginLeftPanel {
        min-height: 100%;
        width: 50%;
        background: var(--main-text-color);
        color: var(--manual-bg);
        display: grid;
        justify-content: end;
        padding: 0 48px;
    }

    .mainLoginRightPanel {
        justify-content: stretch;
        padding-left: 48px;
        padding-right: 48px;
    }

    .mainLoginRightPanelInner {
        width: auto;
    }
}

@media only screen and (max-width: 768px) {
    .mainLoginLeftPanel {
        display: none;
    }

    .mainLoginWrap {
        height: auto;
        min-height: 100%;
    }

    .mainLoginRightPanel {
        flex-grow: 1;
        min-height: 100vh;
        display: grid;
        justify-content: stretch;
        grid-template-rows: 1fr minmax(280px, 1.8fr) 1fr;
        padding: 0 8px;
    }
}


.forgotPasswordWrap {
    min-height: 100vh;
    padding: 0 8px;
    display: grid;
    justify-content: stretch;
    grid-template-rows: minmax(min-content, 27%) minmax(min-content, 17%) minmax(min-content, 1fr) minmax(min-content, 22%);
}

.checkEmail.forgotPasswordWrap {
    min-height: 100vh;
    padding: 0 8px;
    display: grid;
    justify-content: stretch;
    grid-template-rows: minmax(min-content, 29%) minmax(min-content, 14%) minmax(min-content, 1fr) minmax(min-content, 22%);
}

.forgotPasswordImg {
    display: grid;
    justify-content: center;
    align-content: end;
}

.forgotPasswordTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 35px;
    padding-bottom: 12px;
    text-align: center;
    color: var(--main-text-color);
}


.forgotPasswordText,
.footerText {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: var(--secondary-text-color);
    text-align: center;
    padding-bottom: 8px;
}

.forgotPasswordText {
    font-size: var(--title-font-size-sm);
    line-height: 18px;
    padding-bottom: 16px;
}

.forgotPasswordTextWrap {
    padding-top: 40px;
}

.checkEmail .forgotPasswordTextWrap {
    padding-top: 21px;
}

.forgotPasswordFormWrap {
    max-width: 400px;
    width: 100%;
    display: grid;
    justify-content: stretch;
    align-content: start;
    align-items: center;
    justify-self: center;
    row-gap: 12px;
}

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

.forgotPasswordFooterWrap {
    display: grid;
    justify-self: center;
    align-content: space-between;
    justify-content: center;
    align-items: end;
    justify-items: center;
}

.forgotPasswordFooterWrap .loginFooterText {
    padding-bottom: 24px;
}

.forgotPasswordFooterWrap .socialIconsWrap {
    column-gap: 16px;

}

.forgotPasswordFooterWrap .loginSocialWrap {
    padding: 8px 0;
}

.forgotPasswordFooterWrap .footerText {
    padding: 8px 0 0;
}

.forgotPasswordFooterWrap .link {
    display: block;
    padding-top: 8px;
}


.forgotPasswordWarning {
    font-weight: 700;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    color: #F3A73B;
    max-width: 340px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 8px 0;
}

.forgotPasswordWarning span {
    padding-left: 10px;
}

.forgotPasswordFormEmail {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 16px;
    text-align: center;
}

.forgotPasswordFormHelperText {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    text-align: center;
    padding-top: 45px;
}

.createNewPassword.forgotPasswordWrap {
    grid-template-rows: minmax(min-content, 26%) minmax(min-content, 14.5%) minmax(min-content, 1fr) minmax(min-content, 22%);
}

.createNewPassword .forgotPasswordTextWrap {
    padding-top: 48px;
}

.createNewPassword .newPasswordWrap {
    align-items: stretch;
}

.forgotPasswordWrap img {
    max-width: 108px;
}


/* Accountability */

.accCompanyHeadingSwitch {
    position: absolute;
    right: 139px;
    top: -32px;
}

.accountabilityPageHeading img {
    padding-bottom: 6px;
}

.accCompanyHeading .onlyIconBtnSecondary:active path,
.accCompanyHeading .onlyIconBtnSecondary.active path {
    fill: var(--button-text-color);
}

.accCompanyHeading .onlyIconBtnSecondary:active path:first-child,
.accCompanyHeading .onlyIconBtnSecondary.active path:first-child {
    fill: var(--button-active-color);
}

@media (hover: hover) {
    .accCompanyHeading .onlyIconBtnSecondary:hover path,
    .accCompanyHeading .onlyIconBtnSecondary.active:hover path {
        fill: var(--button-text-color);
    }

    .accCompanyHeading .onlyIconBtnSecondary:hover path:first-child,
    .accCompanyHeading .onlyIconBtnSecondary.active:hover path:first-child {
        fill: var(--button-hover-color);
    }

    .accCompanyHeading .onlyIconBtnSecondary:hover path:first-child {
        fill: var(--button-hover-color);
    }
}

.accCompanyHeading .groupDetailTitle {
    line-height: 39px;
}

.accCompanyHeading {
    padding: 0;
}

.contentWrap.accContainer {
    padding-top: 32px;
}

@media only screen and (max-width: 768px) {

    .accountabilityPageHeading .pageHeading {
        margin-top: 8px;
    }
}

.accCompanyHeading .itemControlGroup {
    height: 24px;
}

#tree-container {
    padding-top: 0;
}

.accContainer .jstree-container-ul {
    padding-top: 24px;
}


.accContainer .jstree-default .jstree-anchor {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    border: 1px solid #ffffff;
    min-width: 320px;
    max-width: 320px;
    min-height: 56px;
    margin-bottom: 16px;
    transition: none;
    padding: 7px 8px;
    height: auto !important;
}

.accContainer .jstree-default .jstree-node {
    background-image: none !important;
    position: relative;
}

.accContainer .jstree-default > ul > .jstree-node > ul > .jstree-node > .jstree-anchor .jstree-icon.jstree-themeicon:empty {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.5C11 6.15685 9.65685 7.5 8 7.5C6.34315 7.5 5 6.15685 5 4.5C5 2.84315 6.34315 1.5 8 1.5C9.65685 1.5 11 2.84315 11 4.5Z' fill='%231B335A'/%3E%3Cpath d='M3.3424 12.4456C3.72187 10.1688 5.69178 8.5 8 8.5C10.3082 8.5 12.2781 10.1688 12.6576 12.4456L13 14.5H3L3.3424 12.4456Z' fill='%231B335A'/%3E%3C/svg%3E");
    background-position: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin: 2px 8px 0 0;
}

.accContainer .jstree-icon:empty.jstree-ocl {
    background-image: none !important;
    position: absolute;
    display: block;
    top: 44px;
    left: 6px;
    z-index: 1;
    cursor: pointer;
}

.accContainer .jstree-icon.jstree-ocl:before {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%233B68E0'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 18.0541C11 18.5765 11.4477 19 12 19C12.5523 19 13 18.5765 13 18.0541V13H18.0541C18.5765 13 19 12.5523 19 12C19 11.4477 18.5765 11 18.0541 11H13V5.94595C13 5.42351 12.5523 5 12 5C11.4477 5 11 5.42351 11 5.94595V11H5.94595C5.42351 11 5 11.4477 5 12C5 12.5523 5.42351 13 5.94595 13H11V18.0541Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
    display: block;
}

.accContainer .jstree-icon.jstree-ocl:hover:before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%232C81FB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 18.0541C11 18.5765 11.4477 19 12 19C12.5523 19 13 18.5765 13 18.0541V13H18.0541C18.5765 13 19 12.5523 19 12C19 11.4477 18.5765 11 18.0541 11H13V5.94595C13 5.42351 12.5523 5 12 5C11.4477 5 11 5.42351 11 5.94595V11H5.94595C5.42351 11 5 11.4477 5 12C5 12.5523 5.42351 13 5.94595 13H11V18.0541Z' fill='white'/%3E%3C/svg%3E%0A");
}

.accContainer .jstree-anchor {
    position: relative;
}

.accContainer .jstree-default .jstree-anchor.jstree-hovered,
.accContainer .jstree-default .jstree-anchor.jstree-clicked {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--input-hover-color);
    min-width: 320px;
    min-height: 56px;
    margin-bottom: 16px;
    transition: none;
    padding: 7px 8px;
}

.accContainer .jstree-default .jstree-anchor.jstree-clicked {
    border: 1px solid var(--input-active-color);
}

.accContainer .jstree-anchor:before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--menu-active-color);
    display: block;
    position: absolute;
    top: 19px;
    left: -24px;
}

.accContainer .jstree-anchor:after {
    content: "";
    height: 29px;
    width: 2px;
    background: var(--menu-active-color);
    display: block;
    position: absolute;
    top: -8px;
    left: -26px;
}

.accContainer .jstree-default .jstree-node {
    margin-left: 40px !important;
}


.accContainer .jstree-default .jstree-node:not(.jstree-last) {
    position: relative;
}

.accContainer .jstree-default .jstree-node:not(.jstree-last):before {
    content: "";
    height: 100%;
    width: 2px;
    background: var(--menu-active-color);
    display: block;
    position: absolute;
    top: -7px;
    left: -25px;
}

.accContainer .jstree-default .jstree-icon.jstree-themeicon:empty {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Group 1073'%3E%3Cpath id='Ellipse 109' d='M8 3.5C8 5.15685 6.65685 6.5 5 6.5C3.34315 6.5 2 5.15685 2 3.5C2 1.84315 3.34315 0.5 5 0.5C6.65685 0.5 8 1.84315 8 3.5Z' fill='%233B68E0'/%3E%3Cpath id='Rectangle 1325' d='M0.342404 11.4456C0.721873 9.16876 2.69178 7.5 5 7.5C7.30822 7.5 9.27813 9.16876 9.6576 11.4456L10 13.5H0L0.342404 11.4456Z' fill='%233B68E0'/%3E%3C/g%3E%3C/svg%3E");
    background-position: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin: 2px 8px 0 0;
}

.accContainer .jstree-default > .jstree-container-ul > .jstree-node {
    margin-left: 0 !important;
}

.node-wrapper {
    display: inline-block;
    width: calc(100% - 24px);
}

.accUserWrap {
    column-gap: 8px;
}

.accUserInfoWrap {
    padding-top: 4px;
    width: calc(100% - 120px - 8px);
}

.accUserInfo {
    display: block;
    width: 100%;
    line-height: 19px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
}

.accUserInfo:first-child {
    font-size: var(--main-font-size);
    font-weight: 700;
    line-height: 16px;
}

.accUserWrap .itemControls {
    width: auto;
    padding-right: 0;
    column-gap: 8px;
}

@media (hover: hover) {
    .itemControlList:hover path {
        stroke: white;
    }

    .itemControlList:hover circle {
        fill: white;
    }
}


.accTooltip.tooltip {
    font-size: var(--main-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    z-index: 1040;
}

.accTooltip.tooltip.show {
    opacity: 1;
}

.accTooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #fff;
}

.accTooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #fff;
}

.accTooltip .tooltip-inner {
    background-color: #fff;
    box-shadow: 0px 1px 20px 0px #00000026;
    color: var(--secondary-text-color);
    text-align: center;
    border-radius: 6px;
    padding: 8px 8px;
}

.accTooltip .accTooltipList div {
    color: var(--secondary-text-color);
    text-align: center;
    font-size: var(--main-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    width: 100%;
}

.notFoundWrap {
    min-height: 100vh;
    padding: 8px;
    display: grid;
    justify-items: center;
    grid-template-rows: minmax(min-content, 46%) minmax(min-content, 42%) minmax(min-content, 12%);
}

.notFoundImg {
    display: grid;
    justify-content: center;
    align-content: end;
    padding-right: 44px;
}

.notFoundTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 35px;
    padding-bottom: 30px;
    text-align: center;
}

.notFoundTextWrap {
    display: grid;
    justify-items: center;
    align-items: start;
    padding-top: 66px;
}

.notFoundTextInnerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.notFoundFooterWrap {
    display: grid;
    justify-items: center;
    align-items: end;
}

.notFoundText {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 24px;
    color: var(--secondary-text-color);
    text-align: center;
    padding-bottom: 8px;
    padding-top: 40px;
}

.notFoundFooterWrap .socialIconsWrap {
    column-gap: 16px;
}


@media only screen and (max-width: 768px) {

    .notFoundImg {
        padding-right: 30px;
    }

    .notFoundImg img {
        width: 100%;
    }

    .notFoundWrap {
        grid-template-rows: minmax(min-content, 30%) minmax(min-content, 58%) minmax(min-content, 12%);
    }


}

.errorPage {
    padding-top: 49px;
}

.errorPage.notFoundWrap {
    grid-template-rows: minmax(min-content, 0) minmax(min-content, 88%) minmax(min-content, 12%);
}

.errorPage .notFoundImg {
    max-width: 712px;
    overflow: hidden;
    width: 100%;
    height: 430px;
    padding-right: 0;
}

.errorPage .notFoundImg img {
    width: 712px;
    left: 50%;
    top: -3px;
    margin-left: -364px;
    position: absolute;
}

.errorPage .notFoundImg {
    position: relative;
}

.errorPage .notFoundNumber {
    position: absolute;
    left: calc(50% - 69px);
    top: 79px;
    font-size: 70px;
    font-weight: 900;
    line-height: 82px;
    text-align: center;
    color: #FFC727;
}

.errorPage .notFoundTextWrap {
    padding-top: 40px;
    padding-bottom: 24px;
}

.errorPage .notFoundFooterWrap {
    row-gap: 8px;
}


.hidden {
    display: none !important;
}

.form-group > .select2-container {
    width: 100% !important;
}

.control-label {
    margin-top: 10px;
}

.control-label {
    font-size: var(--main-font-size-lg);
}

.list-group .input-group-addon:after {
    content: '\00D7';
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0px;
    left: 0;
    font-size: var(--main-font-size-lg);
    font-weight: bold;
    color: #313c4d;
}

#accModal.modal:not(#no-internet) .modal-dialog {
    max-width: 1088px !important;
    width: calc(100% - 32px);
}

#accModal .modal-content {
    padding-top: 52px;
}

#accModal .modal-body {
    max-height: calc(100vh - 128px - 52px - 51px - 32px);
    padding: 45px 60px 8px;
}

.roleForm {
    align-items: stretch;
    row-gap: 8px;
}

.addAccountabilityWrap {
    align-items: flex-end;
}

.accSelect2AddAccountability.form-group {
    width: calc(100% - 48px);
}

.js-add-responsibiliti-item {
    width: 40px;
    height: 40px;
    padding: 0;
}

.js-add-responsibiliti-item svg {
    width: 40px;
    height: 40px;
}


@media (hover: hover) {
    .js-add-responsibiliti-item:hover rect {
        fill: var(--button-hover-color);
    }
}

.js-add-responsibiliti-item:active rect,
.js-add-responsibiliti-item:focus rect {
    fill: var(--button-active-color);
}

#accModal .categoriesEdit .list-group-item {
    border-radius: 6px;
    padding: 12px 41px 12px 15px;
    font-style: normal;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: var(--category-color);
    background: var(--category-bg);
    border: none;
    white-space: nowrap;
    position: relative;
}

#accModal .input-group-addon.js-delete-responsibiliti-item {
    position: absolute;
    bottom: 11px;
    right: 15px;
    width: 16px;
    height: 16px;
}

#accModal .list-group .input-group-addon:after {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(../../images/pages/close-category-button.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
    cursor: pointer;
}

#accModal .fourColumn {
    padding-bottom: 8px;
}

.fourColumn .form-group {
    width: calc(25% - 8px * 3 / 4);
}

.twoColumn .form-group,
.twoColumn .field-account-email,
.twoColumn .field-accountchart-email {
    width: calc(50% - 4px);
}

#accModal .hint-help {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 16px;
    padding-left: 28px;
    position: relative;
}

#accModal .hint-help span {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    background-image: url(../../images/pages/warning-icon.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 14px;
    height: 12px;
}

.roleFormBtnsWrap {
    justify-content: center;
    column-gap: 8px;
}

.roleFormBtn {
    align-self: center;
    margin-top: 16px;
}

.account-permissions {
    align-self: flex-start;
    padding-right: 40px;
}

.account-permissions-hidden {
    align-self: flex-start;
    padding-right: 40px;
}

.account-permissions-hidden {
    position: relative;
}

.account-permissions-hidden .readonlyIcon {
    position: absolute;
    right: -27px;
    top: 12px;
}

.account-permissions:before {
    content: "";
    width: 16px;
    height: 16px;
    right: 13px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.20006 5.9C3.53143 5.45817 4.15823 5.36863 4.60006 5.7L8.00006 8.25L11.4001 5.7C11.8419 5.36863 12.4687 5.45817 12.8001 5.9C13.1314 6.34183 13.0419 6.96863 12.6001 7.3L8.60006 10.3C8.2445 10.5667 7.75561 10.5667 7.40006 10.3L3.40006 7.3C2.95823 6.96863 2.86869 6.34183 3.20006 5.9Z' fill='%233264E8'/%3E%3C/svg%3E%0A");
}

.account-permissions:focus,
.account-permissions:active:focus {
    box-shadow: none;
}

.account-permissions:hover:before,
.account-permissions:active:before,
.account-permissions:focus:before,
.account-permissions:focus-visible:before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.20006 5.9C3.53143 5.45817 4.15823 5.36863 4.60006 5.7L8.00006 8.25L11.4001 5.7C11.8419 5.36863 12.4687 5.45817 12.8001 5.9C13.1314 6.34183 13.0419 6.96863 12.6001 7.3L8.60006 10.3C8.2445 10.5667 7.75561 10.5667 7.40006 10.3L3.40006 7.3C2.95823 6.96863 2.86869 6.34183 3.20006 5.9Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}

.account-permissions-open:before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Arrow 1'%3E%3Cpath id='Vector 58 (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M12.7999 10.1C12.4686 10.5418 11.8418 10.6314 11.3999 10.3L7.99994 7.75L4.59994 10.3C4.15811 10.6314 3.53131 10.5418 3.19994 10.1C2.86857 9.65817 2.95811 9.03137 3.39994 8.7L7.39994 5.7C7.7555 5.43333 8.24439 5.43333 8.59994 5.7L12.5999 8.7C13.0418 9.03137 13.1313 9.65817 12.7999 10.1Z' fill='%233264E8'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.account-permissions-open:hover:before,
.account-permissions-open:active:before,
.account-permissions-open:focus:before,
.account-permissions-open:focus-visible:before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Arrow 1'%3E%3Cpath id='Vector 58 (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M12.7999 10.1C12.4686 10.5418 11.8418 10.6314 11.3999 10.3L7.99994 7.75L4.59994 10.3C4.15811 10.6314 3.53131 10.5418 3.19994 10.1C2.86857 9.65817 2.95811 9.03137 3.39994 8.7L7.39994 5.7C7.7555 5.43333 8.24439 5.43333 8.59994 5.7L12.5999 8.7C13.0418 9.03137 13.1313 9.65817 12.7999 10.1Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E%0A");
}


.permissionsForm .form-group {
    flex-direction: row;
    align-items: center;
    padding: 8px 0;
}

.permissionsForm .form-group > label {
    width: 28.1%;
    min-width: 150px;
    padding-left: 0;
    font-weight: 700;
    font-size: var(--main-font-size);
}

.form-group.master_permision {
    padding: 8px 0 16px;
    border-bottom: 1px solid #A2A8B8;
    margin-bottom: 8px;
}

.permissionsForm .form-wrapper {
    flex: 1;
}

.permissionsForm .formItem,
.permissionsForm .form-item {
    width: 100%;
    max-width: 543px;
}

label.permission-btn {
    padding-left: 0;
    color: var(--secondary-text-color);
    font-size: var(--main-font-size);
    font-weight: 400;
    flex: 1;
}

.permissionsForm .form-item .debt-amount-slider {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    position: relative;
    width: 100%;
    height: 24px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.permissionsForm .form-item .debt-amount-slider input,
.permissionsForm .form-item .debt-amount-slider label {
    box-sizing: border-box;
    flex: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}


button.manage-close {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 10000;
}

.manage_permision .ui-slider-pips .ui-slider-line {
    display: none;
}

.notFoundImg500 .notFoundNumber {
    position: absolute;
    left: calc(50% - 69px);
    top: 79px;
    font-size: 70px;
    font-weight: 900;
    line-height: 82px;
    text-align: center;
    color: #FFC727;
}

.notFoundImg500 img {
    width: 712px;
    left: 50%;
    top: -3px;
    margin-left: -364px;
    position: absolute;
}

.alertify-notifier .ajs-message {
    width: auto !important;
    color: #fff;
    font-weight: bold;
}

.alertify-notifier {
    width: auto;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.permissionsForm {
    padding-bottom: 48px;
}

.permissionsForm .form-item .debt-amount-slider label {
    position: relative;
    min-width: 0;
    height: 100%;
    padding-left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mobileburger:hover rect {
    fill: #203b6e !important;
}

.permissionsForm .form-item .debt-amount-slider label.notShow {
    pointer-events: none;
}

.form-group .form-item .debt-amount-slider label::after,
.form-group .form-item .debt-amount-slider input:checked + label::after {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
    font: inherit;
    color: var(--triple-text-color);
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    border: 1px solid var(--triple-text-color);
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: block;
    left: 12px;
    transition: none;
}

.form-item .debt-amount-slider label:hover::after {
    border: 1px solid var(--input-hover-color);
}

.form-group .form-item .debt-amount-slider .debt-amount-pos {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 10px 10px var(--input-active-color);
}

.form-group .form-item .debt-amount-slider input:checked:nth-child(1) ~ .debt-amount-pos {
    left: 12px;
}

.form-group .form-item .debt-amount-slider input:checked:nth-child(3) ~ .debt-amount-pos {
    left: 27.2%;
}

.form-group .form-item .debt-amount-slider input:checked:nth-child(5) ~ .debt-amount-pos {
    left: 52.3%;
}

.form-group .form-item .debt-amount-slider input:checked:nth-child(7) ~ .debt-amount-pos {
    left: 77.2%;
}

.form-group .form-item .debt-amount-slider label:hover::after,
.form-group .form-item .debt-amount-slider input:checked + label:hover::after {
    transform: translate(-50%, -50%) scale(1);
    border: 2px solid var(--input-hover-color);
}

.form-group .form-item .debt-amount-slider input:checked + label::after {
    border: 2px solid var(--input-active-color);
    transform: translate(-50%, -50%) scale(1);
}

.form-group .form-item .debt-amount-slider label::before {
    content: attr(data-debt-amount);
    position: absolute;
    left: 0%;
    padding-top: 0px;
    transform: translate(32px, 3px);
    white-space: nowrap;
    opacity: 1;
    transition: none;
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--main-font-size);
    color: var(--secondary-text-color);
}

.form-group .form-item .debt-amount-slider input:checked + label::before {
    font-weight: 400;
}

@media only screen and (max-width: 768px) {
    #accModal.modal:not(#no-internet) .modal-dialog {
        width: 100%;
    }

    #accModal .modal-content {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    #accModal .modal-body {
        max-height: calc(100vh - 64px - 51px - 24px - 24px);
    }

    .fourColumn .form-group {
        width: 100%;
    }

    #accModal .fourColumn,
    #accModal .twoColumn {
        flex-direction: column;
    }

    #accModal .modal-body {
        padding: 8px;
    }

    .twoColumn .form-group,
    .twoColumn .field-account-email,
    .twoColumn .field-accountchart-email {
        width: 100%;
    }

    .reassignPtmForText {
        padding-bottom: 16px;
    }
}


.contentWrap {
    position: relative;
}

.preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(13, 19, 28, 0.9);
    display: none;
}

.pjaxLoaderWrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background: rgba(13, 19, 28, 0.9);
    display: none;
}

.pjaxLoader::before {
    content: "";
    top: 50%;
    left: 50%;
    display: block;
    position: absolute;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--button-active-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    transform: translate(-50%, -50%);
    margin-left: -20px;
    margin-top: -20px;
    z-index: 10000;
}

.pjaxLoader::after {
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
}

.loader .preloader {
    display: block;
}

.pjaxLoader .pjaxLoaderWrapper {
    display: block;
}

.pjaxLoader {
    position: relative;
}

.pjaxLoader .preloader {
    display: block;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--button-active-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    transform: translate(-50%, -50%);

}

.actionListInfinityLoader {
    text-align: center;
}

.infinityLoaderWrapper, .actionListInfinityLoader {
    display: none;
}

.infinityLoaderWrapper.active, .actionListInfinityLoader.active {
    display: block;
    text-align: center;
}

.infinityLoader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--button-active-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    transform: translate(-50%, -50%);
    display: inline-block;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#company_anchor .jstree-icon {
    display: none;
}

#company_anchor {
    background: none;
    border: none;
    min-width: 0;
    box-shadow: none;
    width: auto;
    min-height: 0;
    height: 35px !important;
    padding: 0;
    line-height: 0;
    margin-bottom: 32px;
}

.accCompanyLogo {
    padding: 0;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: default;
    width: 100%;
}

#company_anchor .node-wrapper,
.accCompanyLogo img,
#company_anchor .accUserWrap {
    width: 100%;
    height: 100%;
    min-height: 88px;
}

#company > .jstree-icon.jstree-ocl {
    top: 36px;
    left: 4px;
}

#company_anchor:before,
#company_anchor:after {
    display: none;
}

.orgchart .node.top-level .title {
    background-color: transparent;
    min-width: auto;
    height: 35px;
    color: var(--main-text-color);
    border-radius: 0;
    padding: 0;
    text-align: center;
    border: 0;
    box-shadow: none;
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 31px;
    margin-bottom: 8px;
}

.groupDetailTitleChart {
    text-align: center;
}


/*Accountabilities delete modal*/

.alertify .ajs-modal {
    transition: none;
    animation: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alertify .ajs-dimmer {
    position: fixed;
    z-index: 1981;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100vh;
    background: rgba(13, 19, 28, 0.9);
    opacity: 1;
    transition: none;
    animation: none !important;
}

.alertify .ajs-dialog {
    min-height: 110px;
    outline: 0;
    background-color: #fff;

    margin: 0;
    width: 76.5%;
    max-width: 624px;
    max-height: calc(100vh - 128px);

    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-lg);
    padding: 40px 8px 32px;
    border: none;
    transition: none;
    animation: none;
}

.alertify .ajs-header {
    margin: 0;
    padding: 0;
}

.visionDiagram {
    display: none;
}

.visionDiagram.active {
    display: block;
}

.alertify .ajs-commands {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.70711 3.29289C4.31658 2.90237 3.68342 2.90237 3.29289 3.29289C2.90237 3.68342 2.90237 4.31658 3.29289 4.70711L6.58579 8L3.29289 11.2929C2.90237 11.6834 2.90237 12.3166 3.29289 12.7071C3.68342 13.0976 4.31658 13.0976 4.70711 12.7071L8 9.41421L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L9.41421 8L12.7071 4.70711C13.0976 4.31658 13.0976 3.68342 12.7071 3.29289C12.3166 2.90237 11.6834 2.90237 11.2929 3.29289L8 6.58579L4.70711 3.29289Z' fill='%23A2A8B8'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 0;
    margin: 0;
    opacity: 1;
    outline: 0 none;
}

.alertify .ajs-commands:hover {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.70711 3.29289C4.31658 2.90237 3.68342 2.90237 3.29289 3.29289C2.90237 3.68342 2.90237 4.31658 3.29289 4.70711L6.58579 8L3.29289 11.2929C2.90237 11.6834 2.90237 12.3166 3.29289 12.7071C3.68342 13.0976 4.31658 13.0976 4.70711 12.7071L8 9.41421L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L9.41421 8L12.7071 4.70711C13.0976 4.31658 13.0976 3.68342 12.7071 3.29289C12.3166 2.90237 11.6834 2.90237 11.2929 3.29289L8 6.58579L4.70711 3.29289Z' fill='%232C81FB'/%3E%3C/svg%3E%0A");
}

.alertify .ajs-commands:active {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.70711 3.29289C4.31658 2.90237 3.68342 2.90237 3.29289 3.29289C2.90237 3.68342 2.90237 4.31658 3.29289 4.70711L6.58579 8L3.29289 11.2929C2.90237 11.6834 2.90237 12.3166 3.29289 12.7071C3.68342 13.0976 4.31658 13.0976 4.70711 12.7071L8 9.41421L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L9.41421 8L12.7071 4.70711C13.0976 4.31658 13.0976 3.68342 12.7071 3.29289C12.3166 2.90237 11.6834 2.90237 11.2929 3.29289L8 6.58579L4.70711 3.29289Z' fill='%233264E8'/%3E%3C/svg%3E%0A");
}

.alertify .ajs-commands button {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.alertify .ajs-commands button.ajs-close {
    background-image: none;
}

.alertify .ajs-body .ajs-content {
    padding: 0;
    text-align: center;
    color: var(--secondary-text-color);
    line-height: 24px; /* 171.429% */
}

.alertify .ajs-footer {
    padding: 0;
    margin: 0;
    min-height: 0;
    background-color: transparent;
}

.alertify .ajs-footer .ajs-buttons.ajs-primary {
    text-align: center;
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button {
    margin: 0;
    min-height: 0;
    min-width: 0;

    border-radius: 6px;
    padding: 12px 15px;
    font-style: normal;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 16px;
    color: var(--button-text-color);
    background: var(--button-active-color);
    border: none;
    white-space: nowrap;
    outline: 0 none;
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button:hover {
    color: var(--button-text-color);
    background: var(--button-hover-color);
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button:active,
.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button:focus {
    color: var(--button-text-color);
    background: var(--button-active-color);
}

.ajs-primary.ajs-buttons {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    justify-content: center;
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button.ajs-cancel {
    color: var(--button-secondary-color);
    background: var(--button-secondary-bg);
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button.ajs-cancel:hover {
    color: var(--button-text-color);
    background: var(--button-hover-color);
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button.ajs-cancel:active,
.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button.ajs-cancel:focus {
    color: var(--button-text-color);
    background: var(--button-active-color);
}

/*#accModal.modal.removeNodeModal:not(#no-internet) .modal-dialog {*/
/*    max-width: 624px !important;*/
/*}*/

#accModal .modal-body.role-main-form {
    padding-top: 8px;
}

.reassignPtmFormWrap {
    row-gap: 16px;
    align-items: stretch;
}

.mainWrap .flash-toast-message {
    padding: 8px 16px;
    background-color: var(--success-green);
    border-radius: var(--border-radius-lg);
    width: auto;
    color: var(--button-text-color);
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    opacity: 1;
    position: fixed;
    top: 72px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}


.alertify-notifier .ajs-message.ajs-success {
    background: var(--main-text-color);
    color: var(--button-text-color);
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    border-radius: var(--border-radius-lg);
    padding: 8px 16px;
    margin-top: 0px;
}

.alertify-notifier .ajs-message.ajs-error {
    background: var(--warning-red);
    color: var(--button-text-color);
    font-weight: 700;
    font-size: var(--main-font-size-lg);
    border-radius: var(--border-radius-lg);
    padding: 8px 16px;
}

.reasignList .form-group {
    margin-bottom: 8px;
}

#vakata-dnd {
    background: #f0ebf9;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--input-hover-color);
    min-width: 320px;
    min-height: 56px;
    margin-bottom: 16px;
    transition: none;
    padding-top: 7px !important;
}

#vakata-dnd .node-wrapper {
    width: calc(100% - 30px);
}

#jstree-marker {
    display: none !important;
}

.parent_node {
    background: #f0ebf9 !important;
}

.fullWith {
    width: 100%;
}

.itemDetailWrap.active {
    display: block;
}

.list-view {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 8px;
}


/*new css*/
.form-group {
    width: 100%;
}

form {
    width: 100%;
}

/*.fade:not(.show) {*/
/*    opacity: 1;*/
/*}*/

.fade.in {
    opacity: 1;
}

.va {
    width: 100%;
}

header {
    z-index: 1200;
}

.parent_node .iconControl {
    pointer-events: none;
}

.jsEventUpdate {
    display: inline-block;
}

#load-more {
    display: none;
}


.blockUI.blockOverlay {
    position: fixed !important;
}

.videoWrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.videoWrapper {
    position: relative !important;
    padding-bottom: 54% !important;
    height: 0 !important;
}

.containerColumnJustify {
    width: 100%;
}

.pastEvent #google-auth-btn, .pastEvent .ics {
    pointer-events: none;
}

.itemCategoryTrigger {
    cursor: pointer;
}

.postCommentFormWrapper {
    display: none;
}

.postCommentFormWrapper.active {
    display: block;
}

.groupModalContent {
    max-width: 700px !important;
    padding: 0 30px;
}

.groupModalContent.kpiModal {
    max-width: 1100px !important;
    padding: 0 30px;
}

@media only screen and (max-width: 768px) {
    .groupModalContent.kpiModal {
        padding: 0;
    }

    .kpiPage .newGroupPopupRowWrap .inputWrap,
    .kpiPage .newGroupPopupRowWrap .filtersDate {
        max-width: 100% !important;
        width: 100%;
    }

    .kpiPage .newGroupPopupRowWrap {
        padding-bottom: 12px !important;
    }
}

.discCircleGraph {
    position: relative;
}

.discCircleGraphInner {
    flex-wrap: wrap;
    min-width: 488px;
    width: 488px;
    margin: 0 auto;
    padding: 20px 0;
    position: relative;
    justify-content: center;
}

.discCircleGraphInner:before {
    position: absolute;
    content: '';
    left: 50%;
    top: 20px;
    width: 1px;
    height: calc(100% - 40px);
    background-color: #E8E9ED;
    z-index: 1;
}

.discCircleGraphInner:after {
    position: absolute;
    content: '';
    top: 50%;
    left: calc((100% - 488px) / 2);

    width: 488px;
    height: 1px;
    background-color: #E8E9ED;
}

.discCircleGraphBlock {
    width: calc(50% - 1px);
    height: 192px;
    position: relative;
    box-sizing: border-box;
    padding-left: 109px;
    padding-top: 14px;
    justify-content: flex-start;
}

.discCircleGraphBlock:nth-child(odd) {
    justify-content: flex-end;
    padding-right: 85px;
    padding-left: 0;
}

.discCircleGraphBlock:first-child,
.discCircleGraphBlock:nth-child(2) {
    padding-top: 0;
}


.discCircleMain {
    left: calc(50% - 85px);
    top: calc(50% - 87px);
    position: absolute;
    width: 172px;
    height: 172px;
    margin: 0 auto;
}

.quarter {
    position: absolute;
    width: 48%;
    height: 48%;
}

.quarter1 {
    top: 0;
    left: 0;
    background-color: #FF4C51;
    border-radius: 100% 0 0 0;
}

.quarter2 {
    top: 0;
    right: 0;
    background-color: #FFB400;
    border-radius: 0 100% 0 0;
}

.quarter3 {
    bottom: 0;
    left: 0;
    background-color: #2BCA92;
    border-radius: 0 0 0 100%;
}

.quarter4 {
    bottom: 0;
    right: 0;
    background-color: #5451FB;
    border-radius: 0 0 100% 0;
}

.cutout {
    width: calc(100% - 22px);
    height: calc(100% - 22px);
    background-color: white;
    position: absolute;
    top: 11px;
    left: 11px;
    border-radius: 50%;
    pointer-events: none;
}

.radialDiagramWrap {
    width: 100%;
}

.radialDiagramWrap .radial-chart {
    height: 600px;
}

.discCircleGraphTitle {
    color: var(--main-text-color);
    font-weight: bold;
    line-height: 1.5;
}

.discCircleGraphTitle::first-letter {
    font-size: 34px;
}

.discCircleGraphText {
    color: var(--secondary-text-color);
}

@media only screen and (max-width: 1400px) {
    .discGraphicWrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        row-gap: 8px;
    }

    .discCircleGraph {
        width: 100%;
    }

    .discGraphicWrap .discGraphicItem {
        width: calc(100% / 3 - 16px / 3);
        align-items: center;
    }

    .discGraphicTitleWrap {
        width: 100%;
    }
}

@media only screen and (max-width: 1100px) {

    .discGraphicWrap .discGraphicItem {
        width: calc(100% / 2 - 8px);
    }
}

@media only screen and (max-width: 1024px) {

    .discGraphicWrap .discGraphicItem:nth-child(3) .vBarWrap {
        max-width: none;
    }
}

@media only screen and (max-width: 900px) {

    .discCircleGraphInner {
        min-width: 100%;
        width: 100%;
    }

    .discCircleMain {
        width: 40px;
        height: 40px;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
    }

    .discCircleGraphBlock {
        padding-left: 22px;
        padding-right: 8px;

    }

    .discCircleGraphBlock:nth-child(odd) {
        padding-right: 22px;
        padding-left: 8px;
    }

    .discCircleGraphInner:after {
        left: 8px;
        right: 8px;
        width: auto;
    }
}

@media only screen and (max-width: 500px) {
    .discGraphicWrap .discGraphicItem {
        width: calc(100%);
    }
}


.kpi-dialog {
    display: none;
}

.line-chart {
    width: 100%;
}

.costOfAquisitionsGraphWrap .chartsWrapper {
    visibility: hidden;
    height: 0;
}

.costOfAquisitionsGraphWrap.bar .costOfAquisitionsBarChart {
    visibility: visible;
    height: auto;
}

.costOfAquisitionsGraphWrap.line .costOfAquisitionsLineChart {
    visibility: visible;
    height: auto;
}

.kpiSign {
    position: absolute;
    top: 28px;
    left: 8px;
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: #E8E9ED;
    border-radius: 4px;
    color: var(--secondary-text-color);
    font-weight: 700;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
}

.kpiInputWithSign {
    position: relative;
}

.kpiInputWithSign input {
    padding-left: 36px;
}

.kpi-disabled {
    cursor: not-allowed !important;
}

.kpi-disabled input {
    cursor: not-allowed !important;
}

.tooltip-customize-styles {
    padding: 7px 10px;
    display: inline-block;
    font-family: 'calibri-bold', sans-serif !important;
    font-size: 13px;
    text-align: center;
    background-color: #fff;
    z-index: 10000;
}

.tooltip-customize-styles.dashboard-custom {
    border: 1px solid #000;
}


.strategyModal .modal-dialog {
    max-width: 500px !important;
}

.checkbox.path {
    padding-left: 0 !important;
}

/* ==========================================================================
              VISIBILITY
             ========================================================================== */
.visibilityRow {
    column-gap: 8px;
    padding-bottom: 16px;
}

.visibilityColumn {
    width: calc(50% - 4px);
}

.visibilityColumn .panel-heading {
    padding-bottom: 16px;
}

.visibilityColumn .panel-body .form-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 16px;
}

.visibilityColumn .control-label {
    width: 25%;
    min-width: 170px;
}

.visibilityColumn .form-group .accountSubTitle {
    white-space: normal;
}

.visibilityWrapper > div,
.personalWrapper > div,
.visWrapper > div {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 20px;
}

.visibilityWrapper .radio-inline,
.personalWrapper .radio-inline,
.visWrapper .radio-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}


@media only screen and (max-width: 1200px) {
    .visibilityRow {
        padding-bottom: 16px;
        flex-wrap: wrap;
    }

    .visibilityColumn {
        width: 100%;
    }
}

@media only screen and (max-width: 500px) {
    .visibilityColumn .panel-body .form-group {
        flex-wrap: wrap;
    }

    .visWrapper {
        width: 100%;
    }
}

/* ==========================================================================
              Strategic Plan
             ========================================================================== */

.stPlanWrap {
    align-items: stretch;
    width: 100%;
}

.CSFWrap {
    column-gap: 8px;
    row-gap: 8px;
    margin-top: 15px;
    padding-left: 0;
    position: relative;
    flex-wrap: wrap;
}

.CSFWrap li {
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    padding: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 8px;
}

.CSFWrap li .tree-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    column-gap: 8px;
}

.CSFWrap .csf-shortname {
    color: var(--main-text-color);
    font-size: var(--main-font-size);
    font-weight: 700;
    line-height: 1.1;
    column-gap: 8px;
    align-items: center;
    width: calc(100% - 128px);
    justify-content: flex-start;
}

.csf-shortname-tag {
    width: 8px;
    min-width: 8px;
    height: 24px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    display: flex;
}

.csf-shortname span {
    max-width: calc(100% - 16px);
}

.spCheckboxWrap {
    flex-grow: 1;
    justify-content: flex-start;
    column-gap: 32px;
    flex-wrap: wrap;
    row-gap: 8px;
    max-width: calc(100% - 100px);
}

.spFiltersWrap {
    align-items: center;
    padding-top: 6px;
    flex-wrap: wrap;
}

.spCheckboxWrap .checkbox {
    column-gap: 8px;
}


.checkbox input.sprintInCheckbox:checked {
    --b: rgba(3, 156, 85, 0.2);
    background: rgba(3, 156, 85, 0.8);
}

.checkbox input.overDueCheckbox:checked {
    --b: rgba(232, 26, 12, 0.2);
    background: rgba(232, 26, 12, 0.8);
}

.checkbox input.strategicCheckbox:checked {
    --b: rgba(120, 116, 134, 0.2);
    background: rgba(120, 116, 134, 0.8);
}

.spFilterBtn.btn-secondary:focus-visible,
.spFilterBtn.btn-secondary:focus {
    color: var(--button-secondary-color);
    background: var(--button-secondary-bg);
}

.spFilterBtn.btn-secondary:hover {
    color: var(--button-text-color);
    background: var(--button-hover-color);
}

.spFilterBtn:hover svg path {
    fill: var(--button-text-color);
}

.spFiltersWrap .spFiltersInnerWrap {
    display: none;
}

.spFiltersWrap.open .spFiltersInnerWrap {
    display: flex;
    width: 100%;
    padding-top: 13px;
}

.spFiltersWrap.open .spFilterBtn svg:first-child {
    transform: rotate(180deg);
}

.spFiltersInnerWrap .groupDetailTitle {
    font-size: var(--title-font-size-md);
    line-height: 24px;
}

.page-search-form-advanced {
    padding-right: 28px;
}

.spFiltersFormWrap {
    column-gap: 32px;
}

.spFiltersCheckboxWrap {
    padding: 8px 0 0 16px;
    row-gap: 8px;
    width: 143px;
    min-width: 120px;
}

.spFiltersCheckboxWrap label:first-child {
    font-size: var(--main-font-size-sm);
    font-weight: 500;
    line-height: 2.1;
}

.spFiltersCheckboxWrap .checkbox {
    column-gap: 8px;
}

.spFiltersFormInnerWrap {
    flex-wrap: wrap;
    flex-grow: 1;
    row-gap: 12px;
    column-gap: 16px;
    padding-top: 16px;
}

.spFiltersFormInnerWrap:last-child {
    width: 36.5%;
    min-width: 260px;
    max-width: 380px;
    padding-top: 8px;
}

.spFiltersFormInnerWrap .inputWrap {
    width: calc(50% - 8px);
}

.spFiltersFormInnerWrap .inputWrap:last-child {
    width: 100%;
}

.spFiltersFormInnerWrap .inputWrap label {
    padding-left: 4px;
}

.spFiltersFormInnerWrap .date-filters,
.spFiltersFormInnerWrap .go-date-wrapper {
    justify-content: flex-start;
    column-gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.date-filters-title {
    font-size: var(--main-font-size-sm);
    font-weight: 500;
    line-height: 1.15;
    display: block;
    width: 100%;
    padding-left: 8px;
    padding-top: 8px;
    padding-bottom: 5px;
}

.spFiltersFormInnerWrap .go-date-wrapper {
    max-width: 344px;
}

.spFiltersFormInnerWrap .go-date-wrapper .inputWrap {
    width: calc(50% - 4px);
}

.page-search-form-advanced .submitBtnWrap {
    align-items: center;
    padding-top: 16px;
}

.tree-li-wrapper.completed-leaf {
    background: rgba(120, 116, 134, 0.2);
}

.overdue-in .tree-li-wrapper.matrix-overdue:not(.completed-leaf) {
    background: rgba(232, 26, 12, 0.2);
}

.matrix-overdue .tree-date {
    color: #ff0000 !important;
}

.sprint-in .tree-li-wrapper.matrix-sprint {
    background: rgba(3, 156, 85, 0.2);
}

.field-drivingsuccessfactor-description {
    padding-bottom: 8px;
}

.field-drivingsuccessfactor-type .checkbox.path {
    align-items: center;
    column-gap: 8px;
}

.goalForm > .form-group:nth-child(2),
.goalForm > .form-group:nth-child(3) {
    margin-right: 8px;
}

.goalForm > .form-group:nth-child(2),
.goalForm > .form-group:nth-child(3),
.goalForm > .form-group:nth-child(4) {
    width: calc(50% - 4px);
    float: left;
}

.my-checkbox label {
    padding-left: 7px;
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 1.15;
    position: relative;
    margin: 0;
    text-align: left;
    width: 100%;
}

#matrix-form .my-checkbox div[role="radiogroup"] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    column-gap: 8px;
}

.my-checkbox-row {
    width: calc(100% / 4 - 8px * 3 / 4);
}

.my-checkbox-row label.goal-status {
    border-radius: var(--border-radius-sm);
    padding: 8px !important;
    text-align: center;
    font-size: var(--small-text-font-size);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.my-checkbox-row .goal-status.inherited {
    border: 1px solid #BBB9C2;
    color: #BBB9C2;
}

.my-checkbox-row .goal-status.inherited path {
    fill: #BBB9C2;
}

.goal-radio:checked ~ .goal-status.inherited {
    background-color: #BBB9C2;
    color: #fff;
}

.my-checkbox-row .goal-status.stop {
    border: 1px solid #E81A0C;
    color: #E81A0C;
}

.my-checkbox-row .goal-status.stop path {
    fill: #E81A0C;
}

.goal-radio:checked ~ .goal-status.stop {
    background-color: #E81A0C;
    color: #fff;
}

.my-checkbox-row .goal-status.cuantion {
    border: 1px solid #FE6900;
    color: #FE6900;
}

.goal-radio:checked ~ .goal-status.cuantion {
    background-color: #FE6900;
    color: #fff;
}

.my-checkbox-row .goal-status.cuantion path {
    fill: #FE6900;
}

.goal-radio:checked ~ .goal-status.cuantion path,
.goal-radio:checked ~ .goal-status.good path,
.goal-radio:checked ~ .goal-status.stop path,
.goal-radio:checked ~ .goal-status.inherited path {
    fill: #FFFFFF;
}

.my-checkbox-row .goal-status.good {
    border: 1px solid #039C55;
    color: #039C55;
}

.goal-radio:checked ~ .goal-status.good {
    background-color: #039C55;
    color: #fff;
}

.my-checkbox-row .goal-status.good path {
    fill: #039C55;
}

.my-checkbox {
    padding-bottom: 8px;
}


.tree-comment.iconControl {
    cursor: default;
}

.tree-comment.iconControl:hover {
    cursor: default;
}

@media (hover: hover) {
    .tree-comment.iconControl:hover rect {
        fill: #E8E9EE;
        opacity: inherit;
    }

    .tree-comment.iconControl:hover path {
        fill: #A2A8B8;
        opacity: 1;
    }
}


@media only screen and (max-width: 1200px) {
    .page-search-form-advanced {
        padding-right: 0;
    }

}

@media only screen and (max-width: 1024px) {
    .spFiltersFormWrap {
        flex-wrap: wrap;
    }

    .spFiltersFormInnerWrap:last-child {
        width: 100%;
        max-width: 100%;
    }

    .spFiltersCheckboxWrap {
        padding-left: 8px;
    }

    .spFiltersFormInnerWrap .go-date-wrapper {
        max-width: 100%;
        width: 100%;
    }

    .spFiltersFormInnerWrap {
        column-gap: 8px;
    }

    .spFiltersFormInnerWrap .inputWrap {
        width: calc(50% - 4px);
    }
}

@media only screen and (max-width: 768px) {
    .CSFWrap {
        height: auto !important;
    }

    .spCheckboxWrap {
        flex-direction: column;
    }

    .spFiltersFormInnerWrap {
        width: 100%;
    }

    .spFiltersFormInnerWrap .inputWrap {
        width: 100%;
    }

    .strategyModal .modal-dialog {
        max-width: 100% !important;
    }

    .alertify .ajs-dialog {
        width: 90%;
    }

    #matrix-form > .form-group:nth-child(2) {
        margin-right: 0;
    }

    #matrix-form > .form-group:nth-child(2),
    #matrix-form > .form-group:nth-child(3),
    #matrix-form > .form-group:nth-child(4) {
        width: 100%;
        float: none;
    }

    #matrix-form .my-checkbox div[role="radiogroup"] {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

.strategic-plan-tree {
    width: 100%;
    padding-left: 24px;
    padding-top: 8px;
}

.strategic-plan-tree ul {
    padding-left: 32px;
}

.strategic-plan-tree li {
    padding-left: 0;
}

.tree-li-wrapper {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    width: 100%;
    background-color: #fff;
    margin-bottom: 8px;
    padding: 8px;
    position: relative;
    justify-content: flex-start;
    column-gap: 8px;
}

.tree-triger {
    position: absolute;
    left: -20px;
    top: 12px;
    cursor: pointer;
}

.tree-triger.collapsed svg {
    transform: rotate(-180deg);
}


@media (hover: hover) {
    .tree-triger:hover path {
        fill: var(--button-hover-color);
    }
}

.tree-triger:active path,
.tree-triger:focus path {
    fill: var(--button-active-color);
}

.tree-action-addChild {
    cursor: pointer;
}

.tree-action-addChild:hover rect {
    fill: var(--button-hover-color);
}

.tree-action-addChild:active rect,
.tree-action-addChild:focus rect {
    fill: var(--button-active-color);
}


.tree-action-addChild:active path,
.tree-action-addChild:focus path,
.tree-action-addChild:hover path {
    fill: var(--button-text-color);
    stroke: var(--button-text-color);
}

.tree-date,
.tree-name {
    color: var(--secondary-text-color);
    font-size: 12px;
    line-height: 1.9;
    font-weight: 400;
    word-wrap: break-word;
    width: 80px;
    text-align: center;
}

.tree-name {
    width: 135px;
    text-align: left;
}

.csf-belong {
    width: 8px;
    height: 24px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    display: block;
}

.csf-status {
    border-radius: 6px;
    padding: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 12px;
    width: 26px;
    text-align: center;
    color: var(--button-text-color);
    justify-content: flex-start;
    align-items: center;
    column-gap: 4px;
}

.csf-belong.good,
.csf-status.good {
    background-color: #039C55;
}

.csf-belong.inherited,
.csf-status.inherited {
    background-color: #BBB9C2;
}

.csf-belong.cuantion,
.csf-status.cuantion {
    background-color: #FE6900;
}

.csf-belong.stop,
.csf-status.stop {
    background-color: #E81A0C;
}

.tree-shortname {
    font-weight: 700;
    flex-grow: 1;
    max-width: calc(100% - 24px - 8px - 8px - 8px - 135px - 8px - 88px - 26px - 8px - 120px - 8px);
}

.hasComment .tree-shortname {
    max-width: calc(100% - 24px - 8px - 8px - 8px - 135px - 8px - 88px - 26px - 8px - 120px - 8px - 32px);
}

.last-child .tree-shortname {
    max-width: calc(100% - 8px - 8px - 135px - 8px - 88px - 26px - 8px - 120px - 8px);
}

.last-child.hasComment .tree-shortname {
    max-width: calc(100% - 8px - 8px - 135px - 8px - 88px - 26px - 8px - 120px - 8px - 32px);
}

.tree-actions {
    column-gap: 8px;
}

@media (hover: hover) {
    .itemControlComplete:hover path {
        stroke: var(--button-text-color);
        opacity: 1;
    }
}

@media only screen and (max-width: 1024px) {
    .strategic-plan-tree {
        padding-left: 16px;
    }

    .strategic-plan-tree ul {
        padding-left: 24px;
    }
}

.completedSVG {
    display: none;
}

.completedSVG.not_completed {
    display: block;
}

.completed .completedSVG.completed {
    display: block;
}

.completed .completedSVG.not_completed {
    display: none;
}

.actionListItemControlSave {
    display: none;
}

.actionListItemControlSave:hover path {
    fill: none;
}

.actionListItemControlClose {
    display: none;
}

.editMode .actionListItemControlSave, .editMode .actionListItemControlClose {
    display: block;
}

.editMode .actionListEdit, .editMode .actionListDelete {
    display: none;
}

.editMode .actionListComplete {
    display: none;
}

.actionListComplete:hover path {
    stroke: white;
}

.field-actionlist-outcome {
    display: none;
}

.field-actionlist-outcome.active {
    display: flex;
}

.actionListItemContentHeading h2 {
    font-size: 14px;
    color: black;
}

.actionListItemParametrWrap span {
    font-size: 13px;
}

.valuesWrap {
    padding: 0px !important;
}

.dropdownValueRateValue {
    background: var(--manual-bg);
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 6px;
    position: relative;
    padding: 8px 8px 8px 8px;
    column-gap: 8px;
    cursor: pointer;
}

.tableValueDropdown .dropdownValueRateValue {
    background: inherit;
}

.tableValueDropdown .dropdownValueRateValue:last-child {
    font-size: 13px;
}

.openValuesBtn.opened svg {
    transform: rotate(180deg);
}

.openValuesBtn .closed {
    display: block;
}

.new-table th {
    background: #3B68E0;
    color: var(--button-text-color);
    min-height: 48px;
    font-weight: 500;
    font-size: 14px;
    line-height: 40px;
    padding: 4px 0;
    padding-left: 8px;
}

.new-table th:first-child {
    border-top-left-radius: 6px;
}

.new-table th:last-child {
    border-top-right-radius: 6px;
}

.new-table td:first-child {
    border-left: 1px solid rgba(162, 168, 184, 0.5);
}

.new-table td:last-child {
    border-right: 1px solid rgba(162, 168, 184, 0.5);
}

.new-table .editFields {
    display: none;
}

.new-table tr.trEditable .editFields {
    display: block;
}

.new-table tr.trEditable .mainFields {
    display: none;
}

.new-table td {
    position: relative;
}

.amountPerPage {
    width: auto !important;
}

.mmTableHeader a {
    color: #fff !important;
    text-decoration: none;
}

.openValuesBtn.opened .closed {
    display: none;
}

.openValuesBtn .opened {
    display: none;
}

.openValuesBtn.opened .opened {
    display: block;
}

.cke_notifications_area {
    display: none;
}

.billing-company-pannel {
    display: none;
}

.billing-company-pannel.active {
    display: block;
}

.radio-inline {
    display: inline-block;
}


/* ==========================================================================
              Create Member Application
             ========================================================================== */

.memberAppWrap,
.addSubscription {
    padding: 0 !important;
    --bs-gutter-x: 8px;
    font-family: "Roboto", sans-serif;
}

.memberAppWrap .row,
.addSubscription .row {
    --bs-gutter-x: 8px;
}

.selectPlanTitle.h2,
.selectPlanDate,
.previewSectionHeader.h2,
.thMonthlyMembershipIncludes.h2 h4,
.memberDetailsTitle.h2 {
    margin: 0 !important;
    padding: 16px 0;
    font-family: "Roboto", sans-serif;
    color: var(--main-text-color) !important;
    font-weight: 700;
    font-size: var(--title-font-size-md);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
}

.selectPlanTitle.h2 {
    max-width: calc(100% - 110px);
}

.btn-secondary.planSelected {
    border-radius: 6px;
    padding: 16px 15px;
    font-style: normal;
    font-weight: 700;
    font-size: var(--title-font-size-sm);
    line-height: 1.2;
    color: var(--button-secondary-color);
    background: var(--button-secondary-bg);
    border: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
}

.btn-secondary.planSelected:hover,
.btn-secondary.planSelected.active:hover {
    background-color: var(--button-hover-color) !important;
    color: var(--button-text-color);
    cursor: pointer;
    border: none;
}

.btn-secondary.planSelected.active {
    background-color: var(--button-active-color) !important;
    color: var(--button-text-color);
    cursor: pointer;
    border: none;
}

.memberAppWrap .new-form-style-wrapper .control-label,
.addSubscription .userBillingPlanForm .control-label {
    padding-left: 7px;
    font-weight: 500;
    font-size: var(--main-font-size-sm) !important;
    line-height: 1.15;
    position: relative;
    margin: 0;
    color: var(--main-text-color);
}

.memberAppWrap .new-form-style-wrapper select,
.memberAppWrap .new-form-style-wrapper input,
.addSubscription .userBillingPlanForm select,
.addSubscription .userBillingPlanForm input {
    width: 100%;
    height: 40px !important;
    border: 1px solid var(--triple-text-color) !important;
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 1px 32px 1px 7px;
    color: var(--input-text-color);
    outline: 0 none;
    margin-bottom: 0 !important;


}

.memberAppWrap .new-form-style-wrapper select {
    background: transparent;
    background-image: url(../../images/pages/select-arrow.svg) !important;
    background-repeat: no-repeat;
    background-position-x: 97%;
    background-position-y: 18px;
}

.memberAppWrap .new-form-style-wrapper input:focus,
.addSubscription .userBillingPlanForm input:focus {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid var(--input-active-color) !important;
}

.memberAppWrap .new-form-style-wrapper .form-group,
.addSubscription .userBillingPlanForm .form-group {
    margin-bottom: 5px;
}

.memberAppWrap .inputCurrency,
.addSubscription .changeFormCurrency {
    width: 40px;
    height: 40px;
    top: 20px;
    left: 4px;
    font-size: 16px;
    background: var(--triple-text-color);
    text-align: center;
    padding-top: 0;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    color: #FFFFFF;
    line-height: 40px;
}

.memberAppWrap .inputWithCurrency,
.addSubscription .inputChangeFormCurrency {
    padding-left: 48px !important;
    padding-right: 180px !important;
}

.paymentTypeChangeFormDropDown .frequencyDropdown {
    width: 180px !important;
}

.paymentTypeChangeFormDropDown.selectIcon::after {
    bottom: 10px;
}

.memberAppWrap .paymentTypeDropDown,
.addSubscription .duesItem .paymentTypeChangeFormDropDown {
    position: absolute;
    top: 20px;
    right: 4px;
}

.memberAppWrap .new-form-style-wrapper .paymentTypeDropDown select,
.addSubscription .userBillingPlanForm .paymentTypeChangeFormDropDown select {
    background-position-x: 94%;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}


.memberAppWrap .new-form-style-wrapper textarea.form-control,
.addSubscription .userBillingPlanForm textarea.form-control {
    width: 100%;
    height: 120px;
    border: 1px solid var(--triple-text-color);
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 1px 32px 1px 7px;
    color: var(--input-text-color);
    outline: 0 none;
    resize: vertical;
}

.memberAppWrap .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
.addSubscription .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}

.memberAppWrap .hrPlans,
.addSubscription .hrPlans {
    border-top: 2px solid var(--triple-text-color);
    background: transparent;
}

.membership-level-table th,
.bio-table th {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 500 !important;
}

.memberAppWrap .membership-level-table th,
.addSubscription .membership-level-table th,
.bio-table th {
    border: none !important;
}

.memberAppWrap .membership-level-table.previewTable,
.memberAppWrap .membership-level-table.tableMembershipIncludes,
.bio-table {
    margin-top: 0 !important;
}

.memberAppWrap .table.previewTable,
.addSubscription .table.membership-level-table,
.bio-table {
    width: 100%;
    margin-bottom: 16px;
    color: var(--main-text-color);
    border: none;
    border-radius: 6px;
    border-bottom: 1px solid rgba(162, 168, 184, 0.5) !important;
}

.memberAppWrap .membership-level-table.previewTable th,
.addSubscription .table.membership-level-table th,
.bio-table th,
.table.membership-level-table th {
    background-color: #3B68E0 !important;
    text-transform: none !important;
    font-family: Roboto, sans-serif !important;
    vertical-align: middle !important;
    border-right: none !important;
    padding: 8px;
}

.memberAppWrap .membership-level-table.previewTable th:first-child,
.addSubscription .table.membership-level-table th:first-child,
.table.membership-level-table th:first-child,
.bio-table th:first-child {
    border-top-left-radius: 6px;
}

.memberAppWrap .membership-level-table.previewTable th:last-child,
.addSubscription .table.membership-level-table th:last-child,
.table.membership-level-table th:last-child,
.bio-table th:last-child {
    border-top-right-radius: 6px;
}

.memberAppWrap .membership-level-table.previewTable td,
.addSubscription .table.membership-level-table td,
.table.membership-level-table td,
.bio-table td {
    border: none !important;
    padding: 4px !important;
    background-color: #fff;
}

.memberAppWrap .membership-level-table.previewTable tbody tr,
.addSubscription .table.membership-level-table tbody tr,
.table.membership-level-table tbody tr,
.bio-table tbody tr {
    border-left: 1px solid rgba(162, 168, 184, 0.5) !important;
    border-right: 1px solid rgba(162, 168, 184, 0.5) !important;
}

.memberAppWrap .membership-level-table tbody tr:last-child,
.addSubscription .table.membership-level-table tbody tr:last-child,
.table.membership-level-table tbody tr:last-child,
.bio-table tr:last-child {
    border-bottom: 1px solid rgba(162, 168, 184, 0.5) !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
}

.memberAppWrap .membership-level-table.previewTable tbody tr:last-child td:first-child,
.addSubscription .table.membership-level-table tbody tr:last-child td:first-child,
.table.membership-level-table tbody tr:last-child td:first-child,
.bio-table td:first-child {
    border-bottom-left-radius: 6px;
}

.memberAppWrap .membership-level-table.previewTable tbody tr:last-child td:last-child,
.addSubscription .table.membership-level-table tbody tr:last-child td:last-child,
.table.membership-level-table tbody tr:last-child td:last-child,
.bio-table td:last-child {
    border-bottom-right-radius: 6px;
}

.memberAppWrap .membership-level-table.previewTable td > div,
.addSubscription .table.membership-level-table td > div,
.table.membership-level-table td > div,
.bio-table td > div {
    background: var(--manual-bg) !important;
    width: 100%;
    min-height: 40px;
    border-radius: 6px;
    padding: 8px !important;
}

.memberAppWrap .membership-level-table.previewTable td:first-child,
.addSubscription .table.membership-level-table td:first-child,
.table.membership-level-table td:first-child,
.bio-table td:first-child {
    border: none !important;

}

.memberAppWrap .membership-level-table.previewTable td:last-child,
.addSubscription .table.membership-level-table td:last-child,
.table.membership-level-table td:last-child,
.bio-table:last-child {
    border: none !important;
}

.cellHeight {
    position: relative;
}

.memberAppWrap .membership-level-table td.cellHeight > div,
.addSubscription .membership-level-table td.cellHeight > div,
.membership-level-table td.cellHeight > div,
.bio-table td.cellHeight > div {
    position: absolute;
    bottom: 4px;
    top: 4px;
    left: 4px;
    right: 4px;
    height: auto;
    width: auto;
    box-sizing: border-box;
}

.addSubscriptionBtns {
    justify-content: center;
    margin: 16px 0;
    column-gap: 8px;
}

#facilitatorNotesPjax .itemUserInfoImgWrap img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


.preview p.pb-5 {
    padding-bottom: 16px !important;
    margin-bottom: 0 !important;
}


.tableMembershipIncludes .member-application-checkbox li {
    min-height: 40px;
    font-size: var(--main-font-size);
    border-radius: var(--border-radius-sm);
    margin-bottom: 8px;
    border: 1px solid var(--triple-text-color);
    padding-left: 56px !important;
    padding: 8px 0;
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.tableMembershipIncludes .member-application-checkbox li:hover {
    border: 1px solid var(--input-hover-color);
}

.tableMembershipIncludes .member-application-checkbox li.active {
    border: 1px solid var(--input-active-color);
}

.tableMembershipIncludes .member-application-checkbox li label {
    color: var(--main-text-color);
    font-size: var(--main-font-size);
    margin-left: 0;
}

.tableMembershipIncludes .member-application-checkbox li:after {
    left: 16px;
    top: 50%;
    border: 1px solid var(--triple-text-color);
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.tableMembershipIncludes .member-application-checkbox li:after:hover {
    border: 1px solid var(--input-hover-color);
}

.tableMembershipIncludes .member-application-checkbox li.active:after {
    border: 1px solid var(--input-active-color);
    background-color: var(--input-active-color);
}

.tableMembershipIncludes.membership-level-table .member-application-checkbox li:before {
    /*content: "\2714";*/
    font-size: 13px;
    left: 21px;
    -webkit-transform: translateY(-57%);
    -ms-transform: translateY(-57%);
    -o-transform: translateY(-57%);
    transform: translateY(-57%);
}

.tableMembershipIncludes.membership-level-table .member-application-checkbox li .icludesInput,
.tableMembershipIncludes.membership-level-table .member-application-checkbox li .includeSelect {
    border-bottom: 1px solid var(--triple-text-color);
    font-size: var(--main-font-size) !important;
    color: var(--main-text-color);
    font-weight: 400;
}

.memberAppWrap .tableMembershipIncludes.membership-level-table select.includeSelect {
    background: transparent !important;
    background-image: url(../../images/pages/select-arrow.svg) !important;
    background-repeat: no-repeat !important;
    background-position-x: 85px !important;
    background-position-y: 13px !important;
    cursor: pointer;
    outline: 0 none;
}

.memberAppWrap .membership-level-table.tableMembershipIncludes {
    margin-bottom: 16px;
}

.memberAppWrap .member-application-checkbox.services-select-option {
    padding-bottom: 16px;
}

.memberAppWrap .new-form-style-wrapper input.showBillingCompanyCheckbox {
    height: 24px !important;
    width: 24px !important;
    margin-left: -40px !important;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
}

.memberAppWrap .new-form-style-wrapper input.showBillingCompanyCheckbox:checked {
    border: 1px solid var(--input-active-color) !important;
    background-color: var(--input-active-color);
}

.memberAppWrap .new-form-style-wrapper input.showBillingCompanyCheckbox:checked::before {
    display: block;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 4px;
    content: "\2714";
    font-size: 13px;
    left: 7px;
}

.memberAppWrap .showBillingCompanyCheckboxWrapper label {
    padding-left: 40px !important;
    font-weight: 500;
    font-size: var(--main-font-size) !important;
    color: var(--main-text-color);
    line-height: 24px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
}

.col-md-6 .field-memberapplicationcreateform-how_did_you_hear select#memberapplicationcreateform-how_did_you_hear {
    background-position-x: 97% !important;
}

.col-md-12 .field-memberapplicationcreateform-how_did_you_hear select#memberapplicationcreateform-how_did_you_hear {
    background-position-x: 99% !important;
}

.memberAppWrap .actions.wizard-actions {
    margin: 16px 0 24px;
}

.memberAppWrap .actions.wizard-actions ul {
    margin: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

.memberAppWrap .actions.wizard-actions ul .btn {
    padding: 12px 15px;
    color: var(--button-text-color) !important;
    display: block !important;
    font-size: var(--main-font-size) !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    text-align: center !important;
    background-color: var(--button-active-color) !important;
    border: 0 !important;
    cursor: pointer !important;
    margin-right: 0 !important;
    white-space: nowrap;
    outline: 0 none;
}

.memberAppWrap .actions.wizard-actions ul .btn:hover {
    padding: 12px 15px;
    color: var(--button-text-color) !important;
    display: block !important;
    font-size: var(--main-font-size) !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    line-height: 1 !important;
    text-align: center !important;
    background-color: var(--button-hover-color) !important;
    border: 0 !important;
    cursor: pointer !important;
    margin-right: 0 !important;
    white-space: nowrap;
}

.memberAppWrap .new-form-style-wrapper textarea.form-control:focus {
    width: 100%;
    height: 120px;
    border: 1px solid var(--input-active-color);
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 1px 32px 1px 7px;
    color: var(--input-text-color);
    outline: 0 none;
}

.memberAppWrap .inputPercent {
    width: 40px;
    height: 38px;
    top: 20px;
    right: 4px;
    font-size: 16px;
    background: var(--triple-text-color);
    text-align: center;
    padding-top: 0;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    color: #FFFFFF;
    line-height: 40px;
}

.field-memberapplicationcreateform-payment_link {
    position: relative;
}

#memberapplicationcreateform-payment_link {
    padding-left: 76px !important;
}

.memberAppWrap .inputProtocol {
    width: 60px;
    height: 38px;
    top: 20px;
    left: 0px;
    font-size: 14px;
    background: var(--triple-text-color);
    text-align: center;
    padding-top: 0;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    color: #FFFFFF;
    line-height: 40px;
}


@media only screen and (min-width: 1400px) {
    .tableMembershipIncludes .member-application-checkbox ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(7, 1fr);
        grid-auto-flow: column;
        column-gap: 8px;
    }
}

@media only screen and (max-width: 1200px) {
    .memberAppWrap .new-form-style-wrapper select {
        background-position-x: 94%;
    }
}

@media screen and (max-width: 680px) {
    .memberAppWrap .member-application-checkbox li label {
        display: inline-block;
    }
}

@media only screen and (max-width: 1024px) {
    .memberAppWrap .new-form-style-wrapper select {
        background-position-x: 96%;
    }
}


@media only screen and (max-width: 768px) {

    .memberAppWrap {
        padding-left: 8px !important;
    }

    .container.member-applications-form {
        padding-right: var(--bs-gutter-x, 0.75rem);
        padding-left: var(--bs-gutter-x, 0.75rem);
    }

    .memberAppWrap .new-form-style-wrapper select {
        background-position-x: 97%;
    }
}

.facilitatorNoteItemForm {
    display: none;
}

.openForm .facilitatorNoteItemTitle {
    display: none;
}

.openForm .facilitatorNoteItemText {
    display: none;
}

.openForm .facilitatorNoteItemForm {
    display: block;
}

.facilitatorNoteItem.open .facilitatorNoteItemText {
    display: block;
}

.facilitatorNoteItem.open.openForm .facilitatorNoteItemText {
    display: none;
}

/* ==========================================================================
              PAYMENT INFORMATION
             ========================================================================== */

/*#submit {
        padding: 6px 15px;
        font-size: 14px;
        line-height: 1.57142857;
        border-radius: 3px;
        color: #fff;
        display: block;
        font-weight: 500;
        text-align: center;
        border: 0;
        cursor: pointer;
        margin-left: 10px;
        background: #1A60AC;
    }

    #submitError {
        color: red;
    }

    #submitSuccess {
        color: green;
    }

    .submitbtn {
        line-height: 14px;
        font-size: 15px;
        bottom: -5px;
        left: 42px;
        display: block;
    }

    .btnWrapp {
        padding-left: 20px;
    }


    #form.hidden {
        display: none;
    }

    .btnNext:disabled {
        background-color: #677f9a;
        cursor: not-allowed;
    }

    .cust-alert {
        display: none;
    }

    .cust-alert.active {
        display: block;
    }

    .panel {
        box-shadow: none;
    }*/

.paymentInfoWrap .view-header-hover {
    padding: 24px 0;
}

.paymentInfoWrap .stored-method-list,
.paymentInfoWrap .payment-type-list {
    align-items: stretch;
    row-gap: 16px;
}

.paymentInfoWrap .stored-method-line,
.paymentInfoWrap .payment-type-line {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--triple-text-color);
    cursor: pointer;
}


.paymentInfoWrap .stored-method-line:hover,
.paymentInfoWrap .selected-method-line:hover,
.paymentInfoWrap .payment-type-line:hover {
    border: 2px solid var(--input-hover-color);
}

.paymentInfoWrap .selected-method-line {
    border: 2px solid var(--input-active-color);
}

.paymentInfoWrap .stored-method-line .stored-method,
.paymentInfoWrap .payment-type a {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    column-gap: 8px;
}

.paymentInfoWrap .stored-method-info {
    flex-grow: 1;
    column-gap: 8px;
    align-items: center;
}

.stored-method-info-text {
    flex-grow: 1;
    line-height: 1;
    row-gap: 4px;
}

.paymentInfoWrap .iconControl:hover rect {
    fill: var(--button-hover-color);
    opacity: 1;
}

.paymentInfoWrap .iconControl:hover path {
    fill: var(--button-text-color);
    opacity: 1;
}

.paymentInfoWrap .dcsfContorlFavorite:hover svg rect {
    fill: #feb912;
    opacity: 1;
}

.paymentInfoWrap .dcsfContorlFavorite.active svg rect {
    fill: #feb912;
    opacity: 1;
}

.paymentInfoWrap .stored-method-brand-icon {
    width: 32px;
    height: 32px;
}

.paymentInfoWrap .stored-large-text {
    font-weight: bold;
}

.paymentInfoWrap .small-text {
    font-size: var(--small-text-font-size);
    color: var(--triple-text-color);
}

.paymentInfoWrap .large-text {
    flex-grow: 1;
}

.paymentInfoWrap .payment-type a:hover .large-text {
    color: var(--main-text-color);
}

.inputChangeFormCurrency {
    padding-left: 50px;
}

.paymentTypeChangeFormDropDown {
    position: absolute;
    top: 20px;
    right: 0px;
}

.paymentTypeChangeFormDropDown .frequencyDropdown,
.addSubscription .paymentTypeChangeFormDropDown .frequencyDropdown {
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    border-radius: unset !important;
}

.membershipDuesRow {
    position: relative;
}

.inputChangeFormCurrency {
    padding-left: 50px !important;
}

.disabledButton {
    background: gray;
    color: #fff;
    cursor: not-allowed;
}

.disabledButton:hover {
    background: gray;
}


.checkBoxTemplate .help-block {
    display: none
}

.checkBoxTemplate.has-error label {
    color: var(--warning-red);
}

.cancelSchedule {
    cursor: pointer;
}


label.checkbox.path {
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
}

.resignCheckbox {
    row-gap: 8px;
    align-items: stretch;
}

.additionalCheckboxForm {
    display: none;
    padding: 16px 0;
}

.additionalCheckboxForm.active {
    display: block;
}

.additionalCheckboxForm .row {
    --bs-gutter-x: 8px;
}


.label-info {
    background-color: #1A60AC;
}

.label-primary {
    background-color: #62a8ea;
}

.label-warning {
    background-color: var(--attention-yellow);
}

.label-danger {
    background-color: var(--warning-red);
}

.label-success {
    background-color: var(--success-green);
}

.label-default {
    background-color: var(--button-disabled-color);
}

.table .label,
.duesItem .label {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 10px;
    color: #fff;
    width: 100%;
    margin-right: 8px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 6px;
}

.duesItem .label {
    display: inline-block;
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 10px;
    color: #fff;
    width: auto;
    margin-right: 8px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 6px;
}

.field-refundform-dues {
    position: relative;
}

.inputDuesCurrency {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 20px;
    left: 1px;
    font-size: 16px;
    background: var(--triple-text-color);
    text-align: center;
    padding-top: 0;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    color: #FFFFFF;
    line-height: 40px;
}

.refundDues {
    padding-left: 48px !important;
    padding-right: 180px !important;
}

.refundWrap {
    align-items: stretch;
}

.changeFormCurrency {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 20px;
    left: 1px;
    font-size: 16px;
    background: var(--triple-text-color);
    text-align: center;
    padding-top: 0;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    color: #FFFFFF;
    line-height: 40px;
}

.duesWrap {
    justify-content: flex-start;
    padding-bottom: 16px;
}

.duesItem .paymentTypeChangeFormDropDown {
    position: absolute;
    top: 20px;
    right: 11px;
}

.skipPaymentsCount {
    padding-top: 8px;
}


.extendLoaWrap {
    align-items: stretch;
    row-gap: 8px;
}

.extendLoaRow {
    display: grid;
    grid-template-columns: min-content 1fr;
    column-gap: 16px;
    white-space: nowrap;
    align-items: center;
    row-gap: 4px;
}

.label-dark {
    background: var(--triple-text-color);
}

.wizard-item form.hasError label.radio {
    color: red;
}

.prioritizationGraphWrappper {
    margin-top: 30px;
}

.prioritizationGraphWrappper .horizontalDiagramItemTitle {
    width: 200px;
}

.prioritizationGraphWrappper .visionSlider .bgBar .bgBaritem {
    width: 4%;
}

.totalScoreBtn.complete {
    background: green;
}

.totalScoreBtn.error {
    background: red;
}

.table-assign-categories-list tr {
    position: relative;
}

.changeForm .hintText:nth-child(2) {
    padding: 16px 0 8px 0;
}

.changeForm .hintText:last-child {
    padding: 0px 0 16px 0;
}

#company_size {
    display: none;
}

#company_size.active {
    display: block;
}

#bdViewSettings {
    display: none;
}

#bdViewSettings.active {
    display: flex;
}

.reportTabs {
    display: none;
}

.reportTabs.active {
    display: block;
}

.blueprintReportPrintContainer .mainLogo {
    padding-top: 0px;
}

.blueprintReportBlock .pastEvent .itemBange {
    background: #bbb9c2;
    border-radius: 10px;
    width: 8px;
    left: 6px;
    top: 6px;
    height: calc(100% - 12px);
    max-height: 64px;
}

.blueprintReportBlock .todayEvent .itemBange {
    background: #83c29d;
    border-radius: 10px;
    width: 8px;
    left: 6px;
    top: 6px;
    height: calc(100% - 12px);
    max-height: 64px;
}


.assessmentWrap {
    align-items: stretch;
    row-gap: 16px;
}


.assessmentBtnsWrap {
    column-gap: 8px;
    row-gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.separateRadio {
    justify-content: flex-start;
    column-gap: 16px;
}

.separateRadio .radio-custom {
    justify-content: flex-start;
    column-gap: 8px;
    align-items: center;
}

.separateRadio .radio-custom label {
    margin-right: 8px;
}

.assessmentWrap .checkbox-primary {
    border-bottom: 1px solid var(--triple-text-color);
    padding-bottom: 8px;
    padding-top: 16px;
}

.assessmentWrap .checkbox-primary label.checkbox.path {
    font-size: var(--main-font-size-lg);
    font-weight: bold;
}

.table-assign-categories-list.table > :not(caption) > * > * {
    padding: 8px 0;
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}

.table-assign-categories-list .mmTableDropdownBtn {
    height: 24px;
    display: inline-block;
    line-height: 24px;
}

.table-assign-categories-list td:last-child {
    text-align: right;
    position: relative;
}

.table-assign-categories-list tr:last-child td {
    border-bottom: none;
}

.table-assign-categories-list .title {
    position: relative;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
}

.table-assign-categories-list td {
    white-space: nowrap;
}

.table-assign-categories-list.table td {
    width: auto;
}

.table-assign-categories-list.table td:nth-child(3) {
    width: 100%;
    padding-left: 32px;
}

.table-assign-categories-list.table td:first-child {
    width: 48px;
    padding-right: 16px;
}

.table-assign-categories-list.table td:last-child {
    min-width: 56px;
    padding-left: 32px;
}

.diagStatus {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 10px;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
}

@media only screen and (max-width: 1024px) {
    .separateRadio {
        row-gap: 8px;
        flex-wrap: wrap;
    }
}


@media only screen and (max-width: 768px) {
    .table-assign-categories-list.table tr {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        padding-right: 24px;
        column-gap: 16px;
    }

    .table-assign-categories-list.table td:first-child {
        width: auto;
        padding-right: 0;
    }

    .table-assign-categories-list.table td:nth-child(3) {
        width: auto;
        padding-left: 0;
    }

    .table-assign-categories-list.table td:nth-child(4) {
        display: flex;
        width: 100%;
    }

    .table-assign-categories-list.table td:last-child {
        display: flex;
        width: 24px;
        min-width: 24px;
        position: absolute;
        top: 12px;
        right: 0;
        padding: 0;
    }
}

div[data-type="Goal"] .csf-belong {
    display: block;
    min-width: 8px;
}

.csf-belong {
    display: none;
}

.skipPaymentsCountDropdown {
    display: none;
}

.skipPaymentsCountDropdown.active {
    display: block;
}

.boardPhotoWrap {
    width: 300px;
    height: auto;
}

.boardPhotoWrap img {
    width: 100%;
    height: auto;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:first-child span.selectedMark.danger-response {
    background: lightcoral;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:last-child span.selectedMark.danger-response {
    background: lightcoral;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:first-child span.selectedMark.success-response {
    background: lightgreen;
}

.tableBdAnalysisQuestionsFull .tableRow .tableSubRow div:last-child span.selectedMark.success-response {
    background: lightgreen;
}

.memberResponses {
    margin-top: 20px;
}


/* ==========================================================================
              Dashboard
             ========================================================================== */

.dashboardWidgetContent .scrollSm.containerColumn:not(.userMoreMenuWrap) {
    padding: 0 8px 8px 16px;
    align-items: stretch;
    overflow-y: auto;
    height: 100%;
}

.dashboardContent.scroll.containerColumn:not(.userMoreMenuWrap) {
    overflow-x: hidden;
}

.dashboardWidgetContent {
    margin-left: -16px;
    margin-right: -8px;
    padding-top: 8px;
}

.dashboardHeading {
    align-items: center;
}

.dashboardContent .groupDetailTitle {
    justify-content: flex-start;
    column-gap: 8px;
    line-height: 25px;
}

.btnsGroup {
    justify-content: flex-end;
    align-items: flex-start;
    column-gap: 8px;
}

.dashboardContent .itemControlSort {
    width: 24px;
    min-width: 24px;
}

.groupDetailSubTitle {
    color: var(--input-active-color);
    font-size: var(--main-font-size);
    font-weight: 700;
    line-height: 1.1;
    padding-top: 24px;
}

.itemControlDash {
    cursor: pointer;
    height: 24px;
}

.itemControlDash:hover path,
.itemControlDash:active path,
.itemControlDash.active:hover path {
    fill: var(--button-text-color);
}

.itemControlDash:hover rect,
.itemControlDash.active:hover rect {
    fill: var(--button-hover-color);
}

.dashboardContent .groupDetailTitle span {
    max-width: calc(100% - 32px - 8px);
}

.dashBtnSort {
    height: 40px;
    width: 40px;
    min-width: 40px;
}

.dashboardDropdownArea {
    padding-top: 16px;
}

.dashAnnouncement {
    padding: 16px 16px 16px 24px;
    margin-bottom: 10px;
    position: relative;
}

.dashAnnouncement .alert-primary {
    color: var(--main-text-color);
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;

}

.dashAnnouncement .itemControlClose {
    position: absolute;
    top: 0;
    right: 0;
}

.dashAnnouncement:before {
    content: '';
    width: 8px;
    height: calc(100% - 32px);
    background: var(--menu-active-color);
    position: absolute;
    top: 16px;
    left: 8px;
    border-radius: 6px;
}

.alertTitleWrap {
    column-gap: 16px;
    align-items: center;
}

.alertTitle {
    color: var(--main-text-color);
    font-size: var(--title-font-size-lg-s);
    font-weight: 700;
    line-height: 1;
    width: 100%;
    padding-right: 32px;
}

.allertDescription {
    color: var(--secondary-text-color);
    font-size: var(--main-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: 1.8;
    padding-top: 16px;
}

.allertDescription a {
    color: var(--inline-link-color);
    font-size: var(--main-font-size);
    font-weight: 700;
    line-height: 1.8;
    text-decoration-line: underline;
}

.dashboardContent .discussionsPostWrap {
    margin-bottom: 8px;
}

.grid-stack {
    margin: 0 -10px;
}

.dashboardContent .grid-stack-item {
    width: 50%;
}

.dashboardContent .bdCategoriesWrap {
    padding-right: 0;
}

.dashboardContent .responseGraphMainWrap {
    padding-right: 24px;
}

.dashboardContent .valueColumn:first-child {
    max-width: none;
}

.dashboardContent .valueImportantColumn:first-child {
    width: 100%;
}

.demoImg {
    height: calc(100% - 32px);
}

.demoText {
    padding: 0;
    display: block;
    line-height: 24px;
    height: 24px;
}

.dashboardContent .valueVeryImportantColumn .valueItem,
.dashboardContent .valueImportantColumn .valueItem {
    max-width: none;
}

.dashboardContent .visionDiagram {
    padding-right: 16px;
    padding-top: 16px;
}

.dashboardContent .strategic_advantage_wrap label {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
}

.dashboardContent .strategic_advantage_wrap label + div {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--secondary-text-color);
    margin-bottom: 8px;
}

.dashboardContent .strategic_advantage_wrap .groupDetailTitle {
    font-weight: 700;
    font-size: var(--title-font-size-lg-s);
    line-height: 31px;
    margin-top: 8px;
}

.dashboardContent .strategic_advantage_wrap .groupDetailTitle + div {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--main-text-color);
    margin-bottom: 8px;
}

.strategic_advantage_item {
    column-gap: 4px;
}

.dashboard-values-box {
    align-items: stretch;
    row-gap: 8px;
}

.dashboard-scrollable-box-vd,
.dashboard-scrollable-box-vd .strategic_advantage_item {
    align-items: stretch;
}

.dashboard-scrollable-box .strategic_advantage_item,
.dashboard-scrollable-box .strategic_advantage_item label,
.dashboard-scrollable-box .strategic_advantage_item > div {
    display: inline;
}

.dashboard-scrollable-box-vd {
    row-gap: 8px;
}

/*motivatorsGraphWrap*/

.dashboardContent .motivatorsGraphWrap {
    padding: 16px 8px;
    box-shadow: none;
}

.dashboardContent .motivatorsGraphWrap .groupDetailTitle {
    max-width: calc(100% - 41px);
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) {
    padding: 16px 16px 24px 152px;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphBg {
    padding: 24px 0 0;
    background: repeating-linear-gradient(to right, transparent, rgba(120, 116, 134, 0.2) 1px, transparent 1px, transparent 20%, rgba(120, 116, 134, 0.2) 1px);
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames {
    left: -3px;
    right: -11px;
    top: 1px;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames.topNames span:nth-child(-n+10),
.dashboardContent .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames.topNames span:nth-child(even) {
    display: none;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .hBarAxesNames.bottomNames {
    display: none;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphRow {
    flex-direction: column;
    padding: 8px 0 30px;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphPart {
    width: 100%;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphRowTitle {
    top: -8px;
    right: auto;
    left: -145px;
    width: 145px;
    text-align: left;
}


.dashboardContent .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphTitleWrap {
    right: auto;
    left: -140px;
    width: 140px;
    flex-direction: row-reverse;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .rightPart .motivatorsGraphTitleWrap {
    flex-direction: row-reverse;
    right: auto;
    left: -140px;
    width: 140px;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphPartInner {
    padding: 0;
}

.dashboardContent .motivatorsGraph:not(.behavioralGraph) .motivatorsGraphItemBar {
    right: auto;
    left: 0;
}

.dashboardContent .behavioralGraph {
    padding: 16px 78px 24px 78px;
}

.dashboardContent .behavioralGraph .motivatorsGraphTitleWrap {
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    flex-direction: column;
    column-gap: 12px;
    width: 70px;
    left: -78px;
    bottom: -16px;
    line-height: 1.7;
}

.dashboardContent .behavioralGraph .rightPart .motivatorsGraphTitleWrap {
    flex-direction: column;
    align-items: flex-start;
    left: calc(100% + 8px);
    right: auto;
    width: 70px;
}

.dashboardContent .behavioralGraph .motivatorsGraphRow {
    margin-bottom: 24px;
}

/*end motivatorsGraphWrap*/

.dashboardContent .discGraphicItem .vBarWrap {
    padding-left: 8px;
}

.dashboardContent .dashboardElementContainer {
    padding: 16px;
    height: 100%;
    align-items: stretch;
    box-shadow: none;
}


.dashboardWidgetContent .performanceContent {
    padding: 0 8px 0 0;
}

.dashboardWidgetContent .textareasTable .tableValue span {
    padding-left: 8px;
}

.dashboardWidgetContent .performanceTablesWrap .textareasTable .tableValue span {
    padding-left: 4px;
    font-size: 11px;
    line-height: 27px;
    color: var(--secondary-text-color);
    background: var(--small-button-bg);
}

.dashboardWidgetContent ul li .tree-li-wpcust {
    border: none;
    padding: 8px;
}

.dashboardWidgetContent .tree-li-wrapper > span {
    display: block;
    position: static;
}

.dashboardWidgetContent .leaf-info-wrapper {
    flex-grow: 1;
}

.dashboardWidgetContent .tree-date,
.dashboardWidgetContent .tree-name {
    color: var(--secondary-text-color);
    font-size: 12px;
    line-height: 1.9;
    font-weight: 400;
    word-wrap: break-word;
    text-align: left;
}

.tree-shortname {
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .dashboardContent.scroll.containerColumn:not(.userMoreMenuWrap) {
        padding: 0 8px 16px 16px;
    }

    .dashboardWidgetContent {
        margin-right: -16px;
    }


}

@media (max-width: 480px) {
    .dashboardContent .itemControlSort {
        display: block;
    }

    .dashboardHeading {
        flex-wrap: wrap;
        row-gap: 16px;
    }
}

.itemControlDash.active rect {
    fill: var(--button-active-color);
}

.dashboardDropdownArea {
    width: 100%;
}

.dashAnnouncement .alert-primary {
    width: 100%;
}


/* ==========================================================================
              Profile print page
             ========================================================================== */

.page-report {
    padding-top: 0;
}

.page-report .profileContent {
    overflow-y: visible;
}

.profilePagePrint .profilePageImage {
    display: none;
}

.profilePagePrint .profilePhotoWrap {
    min-height: 128px;
    min-width: 128px;
}

.profilePagePrint .profileUserPhotoWrap {
    top: 0;
    left: 0;
}

.profilePagePrint #personalInfo {
    position: relative;
}

.profilePagePrint #personalInfo .profileInfoHead {
    position: absolute;
    top: -110px;
    left: 140px;
}

.profilePagePrint .profileUserContact {
    padding-top: 8px;
}

.profilePagePrint #companyInfo {
    position: relative;
    z-index: 10000;
}

.profilePagePrint .profileWrap {
    overflow-y: hidden;
}

.profilePagePrint .profileWrap:last-child {
    padding-left: 0;
    row-gap: 0;
}

.profilePagePrint .profileWrap:last-child .profileColTextWrap,
.profilePagePrint .profileWrap:last-child .profileTitle {
    padding-left: 24px;
}

.profilePagePrint .profileWrap:last-child .profileColTextWrap {
    padding-top: 10px;
}

.dashBtnSort {
    display: none;
}


/* ==========================================================================
              post print page
             ========================================================================== */

.discussionsPostPrintPage.contentWrap {
    padding-top: 0;
}

.discussionsPostPrintPage .scroll.containerColumn:not(.userMoreMenuWrap) {
    overflow: visible;
}

.discussionsPostPrintPage .discussionsPostWrap {
    padding: 0;
    box-shadow: none;
}

.discussionsPostsPage .itemsWrap {

}

.videoTutorialLinkAbsolute {
    position: absolute;
    right: 24px;
    top: -110px;
}


.showHelpVideo {
    padding-right: 107px;
}

.documentLibrariesPage {
    position: relative;
}

.documentLibrariesPage .videoTutorialLinkAbsolute {
    right: 24px;
    top: -36px;
}

.noVideo.accCompanyHeadingSwitch {
    right: 16px;
}

.spin .spinner-demo {
    animation: spin 1s linear infinite;
}


.referalWrap {
    padding: 16px;
}

.steps-area .image-holder-country {
    position: absolute;
    left: 15px;
    bottom: 15px;
    max-height: 250px;
    width: 150px;
}


.stretchDiv {
    flex-grow: 1;
    height: 100%;
}

.defaultListView ul {
    list-style-type: disc;
    list-style: disc;
    padding-left: 20px;
}

.defaultListView ul li {
    display: list-item;
    list-style: disc;
}

.defaultListView ol {
    list-style-type: decimal;
    list-style: decimal;
    padding-left: 20px;
}

.defaultListView ol li {
    display: list-item;
    list-style: decimal;
}

.counter-number-group {
    display: block;
    width: 100%;
}

.meetingFormSelect .inputWrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
}

.notFullWidthForm form {
    width: 99%;
}

.btn-not-saved {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.kpiField.error {
    border: 1px solid #ff0000 !important;
}

.financial-editable.error {
    border: 1px solid #ff0000 !important;
}


.singleItemPrint.itemsWrap {
    padding-top: 0;
}

.singleItemPrint .item {
    border: none;
}

.singleItemPrint .itemInnerWrap {
    padding-right: 0;

}

.singleItemPrint .itemUserInfo,
.singleItemPrint .commitmentItemUserInfo {
    width: 100%;
    column-gap: 16px;
}

.singleItemPrint .itemUserInfoImgWrap {
    width: 80px;
    height: 80px;
}

.assignTitle {
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    width: calc(100%);
}

.eventAditionalFields {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.singleItemPrint .itemTextInnerWrap {
    padding-top: 16px;
}

.singleItemPrint .itemTextInnerWrap > * {
    margin-bottom: 32px;
}

.singleItemPrint .commitmentStatus {
    margin-left: 0;
}

.saveAndContinueBtn {
    margin-left: 5px;
}

.label-himap {
    background-color: #804687;
}

.label-bponly {
    background-color: #be6b27;
}

.resignWrapper {
    font-weight: bold;
    color: red;
    font-size: 14px;
}

.loaWrapper {
    font-weight: bold;
    color: #c38615;
    font-size: 14px;
}

.waiveWrapper {
    font-weight: bold;
    color: #2c81fb;
    font-size: 14px;
}

.loaWrapperNext {
    font-weight: bold;
    color: #ad3e75;
    font-size: 14px;
}

.loaExpiredWrapper {
    font-weight: bold;
    color: #E81A0C;
    font-size: 14px;
}

.resignWrapper a, .loaWrapper a, .loaWrapperNext a, .waiveWrapper a, .loaExpiredWrapper a {
    text-decoration: underline;
}

.errorInfo {
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.16;
    color: red;
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
}

.errorInfo::before {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -8px;
    content: "";
    background-image: url(../../images/pages/warning-icon.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 14px;
    height: 12px;
}

.valueImportantColumn .droppable {
    min-height: 500px;
}

.valueVeryImportantColumn .droppable {
    min-height: 500px;
}

.readonlyGroup {
    background: #eee;
    border: 1px solid #ddd;
}
.form-group.has-error input {
    border: 1px solid #E81A0C;
}
@media only screen and (min-width: 1400px) {
    .tableMembershipIncludes.tableMembershipLms .member-application-checkbox ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-auto-flow: column;
        column-gap: 8px;
    }
}
.table.membership-level-table.tableMembershipLms tbody tr {
    border: 0px !important;
}
.table.table-prospect.membership-level-table.loader-wrapper.tableMembershipLms tbody tr td{
    padding-left: 10px !important;
}
.lmsTitle {
    font-weight: bold;
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 10px;
}