/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    /*Official Branding colors are now*/
    --denim-blue: #002F5A;
    --bright-blue: #0063B0;
    --dark-navy: #0A153C;
    --orange: #f78f3f;
    /*-------------------------------*/

    --main-text-color: #1b335a;
    --secondary-text-color: #787486;
    --input-text-color: #514e5b;
    --triple-text-color: #a2a8b8;
    --light-text-color: #e6e7e9;

    --manual-bg: #f9f9fb;

    --bg: #ffffff;

    --button-text-color: #ffffff;
    --button-background-color: #203b6e;
    --small-button-bg: #e8e9ed;
    --button-hover-color: #2c81fb;
    --button-active-color: #3264e8;
    --button-disabled-color: #bbb9c2;

    --button-secondary-bg: #ecf0ff;
    --button-secondary-color: #3264e8;

    --category-bg: #3ba2df;
    --category-color: #ffffff;

    --menu-hover-color: #2c81fb;
    --menu-active-color: #3b68e0;

    --secondary-menu-color: #707077;

    --input-hover-color: #2c81fb;
    --input-active-color: #3264e8;
    --input-disabled-border: #d0d3db;
    --input-disabled-label: #8d99ac;

    --textarea-bg: #efeff9;

    --red-color: #c92c20;
    --green-color-badges: #00c66e;

    --success-green: #039c55;
    --attention-yellow: #feb912;
    --warning-red: #e81a0c;

    --green-public: #3ebb60;

    --today-event-color: #83c29d;
    --future-event-color: #f3a73b;

    --profile-warning-heading: #f3a73b;

    --inline-link-color: #3b68df;

    --swich-small-off: #BAB8C1;
    --swich-small-on: #3264E8;


    --border-radius-lg: 16px;
    --border-radius-sm: 6px;


    --main-font-size: 14px;
    --main-font-size-lg: 16px;
    --main-font-size-sm: 13px;

    --title-font-size-lg: 30px;
    --title-font-size-lg-s: 24px;
    --title-font-size-md: 20px;
    --title-font-size-sm: 18px;

    --sub-title-font-size: 15px;
    --small-text-font-size: 12px;
    --xsmall-text-font-size: 10px;

}

html, body {
    color: var(--main-text-color);
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
}

body {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: var(--bg);
}

svg {
    vertical-align: top;
}

.containerRow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.containerColumn {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.centeredImage {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.alignStart {
    justify-content: flex-start;
}

.alignSelfCenter {
    align-self: center;
}

.rowGap8 {
    row-gap: 8px;
}

.rowGap16 {
    row-gap: 16px;
}

.colGap8 {
    column-gap: 8px;
}

.mb16 {
    margin-bottom: 16px;
}

.mt16 {
    margin-top: 16px;
}

.pb8 {
    padding-bottom: 8px;
}

.pt8 {
    padding-top: 8px;
}

span.noDisplay,
div.noDisplay {
    display: none;
}

.mt0 {
    margin-top: 0 !important;
}

h1,
h2,
h3 {
    margin: 0;
}

.h1 {
    font-weight: 700;
    font-size: var(--title-font-size-lg);
    line-height: 1.2;
    margin-bottom: 0;
}

.h2 {
    font-weight: 700;
    font-size: var(--title-font-size-md);
    line-height: 1.2;
    margin-bottom: 0;
}

.h3 {
    font-weight: 700;
    font-size: var(--title-font-size-sm);
    line-height: 1.2;
}

.subTitle {
    font-weight: 700;
    font-size: var(--sub-title-font-size);
    line-height: 1.2;
}

.subTitleSm,
.form-group .subTitleSm {
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 1.2;
}

.text12 {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
}

.ellipsisOneLine {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100%);
}

button {
    background: var(--small-button-bg);
    border-radius: 6px;
    border: none;
    color: var(--secondary-text-color);
    text-align: center;
}

.btn-secondary:hover {
    background: inherit;
    color: inherit;
}

@media (hover: hover) {
    button.btn:hover {
        background: var(--button-hover-color);
        color: var(--button-text-color);
        cursor: pointer;
        border: none;
    }

    button.btn-secondary:hover {
        background: var(--button-hover-color);
        color: var(--button-text-color);
        cursor: pointer;
        border: none;
    }
}

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

button.btn:active {
    background: var(--button-active-color);
    cursor: pointer;
}

button.btn:disabled {
    background: var(--button-disabled-color);
    color: var(--button-text-color);
    outline: 0 none;
    border: none;
    cursor: not-allowed;
    pointer-events: none; /* Block all JS events */

}

a.btn[disabled] {
    background: var(--button-disabled-color);
    color: var(--button-text-color);
    outline: 0 none;
    border: none;
    cursor: not-allowed;
    pointer-events: none; /* Block all JS events */
}

button.btn:focus {
    outline: 0 none;
    border: none;
}

@media (hover: hover) {
    button.btn:disabled:hover {
        background: var(--button-disabled-color);
        color: var(--button-text-color);
        outline: 0 none;
        border: none;
    }
}

.btn,
.btn-secondary {
    border-radius: 6px;
    padding: 12px 15px;
    font-style: normal;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 1.2;
    color: var(--button-text-color);
    background: var(--button-active-color);
    border: none;
    white-space: nowrap;
}

.btn-red {
    background: var(--warning-red);
}

.btn-secondary:active,
.btn-secondary.active,
.btn:active,
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-secondary:focus-within,
.btn:focus {
    background: var(--button-active-color);
    color: var(--button-text-color);
    cursor: pointer;
    border: none;
    outline: 0 none;
    box-shadow: none;
}

.btn-icon-left {
    padding-left: 32px;
    position: relative;
}

.btn-icon-left::before {
    position: absolute;
    top: 12px;
    left: 10px;
}

.btn-icon-right {
    padding-right: 32px;
    position: relative;
}

.btn-icon-right::before {
    position: absolute;
    top: 12px;
    right: 10px;
}

.btn-icon {
    display: flex;
    justify-content: center;
    column-gap: 8px;
    align-items: center;
}

.onlyIconBtn {
    padding: 0;
    background: transparent;
    height: 32px;
}

.onlyIconBtn:active {
    padding: 0;
    background: transparent;
}

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

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

@media (hover: hover) {
    .btn:hover,
    .btn.active:hover:not(:disabled) {
        background: var(--button-hover-color);
        color: var(--button-text-color);
    }

    .onlyIconBtn:hover,
    .onlyIconBtn.active:hover {
        padding: 0;
        background: transparent;
    }

    .onlyIconBtn:hover rect,
    .onlyIconBtn.active:hover rect {
        fill: var(--button-hover-color);
    }

    .onlyIconBtnSecondary:hover path,
    .onlyIconBtnSecondary.active:hover path {
        fill: var(--button-text-color);
    }
}

button:disabled {
    background: var(--button-disabled-color);
    outline: 0 none;
    border: none;
}

.btn-secondary {
    color: var(--button-secondary-color);
    background: var(--button-secondary-bg);
}

@media (hover: hover) {
    .btn-secondary:hover {
        color: var(--button-text-color);
    }
}

.btn-secondary:disabled {
    color: var(--button-text-color);
}

.btnMobileIcon::before {
    display: none;
    content: "";
    background-position: 50%;
    background-repeat: no-repeat;
}

.btn-group {
    column-gap: 0;
}

.btn-group button {
    border-radius: 0;
}

.btn-group button:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.btn-group button:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}


.btn-grey {
    background: transparent;
    border: 1px solid var(--triple-text-color);
    color: var(--secondary-text-color);
    box-sizing: border-box;
    padding: 11px 20px;
}

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

.btn-grey:active {
    border: 1px solid var(--button-active-color);
}

.btn-grey:disabled {
    border: 1px solid var(--button-disabled-color);
}

.inputWrap {
    flex-direction: column-reverse;
    row-gap: 5px;
}

.form-group,
.field-account-email {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    text-align: left;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="file"]::file-selector-button {
    width: 100%;
    cursor: pointer;
}

textarea {
    vertical-align: top;
    resize: none;
}

.inputWrap input,
.form-group input,
textarea,
textarea.form-control,
input.form-control,
select.form-control {
    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;
}

select.form-control:focus {
    box-shadow: none;
    border: 1px solid var(--input-active-color);
}

@media (hover: hover) {
    .inputWrap input:hover,
    .form-group input:hover,
    input.form-control:hover,
    .inputWrap textarea:hover,
    textarea.form-control:hover {
        border: 1px solid var(--input-hover-color);
        outline: 0 none;
    }
}

.inputWrap input:focus,
.inputWrap input:focus-visible,
.inputWrap textarea:focus,
.inputWrap textarea:focus-visible,
.form-group input:focus,
.form-group input:focus-visible,
.form-group textarea:focus,
.form-group textarea:focus-visible,
input.form-control:focus,
input.form-control:focus-visible,
textarea:focus,
textarea:focus-visible,
textarea.form-control:focus,
textarea.form-control:focus-visible {
    border: 1px solid var(--input-active-color);
    outline: 0 none;
    box-shadow: none;
    background: transparent;
}

.inputWrap input:disabled,
.form-group input:disabled,
.form-group input:read-only,
input.form-control:disabled,
select.select-css:disabled,
textarea:disabled,
textarea:read-only,
textarea.form-control:read-only,
.form-control:disabled,
.form-control[readonly] {
    border: 1px solid var(--input-disabled-border);
    color: var(--button-disabled-color);
    outline: 0 none;
    background: transparent;
}

.inputWrap input:disabled + label,
textarea:disabled + label {
    color: var(--input-disabled-label);
}

textarea,
textarea.form-control {
    padding: 6px 24px 8px 8px;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
    height: 128px;
    overflow: hidden;
    resize: vertical;
}

textarea.form-control::-webkit-scrollbar {
    width: 4px;
}

textarea.form-control::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.2);
    border-radius: 10px;
    width: 4px;
}

textarea.form-control::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 4px;
}

textarea.form-control {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

.searchWrap {
    position: relative;
}

.searchBtn {
    position: absolute;
    bottom: 12px;
    right: 16px;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
}

.searchBtn:hover svg {
    pointer-events: none;
}

button.searchBtn:active {
    background: transparent;
}

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

@media (hover: hover) {
    button.searchBtn:hover {
        background: transparent;
    }

    .searchBtn:hover path {
        fill: var(--button-hover-color);
    }
}

/*Textarea wysiwyg editor*/

.cke_screen_reader_only.cke_copyformatting_notification {
    height: 0;
}

button.wysiwyg-fontStyle-bold:disabled {
    background-image: url(../../images/wysiwyg/bold-icon-disabled.svg);
}

button.wysiwyg-fontStyle-italic:disabled {
    background-image: url(../../images/wysiwyg/italic-icon-disabled.svg);
}

button.wysiwyg-fontStyle-underline:disabled {
    background-image: url(../../images/wysiwyg/underline-icon-disabled.svg);
}

button.wysiwyg-list-num:disabled {
    background-image: url(../../images/wysiwyg/number-list-icon-disabled.svg);
}

button.wysiwyg-list-unNum:disabled {
    background-image: url(../../images/wysiwyg/dot-list-icon-disabled.svg);
}

button.wysiwyg-list-left:disabled {
    background-image: url(../../images/wysiwyg/align-lef-icon-disabled.svg);
}

button.wysiwyg-list-center:disabled {
    background-image: url(../../images/wysiwyg/align-center-icon-disabled.svg);
}

.form-group .cke {
    border: none;
}

.form-group .cke_inner {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    background: transparent;
}

.form-group .cke_top {
    border-bottom: none;
    background: transparent;
    padding: 0;
    white-space: normal;
}

.form-group .cke_toolgroup {
    margin: 0;
    padding-right: 8px;
}

.form-group .cke_toolbar:not(:last-child) .cke_toolgroup {
    margin-bottom: 6px;
}

.form-group .cke_toolbar.cke_toolbar_last .cke_toolgroup {
    padding-right: 0;
}

.form-group .cke_toolbar.cke_toolbar_last a.cke_button:last-child {
    margin-right: 0;
}

.form-group a.cke_button,
.form-group a.cke_button:active,
.form-group a.cke_button:focus {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin-right: 8px;
    margin-top: 0;
    background-color: transparent;
    cursor: pointer;
    border: none;
}

.form-group .cke_button_icon {
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
}

.form-group a.cke_button_on {
    background: transparent;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    margin-right: 8px;
    border: none;
}

.form-group .cke_button .cke_button__bold_icon {
    background: url(../../images/wysiwyg/bold-icon.svg) !important;
}

.form-group .cke_button .cke_button__link_icon {
    background: url(../../images/wysiwyg/link-icon.svg) !important;
}

.form-group .cke_button .cke_button__unlink_icon {
    background: url(../../images/wysiwyg/unlink-icon.svg) !important;
}

.form-group .cke_button .cke_button__italic_icon {
    background: url(../../images/wysiwyg/italic-icon.svg) !important;
}

.form-group .cke_button .cke_button__underline_icon {
    background: url(../../images/wysiwyg/underline-icon.svg) !important;
}

.form-group .cke_ltr .cke_button .cke_button__numberedlist_icon {
    background: url(../../images/wysiwyg/number-list-icon.svg) !important;
}

.form-group .cke_ltr .cke_button .cke_button__bulletedlist_icon {
    background: url(../../images/wysiwyg/dot-list-icon.svg) !important;
}

.form-group .cke_button .cke_button__justifyleft_icon {
    background: url(../../images/wysiwyg/align-lef-icon.svg) !important;
}

.form-group .cke_button .cke_button__justifycenter_icon {
    background: url(../../images/wysiwyg/align-center-icon.svg) !important;
}

@media (hover: hover) {
    .form-group a.cke_button:hover {
        width: 32px;
        height: 32px;
        padding: 0;
        margin-right: 8px;
        background-color: transparent;
        border: none;
    }

    .form-group .cke_button .cke_button__bold_icon:hover {
        background: url(../../images/wysiwyg/bold-icon-hover.svg) !important;
    }

    .form-group .cke_button .cke_button__italic_icon:hover {
        background: url(../../images/wysiwyg/italic-icon-hover.svg) !important;
    }


    .form-group .cke_button .cke_button__link_icon:hover {
        background: url(../../images/wysiwyg/link-icon-active.svg) !important;
    }

    .form-group .cke_button .cke_button__unlink_icon:hover {
        background: url(../../images/wysiwyg/unlink-icon-hover.svg) !important;
    }

    .form-group .cke_button .cke_button__underline_icon:hover {
        background: url(../../images/wysiwyg/underline-icon-hover.svg) !important;
    }

    .form-group .cke_ltr .cke_button .cke_button__numberedlist_icon:hover {
        background: url(../../images/wysiwyg/number-list-icon-hover.svg) !important;
    }

    .form-group .cke_ltr .cke_button .cke_button__bulletedlist_icon:hover {
        background: url(../../images/wysiwyg/dot-list-icon-hover.svg) !important;
    }

    .form-group .cke_button .cke_button__justifyleft_icon:hover {
        background: url(../../images/wysiwyg/align-lef-icon-hover.svg) !important;
    }

    .form-group .cke_button .cke_button__justifycenter_icon:hover {
        background: url(../../images/wysiwyg/align-center-icon-hover.svg) !important;
    }

}

.form-group .cke_toolgroup a.cke_button:last-child:after,
.form-group .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after,
.form-group .cke_toolgroup a.cke_button:hover:last-child:after,
.cke_toolgroup a.cke_button:focus:last-child:after {
    border-right: 0px !important;
}

.form-group a.cke_button_on .cke_button__bold_icon {
    background: url(../../images/wysiwyg/bold-icon-active.svg) !important;
}

.form-group a.cke_button_on .cke_button__italic_icon {
    background: url(../../images/wysiwyg/italic-icon-active.svg) !important;
}

.form-group a.cke_button_on .cke_button__underline_icon {
    background: url(../../images/wysiwyg/underline-icon-active.svg) !important;
}

.form-group .cke_ltr a.cke_button_on .cke_button__numberedlist_icon {
    background: url(../../images/wysiwyg/number-list-icon-active.svg) !important;
}

.form-group .cke_ltr a.cke_button_on .cke_button__bulletedlist_icon {
    background: url(../../images/wysiwyg/dot-list-icon-active.svg) !important;
}

.form-group .cke_ltr a.cke_button_on .cke_button__justifyleft_icon {
    background: url(../../images/wysiwyg/align-lef-icon-active.svg) !important;
}

.form-group .cke_ltr a.cke_button_on .cke_button__justifycenter_icon {
    background: url(../../images/wysiwyg/align-center-icon-active.svg) !important;
}

.form-group .cke_toolgroup a.cke_button:last-child:after,
.form-group .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after,
.form-group .cke_toolgroup a.cke_button:hover:last-child:after,
.cke_toolgroup a.cke_button:focus:last-child:after,
.form-group .cke_toolgroup a.cke_button.cke_button_on:last-child:after {
    height: 32px;
    width: 0;
    border-right: 1px solid #d2d1d8;
    top: 0;
    right: -8px;
    content: '';
    position: absolute;
    margin: 0;
}

.form-group .cke_toolbar_separator {
    height: 32px;
    width: 0;
    border-right: 1px solid #d2d1d8;
    margin: 0 7px 0 0;
}

.form-group .cke_contents {
    margin: 16px 0 0 0;
    resize: vertical;
}

.cke_browser_ios .cke_inner .cke_contents {
    overflow-y: hidden;
}

.form-group .cke_wysiwyg_frame {
    border: 1px solid var(--triple-text-color);
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 6px;
    outline: 0 none;

    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
    overflow: hidden;
    color: var(--secondary-text-color);
    padding: 4px;

}

.form-group .cke_bottom {
    padding: 0;
    position: relative;
    border-top: none;
    background: transparent;
    height: 1px;
    overflow: visible;
}

.form-group .cke_resizer {
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 10px 10px 0 0;
    border-color: transparent var(--triple-text-color) transparent transparent;
    border-style: dashed solid dashed dashed;
    font-size: 0;
    vertical-align: bottom;
    margin-top: 0;
    margin-bottom: 0;
    position: absolute;
    bottom: 2px;
    right: 5px;
    opacity: 0;
}

@media (hover: hover) {
    .form-group .cke_wysiwyg_frame:hover {
        border: 1px solid var(--input-hover-color);
        background-color: transparent;
        box-sizing: border-box;
        border-radius: 6px;
        outline: 0 none;

        font-weight: 400;
        font-size: var(--main-font-size);
        line-height: 1.7;
        overflow: hidden;
        color: var(--secondary-text-color);


    }
}

/*End Textarea wysiwyg editor*/

.slideContainer {
    flex-grow: 1;
    position: relative;
    line-height: 22px;
    cursor: default;
}

/* The slider itself */
.rangeSlider {
    -webkit-appearance: none;
    width: 75%;
    max-width: 200px;
    height: 4px;
    background: var(--small-button-bg);
    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;
    border: none;
}

@media (hover: hover) {
    .rangeSlider:hover {
        background-image: linear-gradient(
                var(--input-hover-color),
                var(--input-hover-color)
        );
        border: none;
    }
}

/* Input Thumb */
.rangeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--input-active-color);
    cursor: default;
    transition: background 0.3s ease-in-out;
    position: relative;
    border: none;
}

.rangeSlider::-moz-range-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--input-active-color);
    cursor: default;
    transition: background 0.3s ease-in-out;
    position: relative;
    border: none;
}

.rangeSlider::-ms-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--input-active-color);
    cursor: default;
    transition: background 0.3s ease-in-out;
    position: relative;
    border: none;
}

@media (hover: hover) {
    .rangeSlider::-webkit-slider-thumb:hover {
        background: var(--input-hover-color);
        border: none;
    }

    .rangeSlider::-moz-range-thumb:hover {
        background: var(--input-hover-color);
        border: none;
    }

    .rangeSlider::-ms-thumb:hover {
        background: var(--input-hover-color);
        border: none;
    }
}


.itemEditForm .rangeSlider::-webkit-slider-thumb {
    cursor: pointer;
}

.itemEditForm .rangeSlider::-moz-range-thumb {
    cursor: pointer;
}

.itemEditForm .rangeSlider::-ms-thumb {
    cursor: pointer;
}

/* Input Track */
.rangeSlider::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.rangeSlider::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.rangeSlider::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

.range-text {
    position: absolute;
    top: 2px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    text-align: center;
    line-height: 1;
    height: 16px;
    width: 16px;
    padding-right: 1px;
    transform: translate(0, 3px);
    pointer-events: none;
    font-weight: 700;
    font-size: 11px;
    color: var(--button-text-color);
}

.filtersDate {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    text-align: left;
}

.filtersDate::after {
    position: absolute;
    top: 31px;
    right: 9px;
    content: url(../../images/pages/calendar-icon.svg);
    cursor: pointer;
    pointer-events: none;
}

.filtersDate:hover::after {
    content: url(../../images/pages/calendar-icon-hover.svg);
}

.inputWrap label,
.form-group label:not(.btn),
label.control-label {
    padding-left: 0 !important;
    font-weight: 500;
    font-size: var(--main-font-size-sm);
    line-height: 1.15;
    position: relative;
    margin: 0;
}

.longLabel {
    width: calc(90%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inputWrap label.dateSort::after,
.form-group label.dateSort::after {
    position: absolute;
    content: url(../../images/pages/sort.svg);
    right: -21px;
    top: -2px;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.1;
    color: var(--secondary-text-color);
}

::-moz-placeholder {
    /* Firefox 19+ */
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.1;
    color: var(--secondary-text-color);
}

:-ms-input-placeholder {
    /* IE 10+ */
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.1;
    color: var(--secondary-text-color);
}

:-moz-placeholder {
    /* Firefox 18- */
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.1;
    color: var(--secondary-text-color);
}

.select-css {
    display: block;
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.1;
    color: var(--input-text-color);
    padding: 1px 32px 1px 7px;
    width: 100%;
    max-width: 100%;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid var(--triple-text-color);
    box-shadow: 0 none;
    border-radius: 6px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    outline: 0 none;
    cursor: pointer;
}

.select-css::-ms-expand {
    display: none;
}

@media (hover: hover) {
    .select-css:hover {
        border: 1px solid var(--input-hover-color);
        outline: 0 none;
    }
}

.select-css:focus,
.select-css:focus-visible {
    border: 1px solid var(--input-active-color);
    outline: 0 none;
    box-shadow: none;
}

.select-css option {
    font-weight: normal;
}

.selectIcon, .selectIcon2 {
    position: relative;
}

.selectIcon::after {
    position: absolute;
    bottom: 14px;
    right: 16px;
    content: url(../../images/pages/select-arrow.svg);
    cursor: pointer;
    pointer-events: none;
}

.selectIcon2::after {
    position: absolute;
    top: 26px;
    right: 16px;
    content: url(../../images/pages/select-arrow.svg);
    cursor: pointer;
    pointer-events: none;
}

.inputWrap:hover.selectIcon::after {
    content: url(../../images/pages/select-arrow-hover.svg);
}

.inlineLink {
    font-weight: 400;
    font-size: var(--main-font-size);
    line-height: 1.7;
    font-weight: normal;
    text-decoration: underline;
    color: var(--inline-link-color);
    cursor: pointer;
}

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

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

.link {
    color: var(--button-active-color);
    text-decoration: underline;
    font-style: normal;
    font-weight: 700;
    font-size: var(--main-font-size);
    line-height: 1.1;
    position: relative;
}

.link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}

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

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

.link:disabled {
    color: var(--button-disabled-color);
}

.scroll::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

.scroll::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.2);
    border-radius: 10px;
    width: 8px;
    height: 6px;
}

.scroll::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 8px;
    height: 6px;
}

.scroll {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

.scrollSm::-webkit-scrollbar {
    width: 6px;
}

.scrollSm::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 6px;
}

.scrollSm::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 6px;
}

.scrollSm {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

.scrollHorizontal::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

.scrollHorizontal::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 8px;
    height: 6px;
}

.scrollHorizontal::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 8px;
    height: 6px;
}

.scrollHorizontal {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

@media only screen and (max-width: 768px) {
    .scroll::-webkit-scrollbar {
        width: 4px;
        height: 3px;
    }

    .scroll::-webkit-scrollbar-track {
        border-radius: 10px;
        width: 4px;
        height: 3px;
    }

    .scroll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        width: 4px;
        height: 3px;
    }
}

.menuBg {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    height: calc(100% - 64px);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.menuBg.active {
    opacity: 1;
    pointer-events: all;
    display: block;
}

.popupBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(13, 19, 28, 0.9);
    opacity: 0;
    pointer-events: none;
    transition: none;
    z-index: 12;
}

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

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: var(--button-text-color);
    padding: 24px 8px 32px;
    transition: none;
    width: 90%;
    max-width: 288px;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-lg);
    z-index: 13;
}

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

.popupExtraLg {
    width: 76.5%;
    max-width: 1104px;
    padding: 24px 0 16px;
}

.popupMedium {
    width: 76.5%;
    max-width: 624px;
    max-height: calc(100vh - 128px);
    padding: 24px 0 16px;
}

.popupHeading {
    text-align: center;
    padding-top: 29px;
}

.popupText {
    text-align: center;
    color: var(--secondary-text-color);
}

.popupBtns {
    justify-content: center;
    column-gap: 8px;
    margin-top: 24px;
}

.closePopup {
    cursor: pointer;
}

.closePopup svg {
    pointer-events: none;
}

.closePopup:hover path {
    fill: var(--button-hover-color);
}

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

.deletePopup .closePopup,
.attendancePopup .closePopup,
.profilePopup .closePopup,
.newPostPopup .closePopup,
.popupMedium .closePopup {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: -8px;
    right: -8px;
}

[data-tab-content] {
    display: none;
}

.active[data-tab-content] {
    display: block;
}

.itemBg {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
}

.tabsWrap {
    align-items: flex-end;
    flex-grow: 1;
    height: 45px;
    overflow: hidden;
    position: relative;
    box-shadow: inset -29px 0px 39px 13px rgba(251, 251, 249, 0.48);
    max-width: calc(100% - 16px - 32px);
}

.tabs {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom: 20px;
    width: 100%;
    overflow-x: scroll;
}

.tabsWrap:after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(120, 116, 134, 0.3);
}

.tab {
    cursor: pointer;
    padding: 8px;
    white-space: nowrap;
    line-height: 1.45;
    margin-right: 28px;
}

.tab:last-child {
    margin-right: 0;
}

.tab.active {
    color: var(--button-active-color);
    position: relative;
}

.communityTabs .tab {
    position: relative;
}

.cancelConnectionActive, .cancelConnectionDisabled, .acceptConnectionBtn, .addFriend, .cancelConnectionBtn {
    display: none;
    cursor: pointer;
}

.cancelConnectionActive:hover rect, .acceptConnectionBtn:hover rect, .addFriend:hover rect, .cancelConnection:hover rect {
    fill: var(--button-hover-color);
}

.cancelConnectionActive.active, .cancelConnectionDisabled.active, .acceptConnectionBtn.active, .addFriend.active, .cancelConnectionBtn.active {
    display: block;
}

.tab.active:after {
    content: "";
    width: 100%;
    height: 6px;
    background: var(--button-active-color);
    position: absolute;
    bottom: 0;
    left: 0;
}

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

.tabContent {
    width: 100%;
}

.tabsWrap:before {
    content: "";
    position: absolute;
    bottom: 2px;
    right: -6px;
    width: 50px;
    top: 0;
    background: linear-gradient(
            90deg,
            rgba(249, 249, 251, 0) 0%,
            rgba(249, 249, 251, 0.28) 20%,
            rgba(249, 249, 251, 0.3) 30%,
            rgba(249, 249, 251, 0.59) 45%,
            rgba(249, 249, 251, 0.8) 50%,
            rgba(249, 249, 251, 1) 100%
    );
    z-index: 1;
}

@media only screen and (max-width: 1024px) {
    .popup-lg {
        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 rgba(0, 0, 0, 0.15);
        border-radius: var(--border-radius-lg);
        z-index: 13;
        max-height: calc(100vh - 128px);
        margin-top: 8px;
    }

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

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

    .popupHeading {
        text-align: center;
        padding: 20px 0 10px 0;
    }
}

@media only screen and (max-width: 768px) {
    body.popupOpen {
        overflow: hidden;
    }

    .h1:not(.editHeading) {
        font-weight: 700;
        font-size: 26px;
        line-height: 1.15;
    }

    .popup-lg.active + .popupBg {
        display: none;
    }

    .itemDetailWrap.popup-lg,
    .itemEditWrap.popup-lg {
        display: block;
    }

    .popup-lg {
        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;
    }

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

    .popupExtraLg.active {
        transform: translate(-50%, 0) scale(1);
    }

    .popupExtraLg.active {
        width: 100%;
        height: calc(100vh - 64px);
        top: 64px;
        border-radius: 0;
        padding-top: 21px;
    }

    .popupExtraLg.active .closePopup,
    .popupMedium.active .closePopup {
        top: 8px;
        right: 8px;
    }

    .popupMedium {
        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);
    }

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

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

    .btnMobileIcon::before {
        display: block;
        width: 40px;
        height: 40px;
    }
}


/* ==========================================================================
              NEW PASSWORD
             ========================================================================== */


.hiddenPasswordInput,
.visiblePasswordInput {
    position: relative;
}

.hiddenPasswordInput .visiblePasswordInputIcon,
.visiblePasswordInput .hiddenPasswordInputIcon {
    display: none;
}

.hiddenPasswordInput .hiddenPasswordInputIcon,
.hiddenPasswordInput .visiblePasswordInputIcon {
    position: absolute;
    right: 8px;
    top: 30px;
    height: 16px;
    cursor: pointer;
}

.hiddenPasswordInput .hiddenPasswordInputIcon:hover path,
.visiblePasswordInput .visiblePasswordInputIcon:hover path,
.visiblePasswordInput .visiblePasswordInputIcon:hover circle {
    stroke: var(--input-hover-color);
}

.newPasswordWrap,
.newPasswordParametersWrap {
    width: 100%;
    row-gap: 10px;
}

.newPasswordParametersWrap {
    position: relative;
}

.newPasswordLineWrap {
    width: 100%;
    column-gap: 2px;
}

.newPasswordLine {
    flex-grow: 1;
    background: var(--small-button-bg);
    border-radius: 10px;
    height: 4px;
    position: relative;
}

.weak .active.newPasswordLine:before {
    content: '';
    width: 100%;
    height: 4px;
    border-radius: 10px;
    background: var(--warning-red);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.normal .active.newPasswordLine:before {
    content: '';
    width: 100%;
    height: 4px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #F3A73B;
}

.strong .active.newPasswordLine:before {
    content: '';
    width: 100%;
    height: 4px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #039C55;
}

.newPasswordParameters {
    flex-wrap: wrap;
    padding: 20px 0;
    justify-content: flex-start;
    column-gap: 16px;
    row-gap: 8px;
}

.passwordParameterItem {
    justify-content: flex-start;
    align-items: center;
    color: var(--button-disabled-color);
}

.passwordParameterItem.active {
    color: var(--success-green);
}

.passwordParameterItem.active path {
    fill: var(--success-green);
}

.accountPasswordTab .accountEditArea .accountBtnWrap {
    padding-top: 16px;
}

.newPasswordCharacteristic {
    display: none;
    position: absolute;
    left: 0;
    top: 8px;
}

.weak .newPasswordCharacteristic {
    display: block;
    color: var(--warning-red);
}

.normal .newPasswordCharacteristic {
    display: block;
    color: #F3A73B;
}

.strong .newPasswordCharacteristic {
    display: block;
    color: #039C55;
}


/* ==========================================================================
              HORIZONTAL DIAGRAM
             ========================================================================== */

.horizontalDiagramWrap {
    --part-bg: #F8F8FA;
    --first-part-color: #265D71;
    --second-part-color: #419195;
    --third-part-color: #4DB990;
    --fourth-part-color: #DCB53C;
    --fifth-part-color: #E39E37;
    --sixth-part-color: #BE6B27;
    --seventh-part-color: #AE461F;
    --eighth-part-color: #A02F1F;
    --ninth-part-color: #2B758E;
    --tenth-part-color: #7E9247;
    --eleventh-part-color: #0C2733;
    --twelfth-part-color: #5A68A1;
    --thirteenth-part-color: #6C1E19;
    --fourteenth-part-color: #804687;

    --hover-text-color: #fff;

    row-gap: 8px;
}

.horizontalDiagramItemWrap:first-child .horizontalDiagramPart.active {
    background: var(--first-part-color);
    color: var(--first-part-color);
}

.horizontalDiagramItemWrap:nth-child(2) .horizontalDiagramPart.active {
    background: var(--second-part-color);
    color: var(--second-part-color);
}

.horizontalDiagramItemWrap:nth-child(3) .horizontalDiagramPart.active {
    background: var(--third-part-color);
    color: var(--third-part-color);
}

.horizontalDiagramItemWrap:nth-child(4) .horizontalDiagramPart.active {
    background: var(--fourth-part-color);
    color: var(--fourth-part-color);
}

.horizontalDiagramItemWrap:nth-child(5) .horizontalDiagramPart.active {
    background: var(--fifth-part-color);
    color: var(--fifth-part-color);
}

.horizontalDiagramItemWrap:nth-child(6) .horizontalDiagramPart.active {
    background: var(--sixth-part-color);
    color: var(--sixth-part-color);
}

.horizontalDiagramItemWrap:nth-child(7) .horizontalDiagramPart.active {
    background: var(--seventh-part-color);
    color: var(--seventh-part-color);
}

.horizontalDiagramItemWrap:nth-child(8) .horizontalDiagramPart.active {
    background: var(--eighth-part-color);
    color: var(--eighth-part-color);
}

.horizontalDiagramItemWrap:nth-child(9) .horizontalDiagramPart.active {
    background: var(--ninth-part-color);
    color: var(--ninth-part-color);
}

.horizontalDiagramItemWrap:nth-child(10) .horizontalDiagramPart.active {
    background: var(--tenth-part-color);
    color: var(--tenth-part-color);
}

.horizontalDiagramItemWrap:nth-child(11) .horizontalDiagramPart.active {
    background: var(--eleventh-part-color);
    color: var(--eleventh-part-color);
}

.horizontalDiagramItemWrap:nth-child(12) .horizontalDiagramPart.active {
    background: var(--twelfth-part-color);
    color: var(--twelfth-part-color);
}

.horizontalDiagramItemWrap:nth-child(13) .horizontalDiagramPart.active {
    background: var(--thirteenth-part-color);
    color: var(--thirteenth-part-color);
}

.horizontalDiagramItemWrap .horizontalDiagramPart.active {
    background: var(--fourteenth-part-color);
    color: var(--fourteenth-part-color);
}


.horizontalDiagramItemWrap .horizontalDiagramPart:nth-child(2).active,
.horizontalDiagramItemWrap .horizontalDiagramPart:nth-child(2) {
    background: transparent;
}

.horizontalDiagramItemWrap .horizontalDiagramPart:nth-child(2):not(.active).hovered {
    background: transparent;
}

.horizontalDiagramItemWrap .horizontalDiagramPart:nth-child(2) .horizontalDiagramPartNumber {
    display: none;
}


.horizontalDiagramItemWrap:first-child .horizontalDiagramPart:not(.active).hovered {
    background: var(--first-part-color);
    color: var(--first-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(2) .horizontalDiagramPart:not(.active).hovered {
    background: var(--second-part-color);
    color: var(--second-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(3) .horizontalDiagramPart:not(.active).hovered {
    background: var(--third-part-color);
    color: var(--third-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(4) .horizontalDiagramPart:not(.active).hovered {
    background: var(--fourth-part-color);
    color: var(--fourth-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(5) .horizontalDiagramPart:not(.active).hovered {
    background: var(--fifth-part-color);
    color: var(--fifth-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(6) .horizontalDiagramPart:not(.active).hovered {
    background: var(--sixth-part-color);
    color: var(--sixth-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(7) .horizontalDiagramPart:not(.active).hovered {
    background: var(--seventh-part-color);
    color: var(--seventh-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(8) .horizontalDiagramPart:not(.active).hovered {
    background: var(--eighth-part-color);
    color: var(--eighth-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(9) .horizontalDiagramPart:not(.active).hovered {
    background: var(--ninth-part-color);
    color: var(--ninth-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(10) .horizontalDiagramPart:not(.active).hovered {
    background: var(--tenth-part-color);
    color: var(--tenth-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(11) .horizontalDiagramPart:not(.active).hovered {
    background: var(--eleventh-part-color);
    color: var(--eleventh-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(12) .horizontalDiagramPart:not(.active).hovered {
    background: var(--twelfth-part-color);
    color: var(--twelfth-part-color);
    opacity: 0.3;
}

.horizontalDiagramItemWrap:nth-child(13) .horizontalDiagramPart:not(.active).hovered {
    background: var(--thirteenth-part-color);
    color: var(--thirteenth-part-color);
}

.horizontalDiagramItemWrap .horizontalDiagramPart:not(.active).hovered {
    background: var(--fourteenth-part-color);
    color: var(--fourteenth-part-color);
}


@media (hover: hover) {
    .horizontalDiagramItemWrap .horizontalDiagramPart:hover {
        color: var(--hover-text-color) !important;
    }
}

.horizontalDiagramItemWrap:nth-child(2) .horizontalDiagramItemTitle {
    color: var(--first-part-color);
}

.horizontalDiagramItemWrap:nth-child(4) .horizontalDiagramItemTitle {
    color: var(--second-part-color);
}

.horizontalDiagramItemWrap:nth-child(6) .horizontalDiagramItemTitle {
    color: var(--third-part-color);
}

.horizontalDiagramItemWrap:nth-child(8) .horizontalDiagramItemTitle {
    color: var(--fourth-part-color);
}

.horizontalDiagramItemWrap:nth-child(10) .horizontalDiagramItemTitle {
    color: var(--fifth-part-color);
}

.horizontalDiagramItemWrap:nth-child(12) .horizontalDiagramItemTitle {
    color: var(--sixth-part-color);
}

.horizontalDiagramItemWrap:nth-child(14) .horizontalDiagramItemTitle {
    color: var(--seventh-part-color);
}

.horizontalDiagramItemWrap:nth-child(16) .horizontalDiagramItemTitle {
    color: var(--eighth-part-color);
}

.horizontalDiagramItemWrap:nth-child(18) .horizontalDiagramItemTitle {
    color: var(--ninth-part-color);
}

.horizontalDiagramItemWrap:nth-child(20) .horizontalDiagramItemTitle {
    color: var(--tenth-part-color);
}

.horizontalDiagramItemWrap:nth-child(22) .horizontalDiagramItemTitle {
    color: var(--eleventh-part-color);
}

.horizontalDiagramItemWrap:nth-child(24) .horizontalDiagramItemTitle {
    color: var(--twelfth-part-color);
}

.horizontalDiagramItemWrap:nth-child(26) .horizontalDiagramItemTitle {
    color: var(--thirteenth-part-color);
}

.horizontalDiagramItemWrap .horizontalDiagramItemTitle {
    color: var(--fourteenth-part-color);
}

.horizontalDiagramWrap {
    width: calc(100% - 8px - 24px - 48px);
    align-items: stretch;
}

.horizontalDiagramItemWrap {
    column-gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}

.horizontalDiagramItemTitle {
    width: 128px;
    text-align: right;
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
    overflow-wrap: break-word;
    padding-right: 8px;
}

.horizontalDiagramPartsWrap {
    flex-grow: 1;
    width: calc(100% - 120px);
    display: flex;
    position: relative;
    height: 25px;
}

.horizontalDiagramPart {
    margin-top: 4px;
    height: 24px;
    background: var(--part-bg);
    color: var(--part-bg);
    overflow: visible;
    text-align: center;
    cursor: pointer;
    touch-action: none;
    border-right: 1px solid white;
}

.horizontalDiagramPart:last-child {
    border-right: none;
}

@media (hover: hover) {
    .horizontalDiagramPart:hover {
        color: var(--hover-text-color);
    }
}

.horizontalDiagramPart:nth-child(2) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.horizontalDiagramPart:nth-child(3) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.horizontalDiagramPart:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.horizontalDiagramPartNumber {
    color: inherit;
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 2.4;
    user-select: none;
}

.horizontalDiagramPartBadge {
    position: absolute;
    z-index: 1;
    width: 32px;
    height: 32px;
    background-color: #fff;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    top: 50%;
    margin-top: -16px;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--xsmall-text-font-size);
    line-height: 3.2;
    color: var(--secondary-text-color);
    text-align: center;
    user-select: none;
    pointer-events: none;
}


@media (hover: hover) {
    .horizontalDiagramPartBadge:hover {
        color: var(--secondary-text-color);
    }
}

.axisIsOn.horizontalDiagramWrap {
    padding-top: 40px;
    padding-bottom: 40px;
    position: relative;
}

.horizontalDiagramWrap .axisNames {
    position: absolute;
    right: -6px;
}

.horizontalDiagramWrap .axisNames:first-child {
    top: 12px;
}

.horizontalDiagramWrap .axisNames:last-child {
    bottom: 12px;
}

.horizontalDiagramWrap .axisNames span {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 2;
    opacity: 0.5;
    color: var(--secondary-text-color);
    width: 14px;
    text-align: center;
}

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

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

@media only screen and (max-width: 768px) {
    .horizontalDiagramWrap {
        width: calc(100% - 16px);
        padding-bottom: 16px;
    }

    .horizontalDiagramItemWrap {
        width: 100%;
        flex-direction: column;
        row-gap: 4px;
        padding-left: 32px;
    }

    .horizontalDiagramItemTitle {
        width: 100%;
        text-align: left;
        padding-left: 0;
    }

    .horizontalDiagramPartsWrap {
        width: 100%;
    }
}


/* ==========================================================================
              ACTION LIST
             ========================================================================== */
.actionListMainWrap {
    position: fixed;
    bottom: 0;
    right: 0;
    height: auto;
    border-top-left-radius: 16px;
    background: #F9F9FB;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    z-index: 6;
}

.actionListMainWrap.expandedHalf {
    height: 50vh;
    width: calc(100% - 288px);
}

.actionListMainWrap.expandedFull {
    height: calc(100vh - 136px);
    width: calc(100% - 288px);
}

.actionListMainWrap.expandedFull + .popupBg,
.actionListMainWrap.expandedHalf + .popupBg {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0D131C;
    opacity: 0.2;
    z-index: 5;
}

.actionListMainWrap.collapsed .actionListHeader {
    padding: 8px 16px;
}

.actionListHeader {
    background: var(--main-text-color);
    padding: 6px 24px 3px 16px;
    border-top-left-radius: 16px;
    column-gap: 16px;
    align-items: center;
}

.actionListHeaderAmount {
    background: #00C66E;
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.45;
    border-radius: 50%;
    min-width: 16px;
    text-align: center;
}

.actionListHeaderTitle {
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 1.14;
    color: #FFFFFF;
    flex-grow: 1;
    text-align: center;
}

.actionListMainWrap.collapsed .actionListHeaderControls .onlyIconBtn {
    height: 16px;
}

.actionListMainWrap.collapsed .actionListHeaderControls svg {
    height: 16px;
    width: 16px;
}

@media (hover: hover) {
    .actionListHeaderControls .onlyIconBtn:hover rect:first-child,
    .actionListHeaderControls .onlyIconBtn.active:hover rect:first-child {
        fill: var(--button-hover-color);
    }

    .actionListHeaderControls .onlyIconBtn:hover rect:last-child,
    .actionListHeaderControls .onlyIconBtn.active:hover rect:last-child {
        fill: var(--button-text-color);
    }

    .actionListHeaderControls .onlyIconBtn:hover path,
    .actionListHeaderControls .onlyIconBtn.active:hover path {
        fill: none;
        stroke: var(--button-text-color);
    }
}

.actionListHeaderControls .onlyIconBtn:active rect:first-child,
.actionListHeaderControls .onlyIconBtn.active rect:first-child {
    fill: var(--button-active-color);
}

.actionListHeaderControls .onlyIconBtn:active rect:last-child,
.actionListHeaderControls .onlyIconBtn.active rect:last-child {
    fill: var(--button-text-color);
}

.actionListHeaderControls .onlyIconBtn:active path,
.actionListHeaderControls .onlyIconBtn.active path {
    fill: none;
    stroke: var(--button-text-color);
}

.actionListHeaderControls {
    column-gap: 8px;
}

.videoTutorialLink {
    padding-right: 0;
}

@media only screen and (max-width: 1024px) {
    .actionListMainWrap.expandedHalf {
        width: calc(100% - 144px);
    }

    .actionListMainWrap.expandedFull {
        width: calc(100% - 144px);
    }
}

@media only screen and (max-width: 768px) {
    .actionListMainWrap:not(.collapsed) {
        border-top-left-radius: 0;
        box-shadow: none;
    }

    .actionListMainWrap:not(.collapsed) .actionListHeader {
        border-top-left-radius: 0;
        padding: 6px 8px 3px 8px;
    }

    .expandOnHalfActionList {
        display: none;
    }

    .actionListMainWrap.expandedFull,
    .actionListMainWrap.expandedHalf {
        height: 100vh;
        width: 100%;
        z-index: 1200;
    }

    .actionListMainWrap.expandedFull .videoTutorialPopup {
        z-index: 16;
        top: 0;
        max-height: 100vh;
    }
}


.actionListMainWrap.expandedHalf .actionListBody,
.actionListMainWrap.expandedFull .actionListBody {
    display: flex;
}

.actionListMainWrap .actionListBody {
    display: none;
}

.actionListBody {
    align-items: stretch;
    padding: 12px 8px 16px 16px;
}

.actionListBodyHeading {
    align-items: center;
    padding-right: 16px;
}

.actionListBodyHeading h1 {
    line-height: 1.5;
    font-size: var(--title-font-size-lg-s);
    font-weight: 700;
    flex-grow: 1;
}

.actionListBodyControls {
    align-items: center;
    column-gap: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
}

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

.actionListBodyControlsInner:first-child {
    flex-grow: 1;
}

.actionListFilterIcon {
    display: none;
    height: 40px;
}

.actionListBodyControlsInner .onlyIconBtn {
    height: 40px;
}

.actionListBodyControls .videoTutorialLink .onlyIconBtn:hover path,
.actionListBodyControls .videoTutorialLink .onlyIconBtn.active:hover path,
.actionListBodyControls .videoTutorialLink .btn-icon:hover path,
.actionListBodyControls .videoTutorialLink .btn-icon.active:hover path {
    fill: none;
}

@media (hover: hover) {
    .actionListBodyControls .onlyIconBtn:hover rect,
    .actionListBodyControls .onlyIconBtn.active:hover rect {
        fill: var(--button-hover-color);
    }

    .actionListBodyControls .onlyIconBtn:hover path,
    .actionListBodyControls .onlyIconBtn.active:hover path,
    .actionListBodyControls .btn-icon:hover path,
    .actionListBodyControls .btn-icon.active:hover path {
        fill: var(--button-text-color);
    }

    .findTaskBtn:hover svg:last-child circle,
    .findTaskBtn.active:hover svg:last-child circle,
    .findTaskBtn:hover svg:last-child path,
    .findTaskBtn.active:hover svg:last-child path {
        stroke: var(--button-text-color);
    }
}

.actionListBodyControls .onlyIconBtn:active rect,
.actionListBodyControls .onlyIconBtn.active rect {
    fill: var(--button-active-color);
}

.actionListBodyControls .onlyIconBtn:active path,
.actionListBodyControls .onlyIconBtn.active path,
.actionListBodyControls .btn-icon:active path,
.actionListBodyControls .btn-icon.active path,
.actionListBodyControls .btn-icon:focus path {
    fill: var(--button-text-color);
}

.findTaskBtn:active svg:last-child circle,
.findTaskBtn.active svg:last-child circle,
.findTaskBtn:active svg:last-child path,
.findTaskBtn.active svg:last-child path {
    stroke: var(--button-text-color);
}

.findTaskBtn svg:last-child {
    display: none;
}

.findTaskBtn svg:last-child circle,
.findTaskBtn svg:last-child path {
    stroke: #3264E8;
}

.actionListCheckboxWrap {
    column-gap: 24px;
}

.actionListCheckboxWrap .checkbox {
    column-gap: 8px;
}

.actionListMainWrap.expandedHalf .actionListBodyScroll {
    height: calc(50vh - 104px);
    overflow-y: auto;
    padding-right: 8px;
}

.actionListMainWrap.expandedFull .actionListBodyScroll {
    overflow-y: scroll;
    height: calc(100vh - 136px - 103px);
    padding-right: 8px;
}

.addTaskBtn {
    height: 40px;
}

.actionListAddTaskWrap,
.actionListFindTaskWrap {
    display: none;
    align-items: stretch;
    row-gap: 8px;
    padding-bottom: 4px;
}

.actionListAddTaskWrap.open,
.actionListFindTaskWrap.open {
    display: flex;
}

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

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

.actionListAddTaskInner,
.actionListFindTaskInner {
    column-gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px;
}

.actionListAddTaskInner:last-child,
.actionListFindTaskInner:last-child {
    align-items: flex-end;
}

.actionListAddTaskInner .inputWrap,
.actionListAddTaskInner .form-group {
    width: calc((100% - 120px) / 4 - 8px * 4 / 4);
}

.actionListAddTaskInner .inputWrap:first-child,
.actionListFindTaskInner .inputWrap:first-child,
.actionListAddTaskInner .form-group:first-child,
.actionListFindTaskInner .form-group:first-child {
    width: 100%;

}

.actionListAddTaskInner .inputWrap:first-child textarea,
.actionListFindTaskInner .inputWrap:first-child textarea,
.actionListAddTaskInner .form-group:first-child textarea,
.actionListFindTaskInner .form-group:first-child textarea {
    height: 64px;
}

.actionListAddTaskInner .inputWrap:last-child,
.actionListAddTaskInner .form-group:last-child {
    width: 120px;
}

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

.priorityAssistantAddTaskBlock .inputWrap,
.priorityAssistantAddTaskBlock .form-group {
    width: 100%;
    max-width: 152px;
}

.priorityAssistantAddTaskBlock .inputWrap:last-child,
.priorityAssistantAddTaskBlock .form-group:last-child {
    width: 100%;
    max-width: 72px;

}


.priorityAssistantAddTaskBlock .inputWrap:last-child input,
.priorityAssistantAddTaskBlock .form-group:last-child input {
    color: var(--secondary-text-color);
    padding-left: 24px;
}

.actionAddOutcome {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    text-align: left;
}

.actionAddOutcome:after {
    content: '';
    position: absolute;
    top: 28px;
    left: 8px;
    height: 24px;
    width: 8px;
    border-radius: var(--border-radius-lg);
}

.hi-lo.actionAddOutcome:after {
    background-color: #049d56;
}

.lo-lo.actionAddOutcome:after {
    background-color: #FC6902;
}

.hi-hi.actionAddOutcome:after {
    background-color: #FFBA13;
}

.lo-hi.actionAddOutcome:after {
    background-color: #E91B0D;
}

.actionListEditTaskWrap {
    display: none;
}

.editMode .actionListEditTaskWrap {
    display: flex;
}

.addTaskBtnsWrap {
    column-gap: 8px;
    flex-grow: 1;
    justify-content: flex-end;
    margin-bottom: 5px;
}

.findTaskBtn.active svg:first-child {
    transform: rotate(180deg);
}

.actionListFindTaskInner:nth-child(2) .inputWrap:first-child,
.actionListFindTaskInner:nth-child(2) .form-group:first-child {
    width: 100%;
}

.actionListFindTaskInner .inputWrap,
.actionListFindTaskInner .form-group {
    width: calc(100% / 5 - 8px * 4 / 5);
}

.actionListFindTaskInner:last-child > .containerRow {
    flex-grow: 1;
    justify-content: flex-start;
    column-gap: 8px;
}

.actionListFindTaskInner:last-child .inputWrap,
.actionListFindTaskInner:last-child .form-group {
    width: calc((100% + 90px) / 7 - 8px * 6 / 7);
}

.findTask {
    margin-bottom: 5px;
}


@media only screen and (max-width: 1200px) {
    .actionListCheckboxWrap {
        column-gap: 16px;
    }

    .actionListAddTaskInner,
    .actionListFindTaskInner {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .actionListAddTaskInner .inputWrap,
    .actionListAddTaskInner .inputWrap:first-child,
    .actionListAddTaskInner .inputWrap:last-child,
    .actionListAddTaskInner .form-group,
    .actionListAddTaskInner .form-group:first-child,
    .actionListAddTaskInner .form-group:last-child {
        width: calc(50% - 4px);
    }

    .actionListFindTaskInner:nth-child(2) .inputWrap:first-child,
    .actionListFindTaskInner .inputWrap,
    .actionListFindTaskInner:last-child .inputWrap,
    .actionListFindTaskInner:nth-child(2) .form-group:first-child,
    .actionListFindTaskInner .form-group,
    .actionListFindTaskInner:last-child .form-group {
        width: calc(50% - 4px);
    }

}

@media only screen and (max-width: 1024px) {
    .actionListBodyControlsInner:first-child {
        position: relative;
    }

    .actionListCheckboxWrap {
        flex-direction: column;
        row-gap: 8px;
        display: none;
        background: #FFFFFF;
        box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
        border-radius: var(--border-radius-lg);
        position: absolute;
        padding: 16px;
        z-index: 1;
        top: 44px;
        left: 0;
    }

    .actionListCheckboxWrap.open {
        display: flex;
    }

    .actionListCheckboxWrap .checkbox {
        white-space: nowrap;
    }

    .actionListFilterIcon {
        display: block;
    }

    .actionListFindTaskInner:last-child {
        justify-content: center;
    }

    .findTask {
        justify-self: center;
    }

}

@media only screen and (max-width: 768px) {
    .actionListMainWrap.expandedHalf .actionListBodyScroll,
    .actionListMainWrap.expandedFull .actionListBodyScroll {
        overflow-y: auto;
        height: calc(100vh - 110px);
    }

    .actionListBodyHeading,
    .actionListBodyControls {
        padding-right: 0;
    }

    .actionListBody {
        padding: 12px 8px 16px 8px;
    }

    .findTaskBtn svg:last-child {
        display: block;
    }

    .findTaskBtn svg:first-child,
    .findTaskBtn span {
        display: none;
    }

    .actionListAddTaskInner .inputWrap,
    .actionListAddTaskInner .inputWrap:first-child,
    .actionListAddTaskInner .inputWrap:last-child,
    .actionListAddTaskInner .form-group,
    .actionListAddTaskInner .form-group:first-child,
    .actionListAddTaskInner .form-group:last-child {
        width: 100%;
    }

    .priorityAssistantAddTaskBlock {
        flex-grow: 1;
    }

    .priorityAssistantAddTaskBlock .inputWrap,
    .priorityAssistantAddTaskBlock .inputWrap:last-child,
    .priorityAssistantAddTaskBlock .form-group,
    .priorityAssistantAddTaskBlock .form-group:last-child {
        width: calc(33% - 16px / 3);
        max-width: calc(33% - 16px / 3);
    }

    .addTaskBtnsWrap {
        flex-grow: 1;
        justify-content: center;
    }

    .actionListFindTaskInner:nth-child(2) .inputWrap:first-child,
    .actionListFindTaskInner .inputWrap,
    .actionListFindTaskInner:last-child .inputWrap,
    .actionListFindTaskInner:nth-child(2) .form-group:first-child,
    .actionListFindTaskInner .form-group,
    .actionListFindTaskInner:last-child .form-group {
        width: 100%;
    }

    .actionListFindTaskInner:last-child > .containerRow {
        flex-wrap: wrap;
        width: 100%;
        row-gap: 8px;
    }

    .priorityAssistantAddTaskBlock {
        flex-wrap: wrap;
    }

}


.actionListItemsWrap {
    align-items: stretch;
    row-gap: 8px;
    padding-bottom: 16px;
}

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

@media (hover: hover) {
    .itemControlComplete:hover path {
        stroke: var(--button-text-color);
    }
}

[data-is-completed="true"] {
    background: #a9ffcd;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

/*[data-is-completed="true"] .actionListItemContentHeading .h2,
[data-is-completed="true"] .actionListItemParametrDate,
[data-is-completed="true"] .actionListItemParametrWrap strong,
[data-is-completed="true"],
[data-is-completed="true"] .actionListItemParametrWrap {
    color: var(--triple-text-color);
}

[data-is-completed="true"] .actionListAttentionIcon rect:first-child {
    fill: var(--triple-text-color);
}

[data-is-completed="true"] .priorityAssistantIcon path {
    fill: var(--triple-text-color);
}

[data-is-completed="true"] .actionListItemParametrDate path,
[data-is-completed="true"] .priorityBlock path {
    stroke: var(--triple-text-color);
}

[data-is-completed="true"] circle {
    stroke: var(--triple-text-color);
}*/

[data-display-completed="true"] [data-is-completed="true"] {
    display: block;
}

.actionListItemContent {
    align-items: stretch;
    padding-left: 16px;
    padding-right: 120px;
}

.priorityAssistantColor {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 8px;
    width: 8px;
    border-radius: var(--border-radius-lg);
}

.priorityAssistantColor-green {
    background: #049D56;
}

.priorityAssistantColor-yellow {
    background: #FFBA13;
}

.priorityAssistantColor-red {
    background: #E91B0D;
}

.priorityAssistantColor-orange {
    background: #FC6902;
}

.isNewAction {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    background: var(--green-color-badges);
}

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

.actionListItemContentHeading .h2 {
    flex-grow: 1;
    line-height: 1.7;
}

.priorityAssistantBlock,
.priorityAssistantIcon {
    height: 16px;
}

.priorityAssistantBlock {
    align-self: flex-start;
    justify-content: flex-start;
    align-items: center;
    padding-top: 2px;
    position: relative;
}

.priorityAssistantBlock strong {
    font-weight: 500;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
    text-align: right;
    width: 50%;
}

.priorityAssistantBlock span {
    font-weight: 400;
    font-size: var(--small-text-font-size);
    line-height: 1.3;
    text-align: left;
}

.priorityAssistantBlock span.high,
.priorityAssistantBlock span.paLevel-2 {
    color: #049D56;
}

.priorityAssistantBlock span.low,
.priorityAssistantBlock span.paLevel-0 {
    color: #E91B0D;
}

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

.priorityAssistantIcon:hover + .priorityAssistantDescriptionWrap {
    display: flex;
    align-items: stretch;
    min-width: 100px;
    position: absolute;
    bottom: 100%;
    left: calc(50% - 50px);
    background: #FFFFFF;
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    padding: 16px 0;
    border-radius: 6px;
}

.actionListItem:first-child .priorityAssistantDescriptionWrap {
    bottom: auto;
    top: 100%;
}

.priorityBlock {
    align-self: flex-start;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    min-width: 96px;
    font-weight: 500;
    font-size: var(--main-font-size);
    line-height: 1.7;
}

.priorityAssistantDescriptionWrap {
    display: none;
}


.actionListItemContentControls {
    position: absolute;
    top: 8px;
    right: 8px;
    column-gap: 8px;
    width: auto;
}

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

.actionListItemParametrWrap {
    justify-content: flex-start;
    align-items: center;
    width: calc(100% / 5 - 8px * 6 / 5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--secondary-text-color);
    column-gap: 4px;
}

.actionListItemParametrWrap svg {
    margin-right: 4px;
}

.actionListItemParametrWrap strong {
    margin-right: 6px;
}

.priorityAssistantColor-hi-hi {
    background: #FFBA13;
}

.priorityAssistantColor-hi-lo {
    background: #049D56;
}

.priorityAssistantColor-lo-lo {
    background: #FC6902;
}

.priorityAssistantColor-lo-hi {
    background: #E91B0D;
}

.creator {
    display: none;
}

.creator.active {
    display: flex;
}

.priorityAssistantBlock,
.priorityAssistantColor,
.priorityAssistantAddTaskBlock {
    display: none;
}

.priorityAssistantBlock.active,
.priorityAssistantColor.active,
.priorityAssistantAddTaskBlock.active {
    display: flex;
}


.actionListItemParametrDate {
    font-weight: 500;
    color: var(--main-text-color);
}

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

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


.editMode .actionListItemContent {
    display: none;
}

.actionListEditTaskWrap {
    align-items: stretch;
    row-gap: 8px;
    padding-bottom: 8px;
}

.toggle-password {
    cursor: pointer;
}

.hidePass .show-pas {
    display: none;
}

.hidden-pas {
    display: none;
}

.hidePass .hidden-pas {
    display: inline;
}


@media (hover: hover) {
    .itemControlSave:hover path {
        fill: none;
    }

    .iconControl.itemControlClose:hover path,
    .iconControl.itemControlCloseCreateDelete:hover path {
        fill: white;
        stroke: none;
    }

    .iconControl.itemControlCloseCreateDelete:hover path {
        fill: white;
        stroke: white;
    }
}

.itemControlSave:active path {
    fill: none;
}

.iconControl.itemControlClose:active path {
    fill: white;
    stroke: none;
}

.block {
    display: block;
}

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

    .actionListItemContentHeading {
        padding-right: 120px;
    }

    .actionListItemContentHeading .h2 {
        line-height: 1.25;
    }

    .actionListItemContentInner {
        padding-top: 8px;
    }

}

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

    .actionListItemContentInner {
        flex-wrap: wrap;
    }

    .actionListItemParametrWrap {
        width: calc(100% / 2 - 8px * 1 / 2);
    }

    .actionListItemParametrWrap:first-child {
        width: calc(100%);
    }
}

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

    .actionListItemContentHeading {
        flex-wrap: wrap;
        padding-right: 0;
        padding-top: 32px;
        row-gap: 4px;
    }

    .actionListItemContentHeading h2 {
        width: calc(100% - 16px);
    }

    .actionListItemContentInner {
        padding-top: 0;
    }

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


/* MODALS */
.modal-backdrop {
    background: rgba(13, 19, 28, 0.9);
}

.modal-backdrop.show {
    opacity: 1;
}


.modal:not(#no-internet) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 1;
    transition: none;
    z-index: 1055;
}

.modal:not(#no-internet) .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: none;
    margin: 0;
    width: 76.5%;
    max-width: 624px;
    max-height: calc(100vh - 128px);

}

#no-internet {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    width: 76.5%;
    max-width: 624px;
    transition: none;
    margin: 0;
    top: auto;
    height: auto;
}

#no-internet .modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 624px;
    padding: 16px 16px 0;

}

.modal-content {
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius-lg);
    padding: 40px 8px 32px;
    border: none;
    background-color: var(--bg);
}


.modal-header .btn-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    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;
}

.modal-header .btn-close: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");
}

.modal-header .btn-close: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");
}

.modal-header .btn-close:focus {
    outline: 0 none;
    box-shadow: none;
}

.modal-header {
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-bottom: 0;
}

.modal-header .modal-title {
    font-size: var(--title-font-size-lg);
    font-weight: 700;
    line-height: 1.17;
    text-align: center;
    padding-bottom: 16px;
}

.modal-body {
    text-align: center;
    color: var(--secondary-text-color);
    margin: 0;
    padding: 8px;
    border: none;
    border-radius: 0;

    overflow-y: auto;
    height: 100%;
    max-height: calc(100vh - 128px - 51px - 40px - 32px);
}

.no-title-modal {
    max-height: calc(100vh - 128px - 40px - 32px);
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(162, 168, 184, 0.2);
    border-radius: 10px;
    width: 8px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(162, 168, 184, 0.5);
    border-radius: 10px;
    width: 8px;
}

.modal-body {
    scrollbar-color: rgba(162, 168, 184, 0.5) rgba(162, 168, 184, 0.2);
    scrollbar-width: thin;
}

.modal-footer {
    border: none;
    justify-content: center;
    column-gap: 8px;
    flex-direction: row;
    padding: 0;
    border-radius: 0;
    padding-top: 16px;
}

.modal-footer > * {
    margin: 0;
}

.modal-footer .btn {
    display: flex;
    transition: none;
}

.modal-footer .btn:focus {
    box-shadow: none;
}

.modal-footer .btn-primary:active {
    border: none;
}

.modal-body label {
    text-align: left;
    color: var(--main-text-color);
}

.modal-body p {
    text-align: left;
}

.modal-body .checkbox-custom {
    text-align: left;
}

@media only screen and (max-width: 768px) {
    .modal:not(#no-internet) .modal-dialog {
        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(1);
        z-index: 1;
        top: 64px;
        transition: none;

    }

    .modal-content {
        padding-bottom: 40px;
        height: 100%;
        border-radius: 0;
    }

    .modal-header .btn-close {
        top: 16px;
        right: 16px;
        width: 16px;
        height: 16px;
    }

    #no-internet {
        width: 100%;
        max-width: 100%;
    }

    #no-internet .modal-dialog {
        width: 100%;
        max-width: 100%;
        padding: 16px 0 0;
    }

    .modal-body {
        max-height: calc(100vh - 64px - 51px - 40px - 32px);
    }

    .no-title-modal {
        max-height: calc(100vh - 64px - 40px - 32px);
        height: 100%;

    }

}


/*.select2-container {*/
/*    z-index: 10000;*/
/*}*/

.select2-results {
    padding: 8px;
}

.select2-results__options {
    padding-right: 8px;
}

.select2-dropdown {
    border: none;
    border-radius: 6px;
    color: var(--input-text-color);
    outline: 0 none;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.select2-search.select2-search--dropdown {
    padding: 8px 24px 8px 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--triple-text-color);
    border-radius: 6px;
    color: var(--input-text-color);
    outline: 0 none;
    padding: 8px;
    height: 40px;
}

.select2-results__option {
    padding: 8px;
    border-radius: 6px;
}

.select2-container--default .select2-results__option--selected {
    background: var(--input-active-color);
    color: var(--button-text-color);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--input-hover-color);
    color: var(--button-text-color);
}

#accModal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--input-text-color);
}

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

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

.effectivenessContent .grourTextareasWrap .groupTextareaInner label {
    align-items: flex-start;
}

.spFilterBtn {
    margin-right: 10px;
}