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

@font-face {
    font-family: "Outfit";
    src: url('/css/font/Outfit-Regular.ttf');
    font-style: normal;
}

@font-face {
    font-family: "Outfit Bold";
    src: url('/css/font/Outfit-Bold.ttf');
    font-style: normal;
}


@font-face {
    font-family: "Outfit Medium";
    src: url('/css/font/Outfit-Medium.ttf');
    font-style: normal;
}


:root {
    --fontColor: #6D8797;
    --bgColor: white;
}

html, body, #app {
    font-family: "Outfit";
    height: 100%;
    background-color: var(--bgColor) !important;
    overflow-x: hidden;
}

.oi-timer {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(/css/images/loading-cube.gif) no-repeat;
    background-size: 100%;
    content: '';
}

    .oi-timer::before {
        content: '' !important;
    }

.main-content {
    height: 100%;
    display: flex;
    flex-direction: row;
}

    .main-content .navigation {
        position: relative;
        flex-grow: 1;
        display: block;
        max-width: 173px;
        min-width: 173px;
        height: 100%;
        user-select: none;
        background-color: white;
        overflow: visible;
        border-right: 1px solid transparent;
    }

    .main-content.suppliers-only-mode .navigation {
        display: none;
    }

    .main-content .navigation.no-nav {
        min-width: 40px !important;
        max-width: 40px !important;
    }

    .main-content .navigation:before {
        content: "";
        position: absolute;
        right: 0px;
        top: 0.5rem;
        height: calc(100% - 1rem);
        width: 1px;
        border-right: 1px solid #E3ECF3;
        z-index: 999;
    }

    .main-content .navigation.sidebar-expanded {
        display: flex;
        max-width: 350px;
        min-width: 350px !important;
    }

.header-area {
    background: white;
    position: absolute;
    width: 100%;
    height: 80px;
    color: white;
}

.suppliers-only-mode .header-area {
    display: none;
}

.header-area .top-banner {
    position: relative;
    background-color: #008AD1;
    height: 35px;
    padding-left: 20px;
    z-index: 9999;
    padding-top: 6px;
    color: white;
}

    .header-area .top-banner .section-menu {
        width: 173px;
        border-right: 1px solid white;
        display: inline-block;
        width: 173px;
        position: absolute;
        left: 0px;
        top: 0px;
        height: 35px;
    }

        .header-area .top-banner .section-menu .item {
            color: white;
            font-size: 9px;
            /*font-weight: bold;*/
            padding: 2px 4px;
            padding-bottom: 2px;
            border-bottom: 1px solid white;
            position: relative;
            cursor: pointer;
        }

            .header-area .top-banner .section-menu .item .icon.icon-arrow-down {
                width: 12px;
                height: 12px;
                background: url('/css/images/icon-chevron-down.svg') no-repeat;
                background-size: 12px;
                position: absolute;
                right: 4px;
                top: 2px;
            }

            .header-area .top-banner .section-menu .item:last-child {
                border-bottom: 0;
            }

.domain-selection-wrapper {
    position: absolute;
    right: 80px;
    width: 200px;
    padding-left: 18px;
    background-image: url('/css/images/icon-domain.svg');
    background-repeat: no-repeat;
    background-position: 2px center;
    background-size: 14px;
}

.domain-selection {
    width: 100%;
    background: #1d89d2;
    border: none;
    color: white;
    cursor: pointer;
}

    .domain-selection:focus {
        outline: 0;
    }

    .domain-selection:hover {
        background: #509CD0;
    }

.header-area .top-banner .module-buttons {
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 35px;
    overflow: hidden;
}

    .header-area .top-banner .module-buttons .active-border {
        display: none;
    }

    .header-area .top-banner .module-buttons .item.active .active-border {
        display: block;
        position: absolute;
        bottom: -4px;
        left: 0px;
        width: 100%;
        height: 4px;
        border-radius: 6px;
        background-color: #ff9e18;
    }

    .header-area .top-banner .module-buttons .item {
        display: inline-block;
        vertical-align: middle;
        font-family: "Outfit";
        font-size: 14px;
        color: white;
        padding-top: 6px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 3px;
        border-bottom: 6px solid rgba(255, 158, 22, 0);
        cursor: pointer;
        position: relative;
    }

        .header-area .top-banner .module-buttons .item .icon.icon-module {
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url('/css/images/icon-module.svg') no-repeat;
            background-size: 16px;
        }

        .header-area .top-banner .module-buttons .item .icon.icon-dashboard {
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url('/css/images/icon-dashboard.svg') no-repeat;
            background-size: 16px;
        }

        .header-area .top-banner .module-buttons .item:hover {
            background-color: #1d9cdd;
        }

        .header-area .top-banner .module-buttons .item span {
            display: inline-block;
            vertical-align: middle;
        }

        .header-area .top-banner .module-buttons .item.active {
        }

            .header-area .top-banner .module-buttons .item.active:hover {
                background-color: transparent;
            }



.header-area .top-banner .assistant {
    display: inline-block;
    position: absolute;
    right: 90px;
    top: 0px;
    padding-top: 6px;
    height: 35px;
    font-family: "Outfit";
    font-size: 14px;
    color: white;
    cursor: pointer;
}

    .header-area .top-banner .assistant:hover {
        /* font-weight: bold; */
    }

    .header-area .top-banner .assistant span {
        display: inline-block;
        vertical-align: middle;
    }

    .header-area .top-banner .assistant .icon.icon-assistant {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url('/css/images/icon-assistant.svg') no-repeat;
        background-size: 16px;
    }

.header-area .top-banner .oi-account-logout {
    cursor: pointer;
}

.header-area .top-banner .auth-wrapper {
    position: absolute;
    right: 13px;
    top: 2px;
    cursor: pointer;
    padding: 4px 5px;
    padding-bottom: 2px;
    border-radius: 5px;
}

    .header-area .top-banner .auth-wrapper:hover {
        background-color: #1d9cdd;
    }

    .header-area .top-banner .auth-wrapper > div {
        vertical-align: middle;
    }


.header-area .top-banner .user-menu {
    display: inline-block;
    vertical-align: middle;
    height: 25px;
    width: 25px;
    background: url('/css/images/icon-account.svg') no-repeat;
    background-size: 25px;
    cursor: pointer;
    border-radius: 25px;
    bottom: 0px;
    transform: translate(0, -0.7px);
}


.header-area .current-domain {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    color: white;
}

.header-area .toggled-menu {
    position: absolute;
    right: 0px;
    top: 35px;
    z-index: 99999;
    color: #2c2c2c;
    width: 236px;
    border-bottom-left-radius: 5px;
    display: inline;
    border-style: none;
    background-color: rgb(255, 255, 255);
    border-width: 0px;
    overflow: visible;
    border-color: rgb(227, 236, 243);
    border-bottom-right-radius: 5px;
    box-shadow: rgb(202, 202, 202) 0px 3px 4px;
    padding: 10px 20px;
}

    .header-area .toggled-menu.language-mode {
        right: 237px;
        bottom: 0px;
        top: unset;
    }

    .header-area .toggled-menu .title {
        font-size: 11px;
        color: #495d70;
        margin-top: 8px;
        margin-bottom: 3px;
    }

    .header-area .toggled-menu .language {
        border-top: 2px solid #eaf1f6;
        border-bottom: 2px solid #eaf1f6;
        font-size: 12px;
        text-align: center;
        padding: 8px;
        cursor: pointer;
        background: url(/css/images/icon-arrow-down.svg) no-repeat;
        background-size: 20px;
        background-position: 85% 50%;
    }

        .header-area .toggled-menu .language:hover {
            background-color: #EDF8FF;
        }

    .header-area .toggled-menu .domain-list .domain {
        display: block;
        font-size: 12px;
        padding: 1px 6px;
        cursor: pointer;
        border-style: solid;
        border-width: 1px;
        border-color: transparent;
    }

    .header-area .toggled-menu .domain-list.changing .domain {
        opacity: 0.55;
    }

    .header-area .toggled-menu .domain-list .domain.active {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(0, 138, 209);
        border-radius: 5px;
        background-color: #EDF8FF;
    }

    .header-area .toggled-menu .domain-list .domain:hover {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(0, 138, 209);
        border-radius: 5px;
        background-color: #EDF8FF;
    }

    .header-area .toggled-menu .domain-list .domain:nth-child(odd) {
        background-color: #f6f8fa;
    }

    .header-area .toggled-menu .avatar-line {
        display: block;
    }

        .header-area .toggled-menu .avatar-line > div {
            display: inline-block;
            vertical-align: middle;
        }

    .header-area .toggled-menu .menu-button {
        display: block;
        width: 100%;
        margin-top: 8px;
        cursor: pointer;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 5px;
        border-radius: 4px;
    }

    .header-area .toggled-menu.locked .menu-button {
        opacity: 0.55;
    }

    .header-area .toggled-menu .menu-button:hover {
        background-color: #EDF8FF;
    }

    .header-area .toggled-menu .menu-button > div {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        bottom: 2px;
    }

        .header-area .toggled-menu .menu-button > div.text {
            font-size: 12px;
        }

    .header-area .toggled-menu .menu-button .mb-icon {
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

        .header-area .toggled-menu .menu-button .mb-icon.cog {
            background-image: url('/css/images/icon-cog.svg');
        }

        .header-area .toggled-menu .menu-button .mb-icon.log-out {
            background-image: url('/css/images/icon-log-out.svg');
        }

    .header-area .toggled-menu .profile-image {
        width: 34px;
        height: 34px;
        border-radius: 34px;
        background-size: 34px;
        background-position: center;
        margin-right: 6px;
    }

    .header-area .toggled-menu .text {
        font-size: 14px;
    }


.toggled-menu .menu-flex {
    display: flex;
    flex-direction: row;
}

    .toggled-menu .menu-flex .item {
        flex-grow: 1;
        border-right: 1px solid white;
        text-align: center;
        line-height: 13px;
    }

        .toggled-menu .menu-flex .item:last-child {
            border-right: 0px;
        }

        .toggled-menu .menu-flex .item .title {
            font-size: 10px;
        }

        .toggled-menu .menu-flex .item .hoverable:hover {
            background-color: #509CD0;
            cursor: pointer;
        }

    .toggled-menu .menu-flex .lang {
        display: inline-block;
        font-size: 13px;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 3px;
        margin-bottom: 3px;
    }

        .toggled-menu .menu-flex .lang:hover {
            background: #509CD0;
        }

        .toggled-menu .menu-flex .lang.active {
            color: rgb(29, 137, 211);
            background: white;
            padding: 2px 4px;
        }

    .toggled-menu .menu-flex .icon-settings {
        display: block;
        height: 24px;
        width: 24px;
        background: url('/css/images/icon-settings.svg') no-repeat;
        background-size: 24px;
        cursor: pointer;
        margin: 0 auto;
    }

    .toggled-menu .menu-flex .icon-signout {
        display: block;
        height: 24px;
        width: 24px;
        background: url('/css/images/icon-signout.svg') no-repeat;
        background-size: 24px;
        cursor: pointer;
        margin: 0 auto;
    }

.minus-toggle {
    margin-right: 5px;
    cursor: pointer;
}

.plus-toggle {
    margin-left: 5px;
    cursor: pointer;
}


.header-area .top-banner .main-search {
    position: absolute;
    width: 300px;
    left: calc(50% - 150px);
    background-color: white;
    background-image: url(/css/images/sorba-logo.png), url(/css/images/search.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: center, calc(100% - 10px) center;
    background-size: 60px, 15px;
    border-radius: 15px;
    height: 25px;
    top: 5px;
    font-size: 14px;
    z-index: 99999;
    border: 0;
    outline: none;
    padding: 0px 15px;
    padding-right: 30px;
}

.header-area .top-banner .mobile-toggle {
    display: none;
}

.header-area .module-header {
    position: relative;
    padding-left: 80px;
    padding-top: 10px;
    font-size: 20px;
}


.navigation .sidebar {
    display: block;
    width: 38px;
    background-color: #1d89d2;
    color: white;
    text-align: center;
    border-color: rgb(155, 155, 155);
    position: absolute;
    left: 0px;
    top: 0px;
    height: calc(100%);
    padding: 45px 0px;
    z-index: 9;
}

    .navigation .sidebar.expanded {
        width: 176px;
        min-width: 176px;
        padding: 14px 12px;
        text-align: left;
        position: relative;
    }

    .navigation .sidebar .version {
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 100%;
        font-size: 11px;
        text-align: center;
        display: none;
    }

    .navigation .sidebar.expanded .version {
        display: block;
    }

    .navigation .sidebar .expanded-title {
        display: none;
        font-size: 14px;
        margin-bottom: 26px;
        text-align: center;
    }

    .navigation .sidebar.expanded .expanded-title {
        display: block;
    }

    .navigation .sidebar .item {
        padding: 2px 0px;
        cursor: pointer;
        line-height: 14px;
        margin-top: 10px;
    }

        .navigation .sidebar .item.active {
            background-color: #ff9d18;
        }

    .navigation .sidebar.expanded .item.active {
        background-color: transparent;
    }

        .navigation .sidebar.expanded .item.active .text {
            background-color: rgb(255, 158, 22);
            font-family: "Outfit";
        }

    .navigation .sidebar .item .icon {
        display: block;
        margin: 0 auto;
        width: 16px;
        height: 16px;
        background-size: 16px;
        background-position: center;
    }

    .navigation .sidebar.expanded .item .icon {
        display: inline-block;
        width: 19px;
        height: 19px;
        background-size: 19px;
        background-position: center;
        vertical-align: middle;
    }

    .navigation .sidebar .item .icon.activity {
        background-image: url('/css/images/clipboard-notes.svg');
    }

    .navigation .sidebar .item .icon.at {
        background-image: url('/css/images/icon-at.svg');
    }

    .navigation .sidebar .item .icon.project {
        background-image: url('/css/images/icon-project.svg');
    }

    .navigation .sidebar .item .icon.dollar {
        background-image: url('/css/images/icon-dollar.svg');
    }

    .navigation .sidebar .item .icon.debit {
        background-image: url('/css/images/icon-debit.svg');
    }

    .navigation .sidebar .item .icon.credit {
        background-image: url('/css/images/icon-credit.svg');
    }

    .navigation .sidebar .item .icon.loan {
        background-image: url('/css/images/icon-loan.svg');
    }

    .navigation .sidebar .item .icon.face {
        background-image: url('/css/images/icon-face.svg');
    }

    .navigation .sidebar .item .icon.flower {
        background-image: url('/css/images/icon-flower.svg');
    }

    .navigation .sidebar .item .text {
        display: none;
        font-size: 13px;
        vertical-align: middle;
        min-width: 100px;
        padding: 0px 5px;
        text-align: left;
        border-radius: 7px;
    }

    .navigation .sidebar .item .text-short {
        display: inline-block;
        font-size: 12px;
        /* font-weight: bold; */
        visibility: hidden;
    }

    .navigation .sidebar .item.active .text-short {
        visibility: visible;
    }

    .navigation .sidebar:hover .item .text-short {
        visibility: visible;
    }

    .navigation .sidebar .item .text {
        display: none;
    }

    .navigation .sidebar.expanded .item .text-short {
        display: none;
    }

    .navigation .sidebar.expanded .item .text {
        display: inline-block;
    }

    .navigation .sidebar .icon-expand {
        display: block;
        width: 28px;
        height: 28px;
        transform: translateX(5px) translateY(3px) rotate(-90deg) rotateY(0deg);
        position: absolute;
        top: 0px;
        right: 10px;
        background-size: 28px;
        background-image: url('/css/images/icon-arrow-down-white.svg');
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .navigation .sidebar.expanded .icon-expand {
        display: block;
        right: unset;
        left: 7px;
        top: 10px;
        background-image: url('/css/images/icon-menu-hide.svg');
        transform: unset;
    }

.navigation .module-menu {
    padding-bottom: 20px;
    height: 100%;
}

.nav-wrapper {
    overflow: auto;
    height: calc(100% - 17px);
}

.loading {
    margin-top: 4rem;
    text-align: center;
}

    .loading .icon-cube {
        background-image: url(/css/images/loading-cube.gif);
        display: inline-block;
        width: 30px;
        height: 30px;
        background-size: 30px;
        opacity: 0.7;
    }

.module-menu.prerender {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.navigation .module-menu .loading {
    font-size: 11px;
    padding-left: 40px;
    padding-top: 5px;
}

.navigation .module-menu .module-title {
    text-align: center;
    display: block;
    padding: 4px;
    color: #4c85a7;
    /* border-bottom: 1px inset rgb(206, 219, 228); */
    font-size: 13px;
    overflow-wrap: break-word;
    /* font-weight: bold; */
    padding-left: 30px;
    padding-bottom: 5.5px;
    padding-top: 10.5px;
}

.navigation .module-menu .item, .nested-nav .navigation-items .item, .nested-nav .fixed-menus .item {
    padding-left: 56px;
    font-family: "Outfit";
    font-size: 12px;
    overflow-wrap: break-word;
    cursor: pointer;
    margin-top: 8px;
    cursor: pointer;
    width: 100%;
    color: #495d70;
    padding-top: 1px;
    padding-bottom: 1px;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.navigation.sidebar-expanded .module-menu .item, .navigation.sidebar-expanded .module-menu .item .group-header, .navigation.sidebar-expanded .expandable .header-toggle {
    padding-left: 20px;
}

    .navigation.sidebar-expanded .module-menu .item.group .subitems {
        margin-left: 20px;
    }

.navigation .module-menu .item .group-header, .nested-nav .item .group-header {
    padding-left: 56px;
    font-size: 12px;
    font-family: "Outfit";
    /* font-weight: normal; */
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.navigation .module-menu .item:hover, .nested-nav .item:hover {
    background-color: #EDF8FF;
}

.navigation .module-menu .item:active, .nested-nav .item:active {
    background-color: #EDF8FF;
}

.navigation .module-menu .item.group:hover, .nested-nav .item.group:hover {
    background-color: white;
}

.navigation .module-menu .item.group .group-header:hover, .nested-nav .item.group .group-header:hover {
    background-color: #EDF8FF;
}

.navigation .module-menu .item.group:active, .nested-nav .item.group:active {
    background-color: white;
}

.navigation .module-menu .item.group .group-header:active, .nested-nav .item.group .group-header:active {
    background-color: #EDF8FF;
}

.navigation .module-menu .item.group .subitem:hover, .nested-nav .item.group .subitem:hover {
    background-color: #EDF8FF;
    border-right: 1px solid transparent;
}

.navigation .module-menu .item.group .subitem:active, .nested-nav .item.group .subitem:active {
    background-color: #EDF8FF;
}

.navigation .module-menu .item.active, .navigation .module-menu .item .group-header.active,
.nested-nav .item.active, .nested-nav .item .group-header.active {
    background-color: #EDF8FF;
    word-break: break-all;
    border-right: 1px solid rgb(255, 158, 22);
    border-top: 1px solid #E3ECF3;
    border-bottom: 1px solid #E3ECF3;
}

    .navigation .module-menu .item.active:hover, .navigation .module-menu .item .group-header.active:hover,
    .nested-nav .item.active:hover, .nested-nav .item .group-header.active:hover {
        background-color: #EDF8FF;
    }

.navigation .module-menu .item.group, .nested-nav .item.group {
    font-family: "Outfit Medium";
    margin-top: 4px;
    padding-left: 0px;
}

    .navigation .module-menu .item.group .subitems, .nested-nav .item.group .subitems {
        margin-left: 60px;
        padding-left: 9px;
        border-left: 1px solid #e3ecf3d1;
        font-family: "Outfit";
        font-size: 12px;
        color: #495d70;
        overflow-wrap: break-word;
        /* font-weight: normal; */
    }

    .navigation .module-menu .item.group.has-active-subitem .subitems, .nested-nav .item.group.has-active-subitem .subitems {
        margin-left: 0;
        padding-left: 0px;
    }

.navigation .module-menu .item .available-badge, .nested-nav .item .available-badge {
    background-color: #EDF8FF;
    color: #7e97a6;
    padding: 0px 10px;
    border-radius: 14px;
    float: right;
    /* font-weight: normal; */
    min-width: 33px;
    text-align: center;
    margin-right: 5px;
    line-height: 19px;
    margin-top: 2px;
}

.navigation .module-menu .item.active .available-badge, .nested-nav .item.active .available-badge {
    background-color: white;
    color: #6d8797;
    line-height: 19px;
    margin-top: 2px;
}

.navigation .module-menu .subitem, .nested-nav .subitem {
    padding-left: 0px;
    margin-bottom: 1px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    line-height: 1.2rem;
    position: relative;
    border-right: 1px solid transparent;
}


/*.navigation .module-menu .subitem:hover {
            background-color: #E6EFF7;
        }

        .navigation .module-menu .subitem:active {
            background-color: #D2E6F1;
        }*/

.navigation .module-menu .item.group .subitem.active, .nested-nav .item.group .subitem.active {
    background-color: #EDF8FF;
    border-radius: 0px;
    display: block;
    padding-right: 10px;
    word-break: break-all;
    border-right: 1px solid rgb(255, 158, 22);
    border-top: 1px solid #E3ECF3;
    border-bottom: 1px solid #E3ECF3;
}

.navigation .module-menu .item.group.has-active-subitem .subitem, .nested-nav .item.group.has-active-subitem .subitem {
    display: block;
    width: 100%;
    padding-right: 0px;
    border-radius: 0;
    padding-left: 69px;
}

.navigation.sidebar-expanded .module-menu .item.group.has-active-subitem .subitem {
    padding-left: 30px;
}

.navigation .module-menu .item.group .subitem.active:hover, .nested-nav .item.group .subitem.active:hover {
    background-color: #EDF8FF;
}

.content {
    flex-grow: 1;
    padding-top: 35px;
    z-index: 999;
    display: flex;
    flex-direction: row;
}

.main-content.suppliers-only-mode .content {
    padding-top: 0px;
}

.content .central-content {
    padding-top: 6px;
    flex-grow: 1;
    height: 100%;
    overflow-x: auto;
    background-color: var(--bgColor);
}

.central-content .badge-active-menu {
    display: block;
    position: relative;
    width: 100%;
    background: white;
    padding: 3px 9px;
    /*height: 32px;*/
    vertical-align: top;
    padding-left: 15px;
    font-size: 0;
    border-bottom: 1px solid transparent;
}

    .central-content .badge-active-menu:before {
        content: "";
        position: absolute;
        left: 0.25rem;
        bottom: 0px;
        height: 1px;
        width: calc(100% - 0.5rem);
        border-bottom: 1px solid #E3ECF3;
        z-index: 999;
    }


    .central-content .badge-active-menu .bookmarkable {
        padding-left: 2px;
        border-left: 1px solid #E3ECF3;
        margin-left: 2px;
    }

.history-item .history-body .steps {
    margin-top: 6px;
}

.history-item .history-body .image-item {
    max-width: 30px;
}

.central-content .badge-active-menu span {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    overflow-wrap: break-word;
    /* font-weight: normal; */
    overflow: visible;
    white-space: nowrap;
    padding: 2.5px 6px;
    color: #4c85a7;
    border-style: solid;
    border-width: 0px;
    overflow: visible;
    z-index: 1;
    border-radius: 3px;
    max-width: 100%;
    overflow-x: hidden;
    cursor: pointer;
    background: white;
    border: 1px solid #E3ECF3;
    border-radius: 3px;
}

.history-item .history-body .step {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    overflow-wrap: break-word;
    /* font-weight: normal; */
    overflow: visible;
    white-space: nowrap;
    padding: 2.5px 6px;
    color: white;
    border-style: solid;
    border-width: 0px;
    overflow: visible;
    z-index: 1;
    border-radius: 3px;
    color: #495d70;
    max-width: 100%;
    overflow-x: hidden;
    cursor: pointer;
    background: #F6F8FA;
    border: 0;
    border-radius: 3px;
}

.central-content .badge-active-menu span {
    min-width: 84px;
    max-width: 200px;
    text-align: center;
}

    .central-content .badge-active-menu span.no-hover {
        cursor: default;
    }

    .central-content .badge-active-menu span:not(.no-hover):not(.icon-close):not(.active):hover {
        color: #495d70;
        background: #EDF8FF;
        border: 1px solid transparent;
    }

    .central-content .badge-active-menu span:not(.no-hover):not(.icon-close):active {
        color: #4c85a7;
        background: #EDF8FF;
    }


.history-item .history-body .step {
    white-space: pre-wrap;
}

.history-item .icon-phone {
    background: url('/css/images/icon-phone.svg') no-repeat;
    display: inline-block;
    width: 12px;
    height: 12px;
}

.history-item .icon-book {
    background: url('/css/images/icon-book.svg') no-repeat;
    display: inline-block;
    width: 12px;
    height: 12px;
}

.central-content .badge-active-menu span.active, .history-item .history-body .step.active {
    background-color: #EDF8FF;
    color: #4c85a7;
    border: 1px solid #E3ECF3;
    border-radius: 3px
}

.content .body {
    position: relative;
    z-index: 9999;
    display: block;
    width: 100%;
    height: calc(100% - 70px);
    background: var(--bgColor);
    border-radius: 3px;
    font-size: 12px;
}

    .content .body.search-active {
        height: calc(100% - 95px);
    }

    .content .body.editing {
        height: calc(100% - 39px);
    }

    .content .body.gone {
        display: none;
    }


    .content .body.single-entity {
        height: 100%;
    }

    .content .body .body-content {
        display: flex;
        flex-direction: row;
        height: 100%;
    }

    .content .body.editing .body-content {
        height: 100%;
    }

    .content .body .body-content .items-list {
        flex-grow: 1;
        height: 100%;
        padding: 0px;
        padding-top: 2px;
        overflow: auto;
    }

    .content .body.editing .body-content .items-list, .content .body.single-entity .body-content .items-list {
        display: none;
    }

.items-list .task-wrapper {
    display: block;
    min-width: 600px;
    padding: 0.5rem;
    padding-left: 21px;
    padding-right: 21px;
}

.content .body .body-content .details-body {
    flex-grow: 1;
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    position: relative;
}

.content .body .refresh {
    position: absolute;
    right: 160px;
    top: 14px;
    font-size: 20px;
    /*  font-weight: bolder; */
    cursor: pointer;
}

.content .body .add-button {
    position: absolute;
    right: 10px;
    top: 10px;
}


.content .body .activity-section-header {
    color: #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
    margin-bottom: 10px;
    font-size: 18px;
}

.content .body .activity-task {
    display: flex;
    flex-direction: column;
    margin-bottom: 9px;
    line-height: 12px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    position: relative;
    border-right: 1px solid transparent;
}

    .content .body .activity-task .task-lower {
        flex-grow: 1;
        display: flex;
        flex-direction: row;
    }

    .content .body .activity-task .status-bar {
        display: inline-block;
        max-width: 15px;
        min-width: 15px;
        width: 15px;
        background-color: #98DAC9;
        text-align: center;
        border-radius: 0px 0px 0px 4px;
    }

    .content .body .activity-task .status-text {
        color: rgb(0, 138, 209);
        font-size: 11px;
        overflow-wrap: break-word;
        /* font-weight: bold; */
    }

    .content .body .activity-task.different-domain .status-bar {
        opacity: 0.65;
    }

    .content .body .activity-task .change-status-btn {
        padding: 0px;
        opacity: 0.738603;
        user-select: none;
        background-image: url("/css/images/icon-arrow-right-blue.svg");
        border-radius: 30px;
        filter: none;
        box-shadow: rgb(158 155 156) -3px 0px 2px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: inline-block;
        vertical-align: top;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        cursor: pointer;
        overflow: visible;
        width: 17px;
        height: 17px;
        cursor: pointer;
        margin-left: 5px;
        position: relative;
        top: 5px;
        margin-right: 10px;
    }

        .content .body .activity-task .change-status-btn .oi-timer {
            display: none;
        }

        .content .body .activity-task .change-status-btn.changing .oi-timer {
            display: block;
        }

    .content .body .activity-task .status-bar.locked {
        background-color: #FF8D8D;
    }

    .content .body .activity-task .content-part .task-description .item.available-status {
        position: relative;
        cursor: pointer;
    }

    .content .body .activity-task.not-seen {
        border-right: 2px solid #93C4E9;
        border-radius: 2px;
    }

        .content .body .activity-task.not-seen .task-description {
            border-radius: 0 !important;
        }

        .content .body .activity-task.not-seen .title-section {
            border-top-right-radius: 0 !important;
        }

        .content .body .activity-task.not-seen .content-part .title-section > span {
            font-family: "Outfit Medium";
        }

    .content .body .activity-task .content-part .task-description .item.available-status .menu {
        position: absolute;
        right: 0px;
        top: 35px;
        background: white;
        font-family: "Outfit";
        font-size: 13px;
        overflow-wrap: break-word;
        padding: 8px 10px;
        border-radius: 2px;
        border-style: solid;
        background-color: rgb(255, 255, 255);
        border-width: 0px;
        overflow: visible;
        border-color: rgb(128, 185, 199);
        z-index: 1;
        box-shadow: rgb(182 182 182) 1px 1px 2px;
        min-width: 150px;
    }

    .content .body .activity-task .content-part .task-description .item.available-status span.arrow-down {
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        background: url('/css/images/icon-arrow-down.svg') no-repeat;
        background-size: 16px;
    }

    .content .body .activity-task .status-bar .oi {
        color: white;
        vertical-align: middle;
        top: calc(50% - 9px);
        font-size: 11px;
    }

    .content .body .activity-task .content-part .title-section {
        padding: 2px;
        background-color: #F6F8FA;
        color: #495d70;
        font-size: 12px;
        font-family: "Outfit";
        position: relative;
        border-radius: 4px 4px 0px 0px;
        padding-right: 55px;
    }

.activity-task .content-part .title-section .icon-menu {
    position: absolute;
    right: 8px;
    top: 2px;
    display: none;
    width: 15px;
    height: 15px;
    background: url('/css/images/icon-menu-upd.svg') no-repeat;
    background-size: 15px;
    cursor: pointer;
    opacity: 0.4;
}

.activity-task:hover .content-part .title-section .icon-menu {
    display: block;
}

.activity-task .content-part .title-section .icon-menu:hover {
    opacity: 1;
}

.activity-task .content-part .title-section .task-menu, .task-header .task-menu {
    font-family: "Outfit";
    position: absolute;
    cursor: default;
    right: 0px;
    top: 25px;
    display: none;
    width: 150px;
    border-radius: 3px;
    border-style: solid;
    background-color: rgb(255, 255, 255);
    border-width: 0px;
    border-color: rgb(228, 228, 228);
    overflow: visible;
    z-index: 50;
    box-shadow: rgb(203 203 203) 1px 2px 4px;
    padding: 5px 0px 5px 11px;
}

    .activity-task .content-part .title-section .task-menu.active, .task-header .task-menu.active {
        display: block;
    }

    .activity-task .content-part .title-section .task-menu.larger, .task-header .task-menu.larger {
        width: 200px;
    }

.task-menu, .task-header .task-menu {
    right: 15px;
    line-height: 12px;
}

    .task-menu .block-button {
        border: 1px solid #E3ECF3;
        border-radius: 3px;
        padding: 6px;
        user-select: none;
        background-color: #F6F8FA;
        display: inline-block;
        font-size: 13px;
        text-align: center;
        color: rgb(0, 0, 0);
        cursor: pointer;
        width: 40px;
        height: 22px;
        background-repeat: no-repeat;
        background-size: 13px;
        background-position: center;
        margin-right: 2px;
    }

    .task-menu.dual .block-button {
        width: calc(50% - 7px);
    }

    .task-menu .block-button:hover {
        border: 1px solid transparent;
        background-color: #EDF8FF;
    }

    .task-menu .block-button:last-child {
        margin-right: 0px;
    }

    .task-menu .block-button.bookmark {
        background-image: url('images/icon-bookmark-item.svg');
    }

    .task-menu .block-button.dashboard {
        background-image: url('images/icon-dashboard-open.svg');
    }

    .task-menu .block-button.open-new {
        margin-right: 4px;
        background-image: url('images/icon-open-new-tab.svg');
    }

.details-body .task-menu .block-button.open-new {
    /*margin-right: 0px;*/
}

.task-menu .block-button.open-new-in-browser {
    background-image: url('images/icon-open-in-current.svg');
}

.task-menu .item {
    font-size: 12px;
    color: rgb(116, 116, 116);
    margin-bottom: 5px;
    padding: 2px 5px;
    line-height: 22px;
    border-radius: 4px;
    margin-left: -10px;
    width: calc(100% + 10px);
    padding-left: 10px;
}

    .task-menu .item:hover {
        background-color: #EDF8FF;
        cursor: pointer;
        border-radius: 3px;
    }

    .task-menu .item span.icon-copy {
        display: inline-block !important;
        width: 17px;
        height: 17px;
        background: url('/css/images/copy_n.svg') no-repeat;
        background-size: 17px;
        margin-right: 5px;
        position: relative;
        top: -2px;
        vertical-align: middle;
    }

    .task-menu .item span.icon-delete {
        display: inline-block !important;
        width: 17px;
        height: 17px;
        background: url('/css/images/trash.svg') no-repeat;
        background-size: 17px;
        margin-right: 5px;
        position: relative;
        top: -2px;
        vertical-align: middle;
    }

    .task-menu .item span.icon-additional-data, .dialog .icon-additional-data {
        display: inline-block !important;
        width: 17px;
        height: 17px;
        background: url('/css/images/key-skeleton-alt.svg') no-repeat;
        background-size: 17px;
        margin-right: 5px;
        position: relative;
        top: -2px;
        vertical-align: middle;
    }

.dialog .icon-additional-data {
    width: 12px;
    height: 12px;
    background-size: 12px;
    vertical-align: middle;
}

.content .body .activity-task .content-part .title-section .oi-timer {
    margin-left: 5px;
    font-size: 14px;
    top: -1px;
}

.content .body .activity-task:hover {
    background-color: #FCFCFC;
}

.content .body .activity-task.active {
    border-right: 1px solid rgb(255, 158, 22);
    border-radius: 0;
}

    .content .body .activity-task.active .content-part .title-section, .content .body .activity-task:hover .content-part .title-section {
        background-color: #EDF8FF;
        cursor: pointer;
    }

    .content .body .activity-task.active .content-part .task-description {
        border-bottom-right-radius: 0;
    }

    .content .body .activity-task.active .content-part .title-section {
        border-top-right-radius: 0;
    }

.content .body .activity-task .content-part .title-section.active {
    background-color: #88A8BD;
}

.content .body .activity-task .content-part .title-section img {
    height: 15px;
    display: inline-block;
    vertical-align: middle;
}

.content .body .activity-task .content-part .title-section span {
    vertical-align: middle;
    color: #2c2c2c;
}

.content .body .activity-task .content-part .task-description {
    padding: 5px;
    padding-top: 8px;
    padding-bottom: 6px;
    padding-left: 1rem;
    padding-right: 170px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 1;
    font-size: 12px;
    color: #2c2c2c;
    row-gap: 9px;
    border-bottom: 1px solid #EEF8FF;
    border-right: 1px solid #EEF8FF;
    border-radius: 0px 0px 4px 0px;
    max-width: 100%;
}

.content .body .activity-task.transition-locked .content-part .task-description {
    background-color: #FCFCFC;
}

.content .body .activity-task .content-part .task-description .right-actions {
    text-align: right;
    flex-grow: 1;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding-top: 8px;
    padding-right: 7px;
}

    .content .body .activity-task .content-part .task-description .right-actions:hover {
        background: #f6f8fa;
        border-radius: 4px;
    }

.content .body .activity-task .content-part .task-description .item .icon-change-status {
    display: block;
    width: 14px;
    height: 14px;
    background-size: 14px;
    background-image: url(/css/images/icon-arrow-down.svg);
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
    padding: 12px;
    background-position: center;
    border-radius: 30px;
    top: 3px;
    opacity: 0.5;
    right: -4px;
}

.content .body .activity-task .content-part .task-description .icon-change-status:hover, .content .body .activity-task .content-part .task-description .right-actions:hover .icon-change-status {
    opacity: 1;
}

.content .body .activity-task .content-part .task-description .icon-status-alert {
    display: block;
    width: 24px;
    height: 24px;
    background-size: 20px;
    opacity: 0.7;
    background-image: url(/css/images/loading-cube.gif);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    top: 3px;
    position: relative;
}

.content .body .activity-task .content-part .task-description .dialog-inline {
    width: 200px;
    right: 0px;
    position: absolute;
    left: unset;
    top: 30px;
    text-align: left;
    min-height: 0px;
}

.content .body .activity-task .content-part .task-description .item {
    display: inline-block;
    margin-right: 4rem;
    font-size: 12px;
    min-width: 100px;
    max-width: 100px;
    overflow: visible;
    text-wrap: nowrap;
}

.content .body .activity-task .content-part .task-description .sorba-dropdown-items .item {
    margin-right: 0;
    text-align: left;
    width: 100%;
    display: block;
    text-wrap: wrap;
}

.content .body .activity-task .content-part .task-description .sorba-dropdown-items {
    top: 36px;
}

.content .body .activity-task .content-part .task-description .item:first-line {
    margin-top: 0px;
}



.content .body .activity-task .content-part .task-description .item.status, .content .body .activity-task .content-part .task-description .item.lookup-trigger {
    min-width: 0;
}


.content .body .activity-task .content-part .task-description .item.status {
    cursor: pointer;
}

.content .body .activity-task .content-part .task-description .item.last {
    margin-right: 0px;
    width: auto;
    margin-left: 18px;
}

.content .body .activity-task .content-part .task-description .item.status {
    position: relative;
    padding: 2px 15px;
    padding-right: 0px;
    vertical-align: top;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    margin-right: -28px;
    min-height: 26px;
    width: auto;
    max-width: unset;
    top: -2px;
}

    .content .body .activity-task .content-part .task-description .item.status i {
        font-size: 11px;
        margin-right: 5px;
    }

.content .body .activity-task .content-part .task-description .item .item-description {
    font-size: 11px;
    margin-right: 2px;
    color: #495d70;
    margin-bottom: 1px;
}

.content .body .activity-task .content-part .task-description .item img {
    height: 11px;
    display: inline-block;
    vertical-align: middle;
}

.content .body .activity-task .content-part .task-description .item span {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    color: #2c2c2c;
    width: 155px;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-bottom: 1px;
}

.content .body .activity-task .content-part .task-description .item:first-child {
    max-width: 190px;
}

    .content .body .activity-task .content-part .task-description .item:first-child span {
        width: 230px;
        padding-bottom: 1px;
    }

.content .body .activity-task .content-part .task-description .item span.status-text {
    display: block;
    text-align: right;
    right: 0px;
    color: #008AD1;
    width: unset;
    max-width: 130px;
}

.content .body .activity-task .content-part .task-description .item.connection-info {
    width: unset;
    max-width: calc(100% - 230px);
    margin-right: 0;
}

    .content .body .activity-task .content-part .task-description .item.connection-info span {
        width: unset;
        max-width: 100%;
        padding-bottom: 1px;
    }

.content .menu {
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    display: inline-flex;
    flex-direction: column;
    position: relative;
    top: 1px;
}

    .content .menu .menu-item {
        font-size: 14px;
        border-bottom: 1px solid rgb(203, 203, 203);
        padding-bottom: 7px;
        margin-top: 5px;
        color: rgb(116, 116, 116);
        cursor: pointer;
    }

        .content .menu .menu-item:first-child {
            margin-top: 0px;
        }

        .content .menu .menu-item.red {
            background: #d00000;
        }

.content .body .info-message, .navigation .info-message, .dialog .info-message {
    background: #a4cae6;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 4px;
    color: white;
    font-size: 11px;
}

.content .details-body .menu .menu-item {
    font-size: 16px;
}

.content .body .info-message.error, .navigation .info-message.error, .dialog .info-message.error {
    background: #e6a4a4;
}

.content .details-body {
    display: none;
    background-color: rgb(252, 252, 252);
    border-radius: 3px;
    height: 100%;
    background: white;
    overflow: auto;
    min-width: 45%;
}

.content .body .body-content .details-body.visible {
    display: flex;
    min-width: 28rem;
    width: 28rem;
}

    .content .body .body-content .details-body.visible.w-66p {
        min-width: 66%;
    }

    .content .body .body-content .details-body.visible.w-33p {
        min-width: 33%;
    }

.content .body.editing-doc .body-content .details-body.visible {
    display: none;
}

.content .body.editing-doc .body-content .details-body.document {
    display: block;
    padding: 0;
}

.details-body.document .btn-general.action {
    margin-left: 10px;
}

.content.editing-document .body {
    display: none;
}

.content.editing-document .details-body {
    min-width: 40%;
}

    .content.editing-document .details-body.document {
        min-width: 60%;
        width: 60%;
    }

.content .action-menu {
    background: white;
    min-width: 185px;
    max-width: 185px;
    font-size: 11px;
    position: relative;
    border-left: 1px solid transparent;
    padding-top: 0.5rem;
}

    .content .action-menu:before {
        content: "";
        position: absolute;
        left: -1px;
        top: 0.5rem;
        height: calc(100% - 1rem);
        width: 1px;
        border-left: 1px solid #E3ECF3;
        z-index: 999;
    }

    .content .action-menu .split-handle, .navigation .split-handle, .details-body .split-handle {
        position: absolute;
        left: -1.5px;
        width: 3px;
        height: 100%;
        border-radius: 3px;
        top: 0px;
        cursor: ew-resize;
        user-select: none;
        z-index: 9999;
        padding: 2px 0px;
        padding-top: 6px;
        text-align: center;
    }

.details-body .split-handle {
    left: 0px;
}

.navigation .split-handle {
    left: unset;
    right: -1.5px;
    z-index: 999999999;
}

    .content .action-menu .split-handle .inner, .navigation .split-handle .inner, .details-body .split-handle .inner {
        display: none;
    }

    .content .action-menu .split-handle:hover, .navigation .split-handle:hover, .details-body .split-handle:hover {
        background: #93C4E9;
        transition: background-color 1200ms linear;
    }

        .content .action-menu .split-handle:hover .inner, .navigation .split-handle:hover .inner, .details-body .split-handle:hover .inner {
            border-left: 1px solid white;
            border-right: 1px solid white;
        }

.content .action-menu .load-more {
    width: 90%;
    z-index: 2;
    border-style: none;
    padding: 6px;
    border-width: 0px;
    user-select: none;
    background-color: rgb(246, 248, 250);
    border-radius: 3px;
    border-color: rgb(227, 236, 243);
    display: inline;
    overflow-wrap: break-word;
    font-family: Outfit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 12px;
    text-align: center;
    /* font-weight: 500;*/
    color: rgb(136, 168, 189);
    cursor: pointer;
    overflow: visible;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
}

    .content .action-menu .load-more:hover {
        cursor: pointer;
        background-color: #edf8ff;
    }

.content .action-menu .action-menu-content {
    height: calc(100% - 67px);
    overflow: auto;
    position: relative;
}

.content .action-menu .history-item {
    cursor: pointer;
    padding-bottom: 0px;
    position: relative;
    border-bottom: 0px solid #e6eff7;
}

    .content .action-menu .history-item:first-child {
        padding-top: 0.25rem;
    }

    .content .action-menu .history-item.draggable {
        cursor: default;
    }

    .content .action-menu .history-item:hover {
        background-color: #EDF8FF;
    }

        .content .action-menu .history-item:hover .icon-remove {
            background-image: url(/css/images/icon-x-hovered.svg);
            opacity: 0.7;
        }


        .content .action-menu .history-item:hover .step {
            background: white;
        }

    .content .action-menu .history-item .history-body {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 10px;
        /*background-color: rgb(235 246 253);*/
        border: 0;
        z-index: 1;
        line-height: 12px;
        border-bottom: 1px solid #E3ECF3;
        color: #495d70;
        cursor: pointer;
    }

        .content .action-menu .history-item .history-body.bookmarks {
            border-bottom: 0;
        }

        .content .action-menu .history-item .history-body .timing {
            font-size: 11px;
            text-align: left;
            margin-top: 0.5rem;
            margin-bottom: 0.25rem;
            color: #495d70;
        }

        .content .action-menu .history-item .history-body.bottom-border {
        }

    .content .action-menu .history-item .history-actions {
        display: flex;
        flex-direction: row;
        margin-top: 4px;
    }

    .content .action-menu .history-item .action-wrap {
        text-align: center;
        display: block;
        width: 100%;
        border-bottom: 1px solid #E3ECF3;
    }

        .content .action-menu .history-item .action-wrap:last-child {
            margin-right: 0px;
            cursor: move;
            height: 11px;
        }

.badge-active-menu .icon-clear, .dialog .icon-clear {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-image: url(/css/images/close_n.svg);
    position: absolute;
    right: 2.6rem;
    top: 0.25rem;
    cursor: pointer;
    opacity: 0.3;
}

.dialog .icon-clear {
    right: 16px;
    top: 15px;
    background-size: 18px;
}

    .badge-active-menu .icon-clear:hover, .dialog .icon-clear:hover {
        opacity: 0.55;
    }


.history-item .icon-remove, .notification .icon-remove, .central-content .badge-active-menu .icon-close,
.task-header .icon-close {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-size: 15px;
    background-repeat: no-repeat;
    background-image: url(/css/images/icon-x-hovered.svg);
    position: absolute;
    right: 6px;
    top: 0.25rem;
    cursor: pointer;
    opacity: 0.7;
}

.central-content .badge-active-menu .icon-close, .task-header .icon-close {
    opacity: 0.55;
    top: 9px;
    width: 20px;
    height: 20px;
    background-size: 20px;
    min-width: 20px;
    border: 0;
}

.task-header .icon-close {
    position: relative;
    right: unset;
    top: 0;
    background-size: 26px;
    background-position: center;
    margin-left: 5px;
    background-image: url(/css/images/close_n.svg);
}

.task-header .mid-buttons.single .icon-close {
    margin-right: 0px;
}

.central-content .badge-active-menu .icon-close:hover, .task-header .icon-close:hover {
    opacity: 1;
}

.task-header .icon-full-view {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url(/css/images/resize_big.svg);
    position: relative;
    cursor: pointer;
    opacity: 0.55;
    top: 2px;
    border: 0;
}

.task-header .icon-new-tab-standalone, .activity-task .icon-new-tab-standalone {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url('images/icon-open-new-tab.svg');
    position: relative;
    cursor: pointer;
    opacity: 0.55;
    top: 1px;
    left: 2px;
    border: 0;
}

.activity-task .icon-new-tab-standalone {
    display: none;
}

.activity-task:hover .icon-new-tab-standalone {
    display: inline-block;
}

.task-header .icon-new-tab-standalone {
    top: 2px;
}

.activity-task .icon-new-tab-standalone {
    position: absolute;
    right: 32px;
    left: unset;
    background-size: 14px;
    top: 2px;
    opacity: 0.4;
}

.task-header .icon-split-mode {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-image: url('images/icon-open-in-current.svg');
    position: relative;
    cursor: pointer;
    opacity: 0.55;
    top: 2px;
    border: 0;
}

    .task-header .icon-full-view:hover, .task-header .icon-split-mode:hover, .icon-new-tab-standalone:hover {
        opacity: 1;
    }

.notification .icon-remove {
    width: 20px;
    height: 20px;
    opacity: 1;
    background-size: 20px;
    background-image: url('/css/images/icon-x.svg');
}

    .content .action-menu .history-item:hover .icon-remove:hover, .notification .icon-remove:hover {
        background-image: url(/css/images/icon-x-hovered.svg);
        opacity: 1;
    }



.history-item .action-wrap .icon-drag {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-size: 11px;
    background-repeat: no-repeat;
    background-image: url('/css/images/icon-handle.svg');
}

.history-body .changed-fields {
    margin-top: 0.5rem;
    padding-left: 6px;
}

    .history-body .changed-fields .flex-line {
        margin-bottom: 0.5rem;
    }


.history-body .image-item img {
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 27px;
}

.history-body .date-info {
    font-size: 11px;
    color: #495d70;
    margin-top: 0.25rem;
}

.history-body .icons {
    text-align: center;
    max-width: 90px;
}

    .history-body .icons img {
        height: 12px;
        margin-right: 5px;
    }

.content .action-menu .history-item.stream .history-body {
    padding: 0.5rem;
}

.history-body .description {
    font-size: 10px;
    margin-top: 0.5rem;
}

    .history-body .description > span:first-child {
        font-size: 11px;
        color: #2c2c2c;
        margin-bottom: 0.5rem;
    }

.history-body .rtf-text {
    margin-top: 5px;
    padding-left: 6px;
    border-radius: 3px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.history-body .flex-line {
    word-break: break-all;
}

.history-body .changed-fields .flex-line {
    flex-direction: column;
}

    .history-body .changed-fields .flex-line > div:first-child {
        font-size: 11px;
    }

    .history-body .changed-fields .flex-line > div:last-child {
        font-size: 12px;
        margin-top: 1px;
        margin-left: 0;
    }

    .history-body .changed-fields .flex-line div:first-child {
    }

.history-body .flex-line div:last-child {
    margin-left: 3px;
}

.history-body .changed-fields .greyed {
    color: #999999;
}

.content .action-menu .oi-trash {
    cursor: pointer;
    font-size: 10px;
    line-height: 10px;
    position: relative;
    top: -1px;
    color: #9fb9cb;
}

.content .action-menu .history-item .module-name {
    color: #495d70;
    font-size: 12px;
    line-height: 10px;
    cursor: pointer;
}

.content .action-menu .history-item .text {
    margin-top: 10px;
    font-size: 14px;
}

.details-body.document .buttons-line {
    padding-left: 28px;
    padding-top: 5px;
    margin-bottom: 10px;
    margin-top: 5px;
}

.details-body.document {
    position: relative;
    padding: 20px;
    height: 100%;
    width: calc(100% - 40px);
}

.mentions-popup {
    display: none;
    position: absolute;
    top: 60px;
    left: 20px;
    width: 150px;
    padding: 15px 0px;
    -webkit-box-shadow: 0px 0px 9px 0px rgb(112 112 112);
    -moz-box-shadow: 0px 0px 9px 0px rgba(112,112,112,1);
    box-shadow: 0px 0px 9px 0px rgb(112 112 112);
    background-color: #1d89d2;
    color: white;
    border-radius: 10px;
    z-index: 99999;
}

    .mentions-popup p {
        padding: 10px;
        margin-bottom: 0px;
    }

    .mentions-popup.active {
        display: block;
    }

    .mentions-popup .mention-item {
        display: block;
        margin-bottom: 10px;
        padding: 0px 15px;
    }

        .mentions-popup .mention-item:hover {
            cursor: pointer;
            background: white;
            color: black;
        }


.details-body .dxbs-date-time-edit {
    width: 100%;
}

    .details-body .dxbs-date-time-edit input {
        border: 1px solid black;
        color: black;
        font-size: 16px;
    }

.details-body .task-header {
    cursor: pointer;
    position: relative;
    font-size: 11px;
    overflow-wrap: break-word;
    /* font-weight: normal;*/
    font-family: "Outfit";
    padding: 0px 5px;
    background-color: #f0f0f0;
    color: #4c85a7;
    line-height: 22px;
    width: 100%;
    border-style: solid none none solid;
    border-width: 1px 0px 0px 0px;
    background-color: rgb(255, 255, 255);
    border-radius: 0px;
    border-color: #E3ECF3;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
}

    .details-body .task-header:first-child {
        border-top: 0px;
    }

    .details-body .task-header.last {
        box-shadow: none;
    }

    .details-body .task-header:hover {
        background-color: #edf8ff;
    }

    .details-body .task-header.editing {
        background-color: #edf8ff;
    }

        .details-body .task-header.editing #summary-edit {
            max-width: 50%;
            text-wrap: nowrap;
            overflow: hidden;
            margin-left: 0;
            border-top-left-radius: 0;
            padding-left: 5px;
            border-bottom-left-radius: 0;
        }

    .details-body .task-header .summary-left-mask {
        display: none;
    }

    .details-body .task-header.editing .summary-left-mask {
        position: relative;
        left: 5px;
        top: 3px;
        height: 21px;
        background: white;
        display: inline-block;
        width: 20px;
        z-index: 9998;
        border-radius: 13px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .details-body .task-header:active {
        background-color: white;
    }

    .details-body .task-header .icon-edit {
        display: inline-block;
        width: 9px;
        height: 9px;
        background: url(/css/images/icon-edit-name.svg) no-repeat;
        background-size: 9px;
        cursor: pointer;
        position: relative;
        top: -1px;
        margin-left: -9px;
        opacity: 0.55;
        margin-top: 4px;
    }

    .details-body .task-header .icon-confirm-edit {
        display: none;
        width: 24px;
        height: 24px;
        background: url(/css/images/check_green.svg) no-repeat;
        background-size: 24px;
        background-position: center;
        cursor: pointer;
        position: relative;
        top: -5px;
        margin-left: 0.5rem;
        border-radius: 8px;
    }

    .details-body .task-header .icon-cancel-edit {
        display: none;
        width: 24px;
        height: 24px;
        background: url(/css/images/close_red.svg) no-repeat;
        background-position: center;
        background-size: 16px;
        cursor: pointer;
        position: relative;
        top: -5px;
        margin-left: 0.1rem;
        border-radius: 8px;
    }

        .details-body .task-header .icon-confirm-edit:hover, .details-body .task-header .icon-cancel-edit:hover {
            background-color: white;
        }

    .details-body .task-header.default-cursor {
        cursor: default;
    }

    .details-body .task-header .task-name {
        position: relative;
        font-size: 12px;
        padding: 0px 5px;
        border-radius: 15px;
        margin-top: 1px;
        margin-bottom: 1px;
    }



        .details-body .task-header .task-name.main {
            font-size: 16px;
            border: 1px solid rgba(0,0,0,0);
            height: 21px;
            padding: 0px 10px;
            padding-left: 18px;
            cursor: pointer;
            margin-top: 2px;
            line-height: 19px;
            margin-left: 5px;
            color: #008AD1;
        }

            .details-body .task-header .task-name.main.not-clickable {
                cursor: default;
            }

    .details-body .task-header:not(.default-cursor):hover .task-name.main:not(.not-clickable) {
        border: 1px solid #E3ECF3;
    }

    .details-body .task-header:not(.default-cursor) .task-name.main:not(.not-clickable):hover {
        background-color: white;
        border: 1px solid #E3ECF3;
    }

    .details-body .task-header:hover .icon-edit {
        display: none;
    }



.task-header .summary-edit {
    display: none;
    font-family: "Outfit";
    border-style: none none solid;
    border-width: 0px 0px 1px;
    overflow: visible;
    border-color: rgb(255, 158, 22) rgb(255, 158, 22) rgb(210, 225, 234);
    z-index: 1;
    border-radius: 2px 2px 0px 0px;
    font-size: 14px;
    color: rgb(109, 135, 151);
    padding: 2px;
    background-position: right center;
    background-size: 17px;
    background-color: rgb(246, 248, 250);
    outline: 0;
    height: 21px;
    min-width: 180px;
    background: white;
    border-radius: 13px;
    border-bottom: 0;
    top: 3px;
    position: relative;
    padding-left: 19px;
    padding-right: 9px;
    line-height: 17px;
    cursor: text;
}


.task-header.editing .summary-edit, .task-header.editing .icon-confirm-edit, .task-header.editing .icon-cancel-edit {
    display: inline-block;
}

.task-header .task-name {
    display: inline-block
}

.task-header.editing .task-name, .task-header.editing .icon-edit {
    display: none;
}

.details-body .task-header .icon-documents, .details-body .task-header .icon-comments, .details-body .task-header .icon-options,
.details-body .task-header .icon-activities {
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 15px;
    margin-right: 2px;
}

.details-body .task-header .icon-options {
    opacity: 0.55;
}

    .details-body .task-header .icon-options:hover {
        opacity: 1;
    }

.details-body .task-header .icon-documents {
    background-image: url('/css/images/file-download_nw.svg');
    position: relative;
    bottom: 1px;
}

.details-body .task-header .icon-comments {
    background-image: url('/css/images/comments-alt_nw.svg');
    position: relative;
    bottom: 1px;
}

.details-body .task-header .icon-activities {
    background-image: url('/css/images/heartbeat.svg');
    position: relative;
    bottom: 1px;
}

.details-body .task-header .icon-options {
    background-image: url('/css/images/three_dots.svg');
    position: absolute;
    right: 68px;
    top: 6px;
    cursor: pointer;
    width: 9px;
    height: 15px;
    background-size: 100%;
}

.details-body .task-header img {
    height: 12px;
    vertical-align: middle;
    display: inline-block;
    margin-top: 1px;
    margin-left: 3px;
    z-index: 9999;
    position: absolute;
    left: 9px;
    top: 6px;
}

    .details-body .task-header img.anon-mode {
        left: 6px;
        top: 2px;
        height: 19px;
    }

.details-body .task-header span {
    vertical-align: middle;
    display: inline-block;
}

.details-body .task-header .btn-general {
    position: absolute;
    right: 30px;
    top: 6.5px;
}

.btn-general:focus {
    outline: 0;
}

.details-body .task-header .btn-general span {
    height: auto;
    vertical-align: unset;
}

.details-body .details-buttons {
    flex-grow: 1;
    display: flex;
    text-align: right;
}

.details-body .detail-button, .dialog .btn-confirm, .buttons-line .btn-confirm, .general-buttons .btn-confirm {
    border: 0;
    border-top: 2px solid transparent;
    padding-top: 8px;
    padding-bottom: 0.5rem;
    height: auto;
    color: #2c2c2c;
    /* font-weight: normal; */
    background: white;
    font-size: 12px;
    flex-grow: 1;
    min-width: 50%;
    margin: 0;
    border-radius: 0;
}

.details-body .detail-button {
    font-size: 12px;
    padding-top: 9px;
    border-top: 1px solid #E3ECF3;
}

    .details-body .detail-button.has-change {
        border-top: 2px solid #FFC779;
    }

    .details-body .detail-button.greyed:hover {
        border-top: 2px solid #FF8D8D;
        padding-top: 8px;
    }

    .details-body .detail-button:hover {
        border-top: 2px solid #98DAC9;
        background: #EDF8FF;
        padding-top: 8px;
    }




.dialog .btn-confirm img, .buttons-line .btn-confirm img, .general-buttons .btn-confirm img {
    display: inline-block;
    margin-right: 5px;
    height: 16px;
}

    .dialog .btn-confirm img.deny, .buttons-line .btn-confirm img.deny, .general-buttons .btn-confirm img.deny {
        transform-origin: 50% 50%;
        transform: rotate(35deg) rotateY(0deg);
    }


.details-body .detail-button.disabled {
    background: #e6e6e6;
    color: rgb(121, 121, 121);
    padding: 6px;
}

    .details-body .detail-button.disabled:last-child {
        min-width: 30%;
        border-left: 0px;
    }


.details-body .fields {
    flex-grow: 1;
    max-width: 100%;
    padding: 28px;
    padding-top: 5px;
    position: relative;
    height: calc(100% - 20px);
}

    .details-body .fields.comments {
        height: calc(100% - 117px);
        box-sizing: border-box;
        padding-left: 9px;
        padding-right: 0px;
        padding-top: 0px;
        top: -4px;
    }

    .details-body .fields.documents {
        overflow: auto;
        padding-left: 30px;
    }

    .details-body .fields.comments .field {
        height: 100%;
    }

    .details-body .fields.comments hr {
        border-top: 1px solid #E3ECF3;
        height: 1px;
        margin-top: 8px;
    }

.details-body .task-split {
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px);
    overflow: auto;
    min-width: 350px;
}

    .details-body .task-split .split-row {
        display: flex;
        flex-direction: row;
        /* padding-left: 20px; */
        /*padding-right: 20px;*/
        padding-top: 4px;
    }

        .details-body .task-split .split-row:last-child {
            flex-grow: 1;
            padding-top: 0;
        }

        .details-body .task-split .split-row > .fields {
            flex-grow: 1;
            min-width: 50%;
        }

.details-body:not(.small-width) .task-split > .split-row:first-child > .fields:first-child {
    padding-right: 10px;
}

.details-body:not(.small-width) .task-split > .split-row:first-child > .fields:last-child {
    padding-left: 10px;
}

.details-body .fields.hidden, .details-body .task-split.hidden {
    display: none;
}

.details-body .fields.locked, .details-body .field.locked {
    color: #afafaf;
}


    .details-body .fields.locked .oi-cloud-upload, .details-body .fields.locked .oi-trash,
    .details-body .fields.locked #addComment .btn-general, .details-body .fields.locked #addComment .dxreRoot,
    .details-body .fields.locked .comment .oi-pencil {
        display: none !important;
    }

    .details-body .fields.locked #addComment .buttons-line {
        margin-top: 0px;
    }

.comment#addComment {
    margin-bottom: 0px;
}

    .comment#addComment .btn-general {
        margin-bottom: 10px;
    }

.details-body .fields.locked .field .input input, .details-body .fields.locked .field .input.status input,
.details-body .fields.locked .field .input textarea,
.details-body .fields.locked .field .sorba-dropdown-wrapper .sorba-dropdown,
.details-body .fields.locked .field .input > .description-wrapper,
.details-body .fields .field.locked .input input, .details-body .fields .field.locked .input.status input,
.details-body .fields .field.locked .input textarea,
.details-body .fields .field.locked .sorba-dropdown-wrapper .sorba-dropdown,
.details-body .fields .field.locked .input > .description-wrapper {
    border-color: #dbdbdb;
    background-image: none;
    border-bottom: 1px solid transparent;
}

.details-body .description-wrapper {
    border: 1px solid #efefef;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    min-height: 100px;
    background-image: none;
}

    .details-body .description-wrapper p {
        margin-top: 0;
        margin-bottom: 0;
    }

.details-body .fields .field .input > .icon {
    position: absolute;
    left: 0px;
    top: -3px;
    border-style: solid;
    background-color: rgb(246, 248, 250);
    border-width: 1px;
    border-color: rgb(210, 225, 234);
    overflow: visible;
    z-index: 4;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 6px;
    text-align: center;
}

.details-body .fields .field .icon img {
    vertical-align: top;
}

.details-body .fields .field .icon.profile {
    padding: 1px;
}

    .details-body .fields .field .icon.profile img {
        border-radius: 50%;
        display: block;
        width: 100%;
        height: 100%;
    }

.details-body .fields .field {
    display: block;
    margin-bottom: 12px;
}

    .details-body .fields .field.no-icon {
        display: block;
        margin-bottom: 12px;
    }

    .details-body .fields .field:first-child {
        margin-top: 0px;
    }

.dialog .fields .field {
    display: block;
    margin-block: 10px;
    display: flex;
    flex-direction: row;
}

.details-body .fields .field .label .oi-timer {
    margin-left: 5px;
    font-size: 14px;
    top: 0px;
    color: #b7b7b7;
}

.details-body .fields .field .label {
    font-family: 'Outfit';
    font-size: 11px;
    overflow-wrap: break-word;
    color: #495d70;
    width: 100%;
}

.dialog .fields .field .label {
    flex-grow: 1;
    font-size: 18px;
    position: relative;
    max-width: 40%;
    min-width: 40%
}

    .dialog .fields .field .label.sm-size {
        font-size: 13px;
    }


.details-body .fields .field .label .inline-icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    margin-left: 5px;
}

.details-body .fields .field .label .oi-loop-circular {
    cursor: pointer;
    padding: 5px;
}

    .details-body .fields .field .label .oi-loop-circular:hover {
        background: #F3F6FA;
    }

.details-body .fields .field .label .inline-icon.description {
    background-image: url('/css/images/icon-edit.svg');
}

.details-body .fields .field .label .icon {
    position: absolute;
    right: 10px;
}

    .details-body .fields .field .label .icon img {
        height: 18px;
    }

.details-body .fields .field .input {
    position: relative;
    top: 4px;
}

.dialog .fields .field .input {
    flex-grow: 1;
    min-width: 30%;
    max-width: 30%;
    display: flex;
}

.details-body .fields .field .input.larger {
}

.dialog .fields .field .input.larger {
    min-width: 60%;
    max-width: 60%;
}

.details-body .fields .field .input.fullw, .details-body .fields .field .label.fullw, .dialog .fields .field .input.fullw, .dialog .fields .field .label.fullw {
    min-width: 100%;
    max-width: 100%;
}

.details-body .fields .field .input textarea {
    width: 100%;
    min-height: 150px;
    font-size: 14px;
}

.details-body .fields .field .input.lookup-trigger input {
    cursor: pointer;
}

    .details-body .fields .field .input.lookup-trigger input.search {
        cursor: text;
    }

        .details-body .fields .field .input.lookup-trigger input.search:focus {
            outline: 0;
        }

.details-body .fields .field .input > input, .details-body .fields .field .input .dxbs-editor-input-container > input,
.details-body .fields .field .input > textarea, .details-body .fields .field .input > .description-wrapper, .time-pickers input {
    width: calc(100% - 7px);
    margin-left: 7px;
    font-family: "Outfit";
    border-style: none none solid;
    border-width: 0px 0px 1px;
    overflow: visible;
    border-color: rgb(255, 158, 22) rgb(255, 158, 22) rgb(210, 225, 234);
    z-index: 1;
    border-radius: 2px 2px 0px 0px;
    font-size: 12px;
    color: #2c2c2c;
    padding: 2px;
    padding-left: 28px;
    background: url(/css/images/icon-arrow-down.svg) no-repeat;
    background-position: calc(100% - 4px) center;
    background-size: 17px;
    background-color: #F6F8FA;
    outline: 0;
}

.time-pickers input {
    padding-left: 5px;
    max-width: 85px;
    margin-left: 0;
    position: relative;
    background: none;
}

.time-pickers .date-field {
    position: relative;
    width: 90px;
}

    .time-pickers .date-field::before {
        position: absolute;
        content: ' ';
        display: block;
        width: 12px;
        height: 12px;
        right: 8px;
        top: 5px;
        opacity: 0.7;
        background-image: url(/css/images/calendar-alt.svg);
        background-repeat: no-repeat;
    }

.time-pickers span {
    margin-left: 2px;
    margin-right: 2px;
}

.time-pickers .flex-line {
    max-width: 200px;
    float: right;
}

.details-body .fields .field .input > textarea {
    width: 100%;
}

.details-body .fields:not(.locked) .field:not(.locked) .input > input:hover, .details-body .fields:not(.locked) .field:not(.locked) .input .dxbs-editor-input-container > input:hover,
.details-body .fields:not(.locked) .field:not(.locked) .input > textarea:hover, .details-body .fields:not(.locked) .field:not(.locked) .input > .description-wrapper:hover {
    background-color: #EDF8FF;
}

.details-body .fields:not(.locked) .field:not(.locked) .input > input:active, .details-body .fields:not(.locked) .field:not(.locked) .input .dxbs-editor-input-container > input:active,
.details-body .fields:not(.locked) .field:not(.locked) .input > textarea:active, .details-body .fields:not(.locked) .field:not(.locked) .input > .description-wrapper:active {
    background-color: #F6F8FA;
}

.details-body .fields .field .input > .description-wrapper {
    color: unset;
    cursor: pointer;
    font-size: 11pt;
}

.details-body .fields .field .input.no-dropdown > input {
    background-image: none;
}

.details-body .fields .field .input.status > input {
    background-image: url('/css/images/icon-status-change.svg');
    background-size: 14px;
    background-position: 98.3%;
}

.details-body .fields .field .input > .description-wrapper {
    background-image: none;
}

.details-body .fields .field .input textarea, .details-body .fields .field .input .description-wrapper {
    padding-left: 6px;
    background-image: none;
    margin-left: 0px;
}

    .details-body .fields .field .input textarea, .details-body .fields .field .input .description-wrapper img {
        max-width: 100% !important;
    }

.details-body .fields .field.no-icon .input > input, .details-body .fields .field.no-icon .input .dxbs-editor-input-container > input {
    padding-left: 6px;
    width: 100%;
    margin-left: 0px;
}

.details-body .fields .field .input.inactive input {
}

.details-body .fields .field .input.status .inline-block {
    width: 100%;
    border-style: none none solid none;
    border-color: #6489a5;
    border-bottom-width: 0.5px;
    font-family: "Outfit";
    font-size: 14px;
}

.details-body .fields .field .input.status .status-badge {
    color: #495d70;
    border-style: solid;
    padding: 1px 5px;
    border-width: 1px;
    border-radius: 28px;
    border-color: rgb(164, 202, 230);
    overflow-wrap: break-word;
    display: inline;
    font-family: "Outfit";
    font-size: 10px;
    text-align: center;
    color: rgb(109, 109, 109);
    cursor: pointer;
}

.details-body .fields .field .input.status .arrow-left {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url('/css/images/icon-arrow-left.svg') no-repeat;
    background-size: 16px;
}

.details-body .fields .field .input.status .arrow-right, .badge-active-menu .arrow-right, .history-item .history-body .arrow-right {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url('/css/images/icon-arrow-right.svg') no-repeat;
    background-size: 16px;
}

.badge-active-menu .arrow-right {
    width: 10px;
    background-position: center;
    margin-left: 4px;
    margin-right: 4px;
}

.badge-active-menu .icon-bookmark {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: url('/css/images/bookmark_upd.svg') no-repeat;
    background-size: 14px;
    position: relative;
    top: -1px;
    left: 3px;
}

.badge-active-menu .active .icon-bookmark {
    background-image: url('/css/images/bookmark_upd.svg');
}

.badge-active-menu .icon-bookmark.filled {
    background: url('/css/images/icon-bookmark-fill.svg') no-repeat;
}



.info-message.error .oi {
    background: #d00000;
    display: inline-block;
    padding: 4px;
    border-radius: 30px;
    width: 20px;
    text-align: center;
    height: 20px;
    vertical-align: top;
    font-size: 80%;
    position: relative;
    top: 3px;
    margin-right: 5px;
    cursor: pointer;
}

.dialog-backdrop {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.4);
}

.dialog-inline {
    display: none;
    position: absolute;
    z-index: 99999;
    left: 0px;
    top: 25px;
    width: 100%;
    min-width: 200px;
}

    .dialog-inline .scrollable-area {
        overflow: auto;
        max-height: 220px;
        margin-right: -0.75rem;
    }

    .dialog-backdrop.visible, .dialog-inline.visible {
        display: block;
    }

.dialog, .notification {
    display: block;
    width: 410px;
    border-style: solid;
    border-width: 0px;
    opacity: 1;
    background-color: rgb(244, 248, 250);
    border-radius: 3px;
    box-shadow: rgb(185 185 185) 0px 8px 8px;
    border-color: rgb(156, 193, 221);
    padding: 15px;
    position: absolute;
    left: calc(50% - 190px);
    top: calc(40% - 200px);
}

.notification {
    padding: 0;
    background-color: white;
    text-align: center;
}

    .notification .notification-body {
        font-size: 12px;
        color: #495d70;
        text-align: left;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
        padding-right: 40px;
        padding-left: 40px;
        display: inline-block;
    }

.dialog-inline .dialog, .dialog-backdrop .dialog {
    border-style: solid;
    border-width: 0px;
    opacity: 1;
    background-color: white;
    border-radius: 2px;
    box-shadow: rgb(202, 202, 202) 0px 3px 4px;
    border-color: rgb(156, 193, 221);
    padding: 0.75rem;
    border-top: 1px solid rgb(210, 225, 234);
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

.dialog-backdrop .dialog {
    opacity: 1;
    border-radius: 3px;
    border-style: solid;
    background-color: rgb(252, 252, 252);
    border-width: 0px;
    overflow: visible;
    border: 0;
    z-index: 1;
    box-shadow: 0px 1px 4px #D5D5D5;
    font-size: 14px;
    padding: 0;
}

    .dialog-backdrop .dialog.wider {
        width: 600px;
        left: calc(50% - 300px);
        background: white;
        border-radius: 6px;
    }

    .dialog-backdrop .dialog .icon-close {
        position: absolute;
        right: 10px;
        top: 10px;
        display: inline-block;
        width: 15px;
        height: 15px;
        background-size: 15px;
        background-repeat: no-repeat;
        background-image: url(/css/images/icon-close-confirmation.svg);
        cursor: pointer;
        opacity: 0.65;
    }

        .dialog-backdrop .dialog .icon-close:hover {
            opacity: 1;
        }

    .dialog-backdrop .dialog .dialog-body {
        text-align: center;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .dialog-backdrop .dialog .dialog-body, .dialog-backdrop .dialog .dialog-title {
        font-size: 12px;
        color: #495d70;
    }

.dialog-inline .dialog {
    width: 100%;
    left: 0px;
    top: -3px;
}

.dialog .dialog-title {
    font-size: 11px;
    /* font-weight: bold;*/
    margin-bottom: 10px;
}

.dialog .buttons, .notification .buttons {
    margin-top: 0px;
    display: flex;
}

    .dialog .buttons .btn-confirm, .notification .buttons .btn-confirm {
        border: 0;
        border-top: 1px solid #E3ECF3;
        padding-top: 8px;
        padding-bottom: 0.5rem;
        height: auto;
        color: #495d70;
        /* font-weight: normal;*/
        min-width: 50%;
    }

    .dialog .buttons.three-options .btn-confirm {
        min-width: 33%;
    }

    .dialog .buttons .btn-confirm:not(.disabled):hover, .notification .buttons .btn-confirm:not(.disabled):hover {
        padding-top: 7px;
        border-top: 2px solid #FF8D8D;
        background: #EDF8FF;
    }

    .dialog .buttons .btn-confirm:not(.disabled):active, .notification .buttons .btn-confirm:not(.disabled):active {
        padding-top: 7px;
        border-top: 2px solid #E3ECF3;
        background: white;
    }

    .dialog .buttons .btn-confirm.yes:not(.disabled):hover, .notification .buttons .btn-confirm.yes:not(.disabled):hover {
        padding-top: 7px;
        border-top: 2px solid #98DAC9;
    }

    .dialog .buttons .btn-confirm.yes:not(.disabled):active, .notification .buttons .btn-confirm.yes:not(.disabled):active {
        padding-top: 7px;
        border-top: 2px solid #E3ECF3;
    }

.buttons .btn-confirm.fullw {
    width: 100%;
}

.buttons .btn-confirm:focus {
    outline: 0;
}

.dialog .dialog-body {
    font-size: 11px;
}

.dialog-body .confirm-description {
    text-align: left;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 20px;
}

.radio-line > * {
    vertical-align: middle;
    margin-bottom: 0;
}

.radio-line label {
    position: relative;
}


.radio-line .icon-paragraph {
    position: absolute;
    left: calc(100% + 5px);
    top: 0px;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/css/images/icon-paragraph.png');
    background-size: 16px;
}

.btn-confirm.disabled {
    opacity: 0.5;
    cursor: default;
}

.radio-line.important {
    color: #ff4845;
}
.radio-line .sorba-radio {
    margin-right: 5px;
}

.radio-line {
    position: relative;
    margin-bottom: 15px;
    text-align: left;
    padding-left: 80px;
}

.dialog .dialog-body .search-placeholder {
    position: absolute;
    top: 17px;
    left: 38px;
    color: #88A8BD;
    pointer-events: none;
}

.dialog .table-wrapper {
}

.dialog .dialog-body.outlined-error {
    border-radius: 15px;
    padding: 15px;
    background: #e6a4a4;
    word-break: break-word;
    max-height: 300px;
    overflow: auto;
}


.dialog .lookup .icon {
    position: relative;
}

.dialog .search {
    border-style: solid;
    border-width: 1px;
    user-select: none;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    border-color: #e3ecf3;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 27px;
    display: block;
    background-image: url('/css/images/search_new.svg');
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 5px center;
    font-family: 'Outfit';
    font-size: 11px;
    padding-left: 24px;
    margin-bottom: 12px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
}

    .dialog .search:focus {
        outline: 0;
    }

.dialog .lookup td, .dialog .lookup th {
    font-family: "Outfit";
    font-size: 11px;
    color: #2c2c2c;
}

.dialog .lookup th {
    color: #495d70;
    font-family: "Outfit";
}

.dialog .lookup > tr:nth-child(even) {
    background: #f6f8fa;
}

.dialog .lookup td:first-child, .dialog .lookup th:first-child {
    width: 110px;
    word-break: break-all;
    border-right: 1px solid #e3ecf3d1;
    padding-left: 10px;
}

.dialog .lookup td:last-child, .dialog .lookup th:last-child {
    padding-left: 15px;
    padding-right: 10px;
}

.dialog .lookup.icon-table .icon img {
    height: 20px;
}

.dialog .lookup.icon-table td:first-child, .dialog .lookup.icon-table th:first-child {
    width: 60px;
}

.dialog .lookup.users td:first-child, .dialog .lookup.users th:first-child {
    width: 50px
}

    .dialog .lookup.users td:first-child img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }

.dialog .lookup.users th {
    padding-bottom: 5px;
}

.dialog .lookup th:last-child {
    position: relative;
}

.dialog .lookup {
    width: 100%;
    margin-right: 0px;
    margin-left: 0px;
}

    .dialog .lookup tr {
        cursor: pointer;
    }

        .dialog .lookup tr td, .dialog .lookup tr th {
            padding: 2px 5px;
            word-break: break-all;
        }

        .dialog .lookup tr:nth-child(odd) {
            background-color: #ffffff;
        }

        .dialog .lookup tr.priority-lookup {
            background-color: #f1f4f7;
        }

            .dialog .lookup tr.priority-lookup:nth-child(odd) {
                background-color: #d0d8e7;
            }

            .dialog .lookup tr:hover, .dialog .lookup tr.priority-lookup:hover {
                background-color: #edf8ff;
                color: black;
            }


            .dialog .lookup tr.active, .dialog .lookup tr.priority-lookup.active {
                background-color: #edf8ff;
                border: 1px solid #e3ecf3;
                border-left: 1px solid #ff9e16;
            }

        .dialog .lookup tr.row-sep {
            border-top: 1px solid #bdbdbd;
        }


.header-table tr {
    background: none;
    background-color: transparent !important;
    color: black;
    cursor: default !important;
}

    .header-table tr:hover {
        background: none;
        background-color: transparent !important;
        color: black;
    }

.notification ul {
    text-align: left;
    padding-left: 16px;
}

.notification.visible {
    display: block;
    animation: fadeInAnimation ease 0.5s;
    animation-fill-mode: forwards;
    z-index: 999999;
}

.notification {
    border-top: 2px solid #98DAC9;
}

    .notification.bad {
        border-top: 2px solid #FF8D8D;
    }

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes sizeUpAnimation {
    0% {
        font-size: 32px;
        transform: rotate(0);
    }

    50% {
        font-size: 42px;
    }

    100% {
        font-size: 32px;
        transform: rotate(360deg);
    }
}

.mobile-only {
    display: none;
}

.dxreRoot {
    width: calc(100% - 40px);
    max-width: 100%;
}

.details-body .fields .field .dxreRoot {
    height: auto !important;
    max-height: 200px !important;
    min-height: 50px !important;
}

.details-body.document .dxreRoot {
    height: calc(100% - 85px);
    width: 100%;
    position: relative !important;
}

    .details-body.document .dxreRoot .dx-r-toolbar.dxbs-toolbar > .btn-toolbar, .comment .dxreRoot .dx-r-toolbar.dxbs-toolbar > .btn-toolbar {
        width: 50px;
    }

    .details-body.document .dxreRoot .dx-office-ribbon .dx-r-toolbar, .comment .dxreRoot .dx-office-ribbon .dx-r-toolbar {
        overflow: auto;
    }

.dxreRoot nav {
    display: none !important;
}

.btn-general {
    border: 0;
    border-top: 2px solid transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    height: auto;
    color: #495d70;
    /* font-weight: normal; */
    background: white;
    font-size: 12px;
    flex-grow: 1;
    min-width: 50%;
    margin: 0;
    border-radius: 0;
}

    .btn-general.alt:hover, .comment .buttons-line .btn-general.alt:hover {
        border-top: 2px solid #FF8D8D;
        padding-top: 0.5rem;
    }

    .btn-general.alt:active, .comment .buttons-line .btn-general.alt:active {
        border-top: 2px solid #E3ECF3;
        background: white;
        padding-top: 0.5rem;
    }

    .comment .buttons-line .btn-general:hover, .btn-general:hover {
        border-top: 2px solid #98DAC9;
        background: #EDF8FF;
        padding-top: 0.5rem;
    }

    .comment .buttons-line .btn-general:active, .btn-general:active {
        border-top: 2px solid #E3ECF3;
        background: white;
        padding-top: 0.5rem;
    }

.buttons .btn-confirm:focus {
    outline: 0;
}

.btn-general.action {
    /*font-size: 16px;
        padding: 2px 10px;*/
}

    .btn-general.action.load-more {
        padding: 6px;
        border-width: 2px;
        user-select: none;
        border-radius: 4px;
        border-color: rgb(128, 185, 199);
        color: rgb(128, 185, 199);
        width: 30%;
        font-size: 11px;
        text-align: center;
        /* font-weight: bold; */
        border-style: solid;
        background: white;
        margin-right: 0;
        margin-left: 35%;
    }

        .btn-general.action.load-more:hover {
            border-color: rgb(255, 158, 22);
            color: rgb(255, 158, 22);
        }

.general-buttons {
}

.document .general-buttons {
    position: relative;
}

.details-body .files-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    row-gap: 2px;
}

.field.files-links, .field.files-docs {
    padding-top: 64px;
}

    .field.files-links .label, .field.files-docs .label {
        margin-bottom: 5px;
    }

.details-body .field.no-add {
    padding-top: 12px;
}

.details-body .fieldfiles-docs.no-add {
    padding-top: 1.5rem;
}

.details-body .comments-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow: auto;
    height: calc(100% - 45px);
    padding-left: 20px;
    padding-right: 26px;
}

    .details-body .comments-wrapper.adding-comment {
        height: calc(100% - 205px);
    }

.details-body .file-link, .history-body .file-link {
    border-style: none;
    border-radius: 6px;
    background-color: #F6F8FA;
    border-width: 0px;
    overflow: visible;
    z-index: 1;
    border-radius: 3px;
    width: 204px;
    height: 204px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
}

    .details-body .file-link:hover, .history-body .file-link:hover {
        cursor: pointer;
        background-color: #EDF8FF;
    }

.history-body .file-link {
    padding: 5px;
    margin-right: 0px;
    width: 100%;
    height: 100%;
}

    .details-body .file-link .type-icon, .details-body .file-link div.type-image, .history-body .file-link img.type-image, .history-body .file-link .type-icon {
        position: relative;
        right: unset;
        top: unset;
        display: inline-block;
        width: 72px;
        height: 72px;
        background-size: 72px;
        background-position: center;
        background-repeat: no-repeat;
        margin-top: 45px;
        opacity: 0.6;
    }

.details-body .file-link div.type-image {
    margin-top: 0px;
    width: 100%;
    height: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.history-body .file-link img.type-image {
    width: 100%;
    height: 100%;
    background-size: 72px;
    margin-top: 0px;
    opacity: 1;
}

.history-body .file-link .type-icon {
    width: 72px;
    height: 72px;
    background-size: 72px;
    margin-top: 0px;
    opacity: 1;
}

    .details-body .file-link .type-icon.doc, .history-body .file-link .type-icon.doc,
    .details-body .file-link .type-icon.rtf, .history-body .file-link .type-icon.rtf {
        background-image: url('/css/images/icon-word.svg');
    }

    .details-body .file-link .type-icon.xls, .history-body .file-link .type-icon.xls {
        background-image: url('/css/images/icon-excel.svg');
    }

    .details-body .file-link .type-icon.pdf, .history-body .file-link .type-icon.pdf {
        background-image: url('/css/images/icon-pdf.png');
    }

    .details-body .file-link .type-icon.txt, .history-body .file-link .type-icon.txt {
        background-image: url('/css/images/icon-txt.png');
    }

    .details-body .file-link .type-icon.image, .history-body .file-link .type-icon.image {
        background-image: url('/css/images/icon-picture.svg');
    }

    .details-body .file-link .type-icon.file, .history-body .file-link .type-icon.file {
        background-image: url('/css/images/icon-file.png');
    }

.details-body .file-link .file-name {
    font-size: 12px;
    margin-left: 10px;
    margin-right: 15px;
    margin-top: 15px;
    position: relative;
    color: rgb(133, 133, 133);
    word-break: break-all;
}

    .details-body .file-link .file-name > div {
        word-break: break-all;
    }

.details-body .file-link .file-info {
    font-size: 11px;
    color: #495d70;
}


.details-body .file-link .actions {
    position: absolute;
    right: 0;
    bottom: 0px;
    font-size: 14px;
    width: 100%;
    text-align: right;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
}

    .details-body .file-link .actions .oi {
        position: relative;
        top: unset;
        right: unset;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: #83a3ba;
    }

    .details-body .file-link .actions .icon-download, .details-body .file-link .actions .icon-trash, .details-body .file-link .icon-open-in-tab {
        display: inline-block;
        vertical-align: top;
        width: 19px;
        height: 19px;
        background-size: 19px;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    .details-body .file-link .actions .icon-download, .icon-download {
        background-image: url('/css/images/icon-download.svg');
        width: 19px;
        height: 19px;
        background-position: center;
        background-size: 19px;
        opacity: 0.55;
    }

        .details-body .file-link .actions .icon-download:hover {
            opacity: 1;
        }

    .details-body .file-link .actions .icon-trash {
        background-image: url('/css/images/icon-trash.svg');
        margin-left: 5px;
        width: 19px;
        height: 19px;
        background-position: center;
        background-size: 19px;
        opacity: 0.55;
    }

        .details-body .file-link .actions .icon-trash:hover {
            opacity: 1;
        }

.details-body .file-link .icon-open-in-tab {
    background-image: url('/css/images/icon-open-new-image.svg');
    position: absolute;
    right: 7px;
    top: 7px;
    cursor: pointer;
    background-color: #ffffffab;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-position: center;
    opacity: 0.7;
}

    .details-body .file-link .icon-open-in-tab:hover {
        opacity: 1;
    }

.details-body .file-link .actions .oi {
    margin-left: 10px;
}

    .details-body .file-link .actions .oi.inactive {
        opacity: 0.5;
    }

.details-body .drop-zone {
    border-style: dashed;
    background-color: #F6F8FA;
    border-width: 1px;
    border-color: rgb(206, 219, 228);
    overflow: visible;
    z-index: 1;
    border-radius: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    position: absolute;
    left: 29px;
    width: calc(100% - 56px);
    top: 10px;
}

    .details-body .drop-zone:hover {
        background-color: #EDF8FF;
        cursor: pointer;
    }

    .details-body .drop-zone:active {
        background-color: #F6F8FA;
        cursor: pointer;
    }

    .details-body .drop-zone .icon-plus {
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url('/css/images/icon-plus.svg') no-repeat;
        background-size: 24px;
        opacity: 0.1;
        position: absolute;
        right: 30px;
        top: 10px;
    }


    .details-body .drop-zone .icon-drop {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: url('/css/images/icon-drop-upload.svg') no-repeat;
        background-size: 40px;
        margin-bottom: 0px;
        vertical-align: middle;
        opacity: 0.399173;
    }

    .details-body .drop-zone .text {
        font-size: 16px;
        /* font-weight: bold; */
        display: inline-block;
        vertical-align: middle;
        color: rgb(199, 214, 226);
    }

.hidden {
    display: none;
}

.details-body .task-header .appendix {
    display: none;
}

#components-reconnect-modal {
    display: none;
    position: absolute;
    top: 100px;
    z-index: 99999;
    background: white;
    border-radius: 30px;
    -webkit-box-shadow: 0px 0px 9px 0px rgb(112 112 112);
    -moz-box-shadow: 0px 0px 9px 0px rgba(112,112,112,1);
    box-shadow: 0px 0px 9px 0px rgb(112 112 112);
    padding: 20px;
    width: 500px;
    left: calc(50% - 250px);
    text-align: center;
}

    #components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected {
        display: block;
    }

.comment#addComment {
    margin-top: 0px;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    margin-bottom: 10px;
}

    .comment#addComment .text .dxreRoot {
        min-height: 100% !important;
        max-height: 100% !important;
    }

    .comment#addComment.editing {
        height: 200px;
        bottom: 1rem;
        z-index: 9999999;
    }

        .comment#addComment.editing .text {
        }

.comment {
    margin-top: 7px;
}

    .comment:first-of-type {
        margin-top: 1rem;
    }

    .comment .info-line {
        position: relative;
        font-size: 11px;
        border-style: solid;
        background-color: #f6f8fa;
        border-width: 0px;
        border-color: rgb(210, 225, 234);
        overflow: visible;
        z-index: 3;
        border-radius: 3px 3px 0px 0px;
        display: flex;
        flex-direction: row;
        padding-left: 38px;
        /*  font-weight: 500; */
    }

    .comment.external .info-line {
        background-color: #edf8ff;
    }

    .comment:hover .info-line {
    }

    .comment .info-line .avatar {
        width: 28px;
        height: 28px;
        border-radius: 100px;
        position: absolute;
        left: 0px;
        top: -2px;
    }

    .comment .buttons-line, .comment .buttons-line .buttons {
        display: flex;
        width: 100%;
        position: relative;
        top: -1px;
        background: white;
    }

        .comment .buttons-line .btn-general {
            border-top: 1px solid #E3ECF3;
            padding-top: calc(0.5rem + 1px);
        }

    .comment .info-line .names {
        flex-grow: 1;
        padding-top: 4px;
        color: rgb(116, 116, 116);
        color: #495d70;
        font-size: 12px;
    }

    .comment .info-line .actions {
        flex-grow: 1;
        text-align: right;
        padding-top: 3px;
        padding-right: 10px;
    }

        .comment .info-line .actions .icon-edit {
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url('/css/images/icon-item-edit-a.svg') no-repeat;
            background-size: 16px;
            background-position: center;
            cursor: pointer;
            position: absolute;
            top: 38px;
        }

        .comment .info-line .actions .icon-remove {
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url('/css/images/icon-x.svg') no-repeat;
            background-size: 16px;
            background-position: center;
            margin-left: 0px;
            cursor: pointer;
        }

            .comment .info-line .actions .icon-remove:hover {
                background-image: url('/css/images/icon-x-hovered.svg');
            }

        .comment .info-line .actions .icon-edit:hover {
            background-image: url('/css/images/icon-item-edit-a-hovered.svg');
        }

    .comment .info-line .timing {
        font-size: 12px;
        flex-grow: 1;
        text-align: left;
        color: #495d70cc;
        margin-left: 1rem;
    }

    .comment .info-line .ext-info {
        font-size: 12px;
        flex-grow: 1;
        text-align: left;
        color: #495d70cc;
        margin-left: 1rem;
    }

    .comment .text {
        position: relative;
    }

        .comment .text .dxreRoot {
            height: auto !important;
            min-height: 50px !important;
            width: 100%;
            max-width: 100%;
        }

    .comment .comment-text-wrapper {
        border-style: solid;
        background-color: white;
        border: 1px solid #EEF8FF;
        border-top: 0;
        overflow: visible;
        z-index: 1;
        border-radius: 3px;
        padding: 10px;
        padding-left: 38px;
        padding-right: 3rem;
        font-size: 12pt;
    }

#addComment .comment-text-wrapper {
    height: 33px;
    background-color: #f6f8fa;
    border: 0;
    border-bottom: 1px solid #d2e1ea;
    background-image: url('/css/images/icon-text-input-a.svg');
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: 98% center;
    width: calc(100% - 4.5rem);
    margin-left: 2.5rem;
}

.comment .comment-text-wrapper p {
    margin-top: 0;
    margin-bottom: 0;
}

.comment .comment-text-wrapper img {
    max-width: 100% !important;
}

.comment#addComment .comment-text-wrapper {
    min-height: 33px;
    padding: 3px 10px;
    /* font-weight: 500; */
}

.header-area .module-header .refresh {
    position: relative;
    top: 2px;
    font-size: 16px;
    color: #e5f4ff;
    cursor: pointer;
}

.login, .landing {
    background: url(/css/images/login_background_setup.gif);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    width: 75%;
    height: 75%;
    padding-top: 10%;
    position: absolute;
    right: 0px;
    bottom: 0;
}

    .landing.logged-in {
        background-image: url(/css/images/login_background_regular.gif);
    }

    .login .box {
        display: block;
        width: 500px;
        margin: 0 auto;
        margin-top: 30px;
        background: white;
        border-radius: 20px;
        -webkit-box-shadow: 0px 0px 9px 0px rgb(112 112 112);
        -moz-box-shadow: 0px 0px 9px 0px rgba(112,112,112,1);
        box-shadow: 0px 0px 9px 0px rgb(112 112 112);
        padding: 15px;
        text-align: center;
        font-size: 14px;
        color: #525252;
    }

        .login .box .btn-general {
            background: white;
            border: 1px solid #c2d3dc;
            color: #6e6e6e;
            border-radius: 5px;
            width: 100%;
            position: relative;
            font-size: 14px;
        }

            .login .box .btn-general:hover {
                background: rgb(249, 204, 105);
            }

            .login .box .btn-general:focus, .login .box .btn-general:active, .login .box .btn-general:visited {
                outline: 0;
            }

            .login .box .btn-general .oi.microsoft {
                width: 20px;
                height: 20px;
                display: inline-block;
                background-image: url(/css/images/microsoft.png);
                background-repeat: no-repeat;
                background-size: 20px;
                position: absolute;
                left: 10px;
                top: calc(50% - 9px);
            }

/* buttons */
.content .action-buttons {
    display: flex;
}

.content .main-history .action-buttons {
    padding: 0px;
}

.action-menu .action-buttons {
    flex-direction: column;
    width: 100%;
    margin-bottom: 0px;
}

.action-buttons .btn-placeholder {
    height: 24px;
}

.content .action-button {
    display: inline-block;
    margin-right: 0.75rem;
    cursor: pointer;
    font-size: 12px;
    color: #495d70;
    vertical-align: middle;
    padding: 2px 5px;
}

    .content .action-button:hover {
        background: #EDF8FF;
    }

    .content .action-button:active {
        background: transparent;
    }

.content .action-menu .action-button {
    flex-grow: 1;
    text-align: center;
    font-size: 12px;
    padding: 1px 8px;
    border-style: none none solid;
    background-color: white;
    border-width: 0px 0px 1px;
    border-color: #E3ECF3;
    margin-right: 0px;
    color: #495d70;
    position: relative;
    border-left: 1px solid transparent;
}

    .content .action-menu .action-button:hover {
        background-color: #EDF8FF;
    }

    .content .action-menu .action-button:active {
        background-color: #EDF8FF;
    }

    .content .action-menu .action-button:first-child {
        border-radius: 3px 3px 0px 0px;
    }

    .content .action-menu .action-button.active {
        background-color: #EDF8FF;
        border-left: 1px solid rgb(255, 158, 22);
        color: #495d70;
        border-radius: 0px 3px 0px 0px;
    }

    .content .action-menu .action-button .oi {
        display: inline-block;
        margin-right: 5px;
        position: absolute;
        left: 0.75rem;
        top: 5px;
    }

    .content .action-menu .action-button .oi-timer {
        top: 3px;
    }

.content .action-button .oi {
    font-size: 11px;
    display: inline-block;
    vertical-align: middle;
}

.content .action-button .new-icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url('/css/images/icon-add.svg') no-repeat;
    background-size: 16px;
}

.content .action-button .refresh-icon {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background: url('/css/images/icon-refresh.svg') no-repeat;
    background-size: 16px;
}

.content .action-button .new-icon, .content .action-button .oi {
    margin-right: 0px;
}

.content .action-button .text {
    display: inline-block;
    vertical-align: middle;
}

.content .badge-active-menu .action-button .text {
    position: relative;
    top: 0px;
}

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

    .flex-line > * {
        flex-grow: 1;
    }

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

.file-preview-overlay {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9;
    overflow: auto;
}

.file-preview-error {
    position: absolute;
    text-align: center;
    top: 30px;
    width: 100%;
    left: 0px;
}

.file-preview-overlay iframe {
    height: calc(100% - 5px);
}

.file-preview-overlay .oi-x {
    position: absolute;
    right: 10px;
    top: 0px;
    cursor: pointer;
    font-size: 14px;
}

.file-preview-overlay .preview-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 10px;
}

    .file-preview-overlay .preview-content > img {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
    }

    .file-preview-overlay .preview-content .dxreRoot {
        height: 100%;
        width: 100%;
    }

.note-editor .note-editing-area {
    height: calc(100% - 45px);
    background: white;
}

.note-editable.panel-body {
    overflow-y: scroll;
}

.note-editable p {
    margin-bottom: 0;
}

.note-toolbar .note-icon-caret {
    display: none !important;
}

.note-frame {
    font-family: Calibri;
    font-size: 12pt;
    height: calc(100% - 75px);
}

.details-body.document .note-frame {
    font-size: 11pt;
    border-radius: 0;
    border-bottom: 0;
}


.document .general-buttons .btn-confirm, .buttons-line .btn-confirm {
    background: #F3F6FA;
    border-top: 1px solid #E3ECF3;
    padding-top: 9px;
}

.buttons-line .btn-confirm {
    background: none;
}

    .document .general-buttons .btn-confirm:hover, .buttons-line .btn-confirm:hover {
        border-top: 2px solid #FF8D8D;
        background: #EDF8FF;
        padding-top: 8px;
    }

    .document .general-buttons .btn-confirm:active, .buttons-line .btn-confirm:active {
        border-top: 2px solid #E3ECF3;
        background: white;
        padding-top: 8px;
    }

    .document .general-buttons .btn-confirm.yes:hover, .buttons-line .btn-confirm.yes:hover {
        border-top: 2px solid #98DAC9;
    }

    .document .general-buttons .btn-confirm.yes:active, .buttons-line .btn-confirm.yes:active {
        border-top: 2px solid #E3ECF3;
    }

#addComment .note-frame {
    height: 190px !important;
    width: calc(100% - 4.5rem);
    margin-left: 2.5rem;
}

.note-frame img {
    max-width: 100%;
}

.note-statusbar {
    display: none !important;
}

.note-editor.note-airframe .note-editing-area .note-editable, .note-editor.note-frame .note-editing-area .note-editable {
    height: 100%;
    overflow: auto;
}

.note-editor.note-airframe, .note-editor.note-frame {
    border-color: #E3ECF3;
}

.note-editor .note-toolbar, .note-popover .popover-content {
    border-color: #E3ECF3;
}

.note-modal {
    top: 15% !important;
}

.note-modal-backdrop {
    display: none !important;
}

.load-more-comments {
    display: block;
    width: 100%;
    text-align: center;
    color: #88A8BD;
    height: 24px;
    cursor: pointer;
    border-radius: 4px;
}

    .load-more-comments .icon.chevron-up {
        display: inline-block;
        width: 16px;
        height: 19px;
        background-image: url('images/icon-chevron-up.svg');
        background-repeat: no-repeat;
        background-size: 19px;
        margin-right: 5px;
    }

    .load-more-comments .oi.oi-timer {
        margin-right: 5px;
    }

    .load-more-comments:hover {
        color: #7793A7;
        background-color: #E6EFF7;
    }

    .load-more-comments span {
        vertical-align: middle;
    }

/* overrides */
.datepicker-controls .view-switch {
    font-size: 11px;
    margin-top: 7px;
}

.datepicker-view .dow {
    font-size: 11px;
}

.datepicker-cell, .datepicker-view .week {
    height: 1.8rem;
    line-height: 1.8rem;
}

.datepicker-grid {
    width: 12.75rem;
}

.module-search {
    position: absolute;
    right: 15px;
    top: 3px;
    height: 22px;
    border-style: solid;
    border-width: 1px;
    user-select: none;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    border-color: #e3ecf3;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: block;
    background-image: url(/css/images/search_new.svg);
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: 5px center;
    font-family: 'Outfit';
    font-size: 11px;
    padding-left: 24px;
    margin-bottom: 12px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    width: 150px;
    cursor: text;
    opacity: 1;
    background-position: 5px center;
}

.module-search-placeholder {
    position: absolute;
    right: 40px;
    width: 100px;
    height: 22px;
    top: 6px;
    z-index: 999999;
    opacity: 1;
    visibility: visible;
    display: block;
    font-size: 11px;
    color: #88A8BD;
    pointer-events: none;
}

.module-search:hover {
    opacity: 1;
}

.module-search:active, .module-search:focus {
    outline: 0 !important;
    border-width: 0 !important;
    text-decoration: none;
}

.module-search.s-expanded {
    border-width: 1px !important;
    width: 310px;
    cursor: text;
    opacity: 1;
    background-position: 5px center;
}

.module-search-placeholder.s-expanded {
    right: 200px;
}

.module-search:focus {
    outline: 0;
    border: 1px solid #88A8BD;
}

#task-due-date-from, #task-due-date-to {
    background-image: url(/css/images/calendar-alt.svg);
    background-repeat: no-repeat;
}

.note-icon-magic {
    background-image: url(/css/images/txt-magic.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-magic::before {
        content: unset;
    }

.note-icon-bold {
    background-image: url(/css/images/txt-bold.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-bold::before {
        content: unset;
    }

.note-icon-italic {
    background-image: url(/css/images/txt-italic.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-italic::before {
        content: unset;
    }

.note-icon-underline {
    background-image: url(/css/images/txt-underline.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-underline::before {
        content: unset;
    }

.note-icon-eraser {
    background-image: url(/css/images/text-clear.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-eraser::before {
        content: unset;
    }

.note-icon-font {
    background-image: url(/css/images/txt-font.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-font::before {
        content: unset;
    }

.note-fontname button, .note-fontsize button, .note-color button {
    height: 32.5px;
}


.note-color .dropdown-toggle::after {
    position: relative;
    right: 4px;
}

.note-icon-unorderedlist {
    background-image: url(/css/images/txt-list-ul.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-unorderedlist::before {
        content: unset;
    }

.note-icon-orderedlist {
    background-image: url(/css/images/txt-list-ol.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-orderedlist::before {
        content: unset;
    }

.note-icon-align-left {
    background-image: url(/css/images/txt-align-left.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-align-left::before {
        content: unset;
    }

.note-icon-align-right {
    background-image: url(/css/images/txt-align-right.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-align-right::before {
        content: unset;
    }

.note-icon-align-center {
    background-image: url(/css/images/txt-align-center.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-align-center::before {
        content: unset;
    }

.note-icon-align-justify {
    background-image: url(/css/images/txt-align-justify.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-align-justify::before {
        content: unset;
    }

.note-icon-align-outdent {
    background-image: url(/css/images/txt-indent-left.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-align-outdent::before {
        content: unset;
    }

.note-icon-align-indent {
    background-image: url(/css/images/txt-indent-right.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-align-indent::before {
        content: unset;
    }

.note-icon-text-height {
    background-image: url(/css/images/txt-line-height.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-text-height::before {
        content: unset;
    }

.note-icon-table {
    background-image: url(/css/images/txt-table.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-table::before {
        content: unset;
    }

.note-icon-link {
    background-image: url(/css/images/txt-link.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-link::before {
        content: unset;
    }

.note-icon-picture {
    background-image: url(/css/images/txt-image.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-picture::before {
        content: unset;
    }

.note-icon-minus {
    background-image: url(/css/images/txt-line.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-minus::before {
        content: unset;
    }

.note-icon-code {
    background-image: url(/css/images/txt-code.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-code::before {
        content: unset;
    }

.note-icon-code {
    background-image: url(/css/images/txt-code.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-code::before {
        content: unset;
    }

.note-icon-question {
    background-image: url(/css/images/txt-help.svg);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 24px;
    background-position: center;
    vertical-align: middle;
}

    .note-icon-question::before {
        content: unset;
    }

.note-current-fontname, .note-current-fontsize {
    color: #495d70;
}

.settings {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: white;
    padding: 18px;
}

    .settings .btn-general {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }

    .settings hr {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .settings h5 {
        margin-bottom: 0;
        margin-top: 15px;
        font-size: 15px;
    }

.settings-row .info {
    padding-left: 10px;
    font-size: 13px;
}

.settings-row .avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
}

.settings-row {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    text-align: left;
}

    .settings-row label {
        margin-bottom: 0;
        margin-left: 5px;
        font-size: 13px;
    }

    .settings-row .input[type=checkbox] {
        width: 13px;
        height: 13px;
    }

.settings.visible {
    display: block;
}

.q-toast {
    display: none;
    background: white;
    padding: 8px;
    border-radius: 3px;
    box-shadow: 0px 1px 5px #CACACA;
    position: absolute;
    top: -5px;
    left: 0px;
    width: 150%;
    z-index: 99;
}

.connection-info {
    position: relative;
    cursor: pointer;
}

    .connection-info .q-toast {
        width: 150%;
        text-wrap: wrap;
    }

.body.no-actions {
    height: calc(100% - 32px);
}

.simpix {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.note-editor .note-toolbar, .note-popover .popover-content {
    max-height: 45px;
}

.pt-20 {
    padding-top: 20px;
}

.main-loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

    .main-loader.non-blocking {
        width: 400px;
        height: 170px;
        right: 0;
        bottom: 0;
        left: unset;
        top: unset;
    }

.backdrop {
    background-color: white;
    opacity: 0.4;
    width: 100%;
    height: 100%;
}

.loader-box {
    display: block;
    width: 350px;
    height: 120px;
    position: absolute;
    top: calc(50% - 130px);
    left: calc(50% - 175px);
    background-color: white;
    box-shadow: rgb(202 202 202) 0px 3px 7px;
    border-radius: 8px;
}

.non-blocking .loader-box {
    top: calc(50% - 60px);
}

.loader-box .text {
    padding: 15%;
    text-align: center;
    font-family: "Outfit";
    font-size: 11px;
    color: #495d70;
}

.gradient {
    height: 0.5rem;
    background: linear-gradient(-45deg, #ff9E16, #80B9C7);
    background-size: 200% 200%;
    animation: animateBg 3s ease infinite;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0px 0px 8px 8px;
}

@keyframes gradient-bg {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}

@keyframes animateBg {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

.loading-placeholder {
    height: 16px;
    width: 150px;
    margin-top: 3px;
    margin-bottom: 3px;
    display: block;
    background: linear-gradient(-90deg, #E6EFF7 30%, #fcfcfc 50%, #E6EFF7 100%);
    background-size: 400% 400%;
    animation: pulse 1.5s ease-in-out infinite;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(1, -0.01, 1, 1);
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: animateBg;
    border-radius: 4px;
}

    .loading-placeholder.mid {
        width: 200px;
    }

    .loading-placeholder.small {
        width: 100px;
    }

    .loading-placeholder.xsmall {
        width: 60px;
    }

.inline-placeholders .loading-placeholder.xsmall {
    width: 30%;
}

.inline-placeholders .loading-placeholder.small {
    width: 60%;
}

.loading-placeholder.large-height {
    width: 100%;
    height: 150px;
}

.loading-placeholder.fw {
    width: 100%;
    min-height: 23px;
}

.inline-placeholders {
    display: flex;
    position: relative;
}

    .inline-placeholders > div {
        width: 20%;
        max-width: 20%;
    }

    .inline-placeholders .loading-placeholder {
        display: inline-block;
    }

    .inline-placeholders .status-placeholder {
        width: 100%;
        text-align: right;
        position: absolute;
        right: 0;
        top: 0;
    }

.loading-placeholder.icon {
    width: 20px;
    margin-right: 5px;
}

.flex-row {
    display: flex;
}

.main-loader-line {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    animation: loader-line 1s ease;
    z-index: 999999;
    background-color: rgb(255, 158, 22);
    display: none;
}

    .main-loader-line.visible {
        display: block;
    }

.mt-15 {
    margin-top: 15px;
}

@keyframes loader-line {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.details-body.small-width .task-split .split-row {
    display: block;
}


.small-width .split-row .fields {
    height: auto;
}

#direct-view {
    display: block;
    margin-left: 4px;
    overflow: unset;
    border-left: 1px solid #E3ECF3;
    height: calc(100% - 2px);
}

    #direct-view .fields {
        height: calc(100% - 25px);
    }

    #direct-view .file-preview-overlay {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 0;
    }



.hide-preview {
    display: none;
}

    #direct-view.resizing .hide-preview, .hide-preview.saving-document {
        background: white;
        z-index: 99999;
        display: block;
        position: absolute;
        left: 0;
        top: 62px;
        width: 100%;
        height: calc(100% - 62px);
        opacity: 0.7;
    }

.comment-text-wrapper .placeholder {
    font-size: 11px;
    overflow-wrap: break-word;
    color: rgb(131, 163, 185);
    font-family: "Outfit";
}

.status-holder {
    position: absolute;
    right: 85px;
    top: 5px;
    display: flex;
    align-items: center;
    height: 18px;
}

.very-small-width .status-holder {
    display: none;
}

#split-screen-task {
    border-left: 1px solid #E3ECF3;
    overflow-x: auto;
}

    #split-screen-task .fields.comments {
        padding-left: 0px;
        padding-right: 0px;
    }

        #split-screen-task .fields.comments .comments-wrapper {
            padding-left: 12px;
            padding-right: 15px;
        }

.collapsed-buttons .status-holder {
    position: absolute;
    right: unset;
    left: 12px;
    top: 25px;
    cursor: pointer;
}

.collapsed-buttons .task-header.main {
    height: 70px;
    max-height: 70px;
}

#split-screen-task .task-header {
    border-top: 0;
}

#addComment .note-frame {
    width: 100%;
    margin-left: 0px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

.task-header .mid-buttons {
    position: absolute;
    right: 15px;
    top: 1px;
}

.status-holder .items {
    margin-top: 0px;
    margin-right: -5px;
}

    .status-holder .items div {
        border-radius: 15px;
        background: #008AD1;
        color: white;
        font-family: 'Outfit';
        font-size: 12px;
        margin-right: 10px;
        padding: 0px 8px;
        /* font-weight: normal; */
        line-height: 18px;
        position: relative;
        display: inline-block;
    }

.details-body .task-header:hover .status-holder .items div {
    opacity: 0.75;
}

    .details-body .task-header:hover .status-holder .items div:hover {
        opacity: 1;
    }

    .details-body .task-header:hover .status-holder .items div:active {
        opacity: 1;
    }


.status-holder .dropdown-title {
    display: none;
}

.status-holder.dropdown-mode .dropdown-title {
    display: block;
    border-radius: 8px;
    color: rgb(109, 135, 151);
    font-size: 11px;
    margin-right: 4px;
    padding: 0px 8px;
    /* font-weight: normal; */
    line-height: 18px;
    position: relative;
    display: inline-block;
    padding-right: 18px;
    background: url(/css/images/icon-arrow-down.svg) no-repeat;
    background-position: 96% 3px;
    background-color: #f6f8fa;
    background-size: 14px;
}

.status-holder.dropdown-mode .items {
    position: absolute;
    left: -35px;
    top: 20px;
    pointer-events: auto;
    width: 137px;
    max-height: 160px;
    overflow: auto;
    position: absolute;
    z-index: 1;
    border-style: solid;
    border-width: 0px;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    border-radius: 0px 0px 3px 3px;
    box-shadow: rgb(213, 213, 213) 0px 1px 4px;
    border-color: rgb(156, 193, 221);
    display: none;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0.5rem;
    padding-bottom: 0;
}

.status-holder.dropdown-mode.open .items {
    display: block;
}

    .status-holder.dropdown-mode.open .items div {
        border: 0 !important;
        margin: 0 !important;
        background: none;
        width: 100%;
        display: block;
        pointer-events: auto;
        padding: 5px 8px;
        color: rgb(116, 116, 116);
        font-family: Outfit;
        font-size: 12px;
        z-index: 1;
        text-align: left;
        cursor: pointer;
        margin-bottom: 2px !important;
        border-radius: 0;
    }

        .status-holder.dropdown-mode.open .items div:last-child {
            margin-bottom: 0px !important;
        }

        .status-holder.dropdown-mode.open .items div:hover {
            border: 0 !important;
            background-color: #edf8ff !important;
        }

.status-holder.open .dropdown-title {
    color: white;
    background-image: url(/css/images/icon-arrow-up-white.svg);
    background-color: #80B9C7;
    background-position: 96% 2px;
}


.ui-sortable-helper {
    background: #FCFCFC;
}

.btn-regular {
    border-radius: 13px;
    background-color: #F3F6FA;
    color: #495d70;
    border: 1px solid #E3ECF3;
    font-size: 11px;
    padding: 0px 8px;
    /* font-weight: normal; */
    line-height: 18px;
    position: relative;
    display: inline-block;
}

    .btn-regular:focus {
        outline: 0;
    }

    .btn-regular:hover {
        background-color: #E6EFF7;
    }


.required input, .required select {
    border-bottom: 1px solid #FF8D8D !important;
}

.required-star, .details-body .task-header span.required-star {
    display: none;
    color: #FF8D8D;
}

.required .required-star, .details-body .task-header.required span.required-star {
    display: inline-block;
}

.details-body .task-header.required .summary-edit {
    border: 1px solid red;
}

.dialog-copy, .dialog-additional-data {
    text-align: left;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 3rem;
    color: #495d70;
    font-size: 12px;
}

    .dialog-additional-data strong {
        font-family: 'Outfit Medium';
        font-weight: normal;
    }

.ad-header-table {
    width: 100%;
    margin-top: 1rem;
}

    .ad-header-table th {
        font-weight: normal;
        font-family: 'Outfit';
        height: 27px;
        background: #F6F8FA;
        padding-left: 18px;
    }

    .ad-header-table tr th:first-child, .ad-header-table tr td:first-child {
        padding-left: 19px;
    }

.ad-new-value {
    user-select: none;
    height: 27px;
    border: 1px solid #E3ECF3;
    opacity: 0.55;
    text-align: center;
    padding-top: 4px;
    margin-top: 5px;
    background: url('/css/images/icon-add.svg') no-repeat;
    background-position: 13px center;
    background-size: 18px;
    border-radius: 4px;
}

    .ad-new-value:hover {
        opacity: 1;
        cursor: pointer;
    }

.ad-table-wrapper {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ad-value-table {
    width: 100%;
    margin-top: 3px;
}

    .ad-header-table th, .ad-value-table td {
        width: 50%;
        position: relative;
    }

    .ad-value-table td {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .ad-value-table input {
        border: 0;
        outline: 0;
        border: 1px solid transparent;
        color: #2c2c2c;
        width: 100%;
        padding-right: 20px;
        padding-left: 15px;
    }

        .ad-value-table input:hover {
            background-image: url(/css/images/edit-alt_n.svg);
            background-repeat: no-repeat;
            background-position: right center;
            background-size: 12px;
        }

    .ad-value-table tr td:last-child input:hover {
        background-position: calc(100% - 20px) center;
    }

    .ad-value-table input:focus {
        border: 1px solid #E3ECF3;
        background-image: none;
    }

.dialog-copy p {
    margin-bottom: 1rem;
}

.dialog-copy strong {
    font-weight: 500 !important;
}

.dialog-copy .checkbox-line {
    margin-bottom: 14px;
}

    .dialog-copy .checkbox-line:last-child {
        margin-bottom: 0;
    }

    .dialog-copy .checkbox-line label {
        margin-bottom: 0;
    }

    .dialog-copy .checkbox-line input {
        position: relative;
        top: 2px;
        margin-right: 5px;
    }

.action-menu.prerender {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.module-menu .loading-placeholder, .action-menu .loading-placeholder {
    margin-bottom: 15px;
    width: 100%;
}

.cf-caption {
    font-size: 11px;
    color: #495d70;
}

.cf-desc {
    font-size: 12px;
    color: #2c2c2c;
}

.icon-menu-bookmark {
    display: inline-block;
    margin-right: 5px;
    position: absolute;
    left: 0.75rem;
    top: 5px;
    width: 11px;
    height: 11px;
    background-size: 11px;
    background-image: url('/css/images/bookmark_upd.svg');
    background-repeat: no-repeat;
}

.icon-menu-history {
    display: inline-block;
    margin-right: 5px;
    position: absolute;
    left: 0.75rem;
    top: 5px;
    width: 11px;
    height: 11px;
    background-size: 11px;
    background-image: url('/css/images/history_upd.svg');
    background-repeat: no-repeat;
}

.icon-menu-tracker {
    display: inline-block;
    margin-right: 5px;
    position: absolute;
    left: 0.75rem;
    top: 5px;
    width: 11px;
    height: 11px;
    background-size: 11px;
    background-image: url('/css/images/eye_upd.svg');
    background-repeat: no-repeat;
}

.note-btn-group {
    margin-bottom: 10px !important;
}

.expandable .header-toggle {
    font-family: 'Outfit';
    font-size: 12px;
    color: #495d70;
    padding-left: 56px;
    border-top: 1px solid #e3ecf3;
    cursor: pointer;
    padding-top: 5px;
    padding-bottom: 6px;
    position: relative;
}

    .expandable .header-toggle.with-icon {
        padding-left: 40px;
    }

.expandable .navigation-items {
    display: none;
}

.expandable.expanded .navigation-items {
    display: block;
    margin-top: -8px;
}

.expandable.expanded .header-toggle {
    padding-top: 5px;
    padding-bottom: 6px;
}

.expandable.first {
    margin-top: 5px;
}

.header-toggle .icon-views {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/css/images/views-icon.svg');
    background-size: 12px;
    margin-left: 4px;
    margin-right: -1px;
    position: relative;
    top: 2px;
}



.header-toggle .icon-types {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/css/images/activity_constructor.svg');
    background-size: 12px;
    margin-left: 4px;
    margin-right: -1px;
    position: relative;
    top: 2px;
}

.header-toggle .icon-collapse {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/css/images/angle-up-nav.svg');
    background-size: 12px;
    margin-left: 2px;
    position: absolute;
    top: 10px;
    right: 16px;
}



.header-toggle:hover {
    background-color: #EDF8FF;
}

.header-toggle .icon-filter {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('/css/images/filter-icon.svg');
    background-size: 12px;
    margin-left: 4px;
    margin-right: -1px;
    position: relative;
    top: 2px;
}

.sorba-checkbox {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #D2E1EA;
    background-color: #F6F8FA;
    border-radius: 2px;
}

    .sorba-checkbox.checked {
        background-image: url('/css/images/icon-checkbox-mark.svg');
        background-size: 16px;
        background-repeat: no-repeat;
        background-position: center;
    }

.sorba-radio {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #D2E1EA;
    background-color: #F6F8FA;
    border-radius: 18px;
    text-align: center;
}

    .sorba-radio.checked {
        background-color: #81bce5;
    }

.radio-line.important .sorba-radio.checked {
    background-color: #ff8d8d;
}

.sorba-dropdown-wrapper {
    position: relative;
}

    .sorba-dropdown-wrapper .sorba-dropdown {
        width: calc(100% - 7px);
        margin-left: 7px;
        font-family: "Outfit";
        border-style: none none solid;
        border-width: 0px 0px 1px;
        overflow: visible;
        border-color: rgb(255, 158, 22) rgb(255, 158, 22) rgb(210, 225, 234);
        z-index: 1;
        border-radius: 2px 2px 0px 0px;
        font-size: 12px;
        color: #2c2c2c;
        padding: 2px;
        padding-left: 28px;
        background: url(/css/images/icon-arrow-down.svg) no-repeat;
        background-position: calc(100% - 4px) center;
        background-size: 17px;
        background-color: #F6F8FA;
        outline: 0;
        cursor: pointer;
    }

        .sorba-dropdown-wrapper .sorba-dropdown:hover {
            background-color: #edf8ff;
        }

.field.locked .sorba-dropdown-wrapper .sorba-dropdown:hover {
    background-color: #F6F8FA;
}

.sorba-dropdown-items {
    position: absolute;
    left: 0px;
    top: 22px;
    pointer-events: auto;
    width: 137px;
    max-height: 160px;
    overflow: auto;
    position: absolute;
    z-index: 99999;
    border-style: solid;
    border-width: 0px;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    border-radius: 0px 0px 3px 3px;
    box-shadow: rgb(213, 213, 213) 0px 1px 4px;
    border-color: rgb(156, 193, 221);
    display: block;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0.5rem;
    padding-top: 5px;
    padding-bottom: 5px;
}

.right-actions .sorba-dropdown-items {
    width: 100%;
}

.sorba-dropdown-items .item {
    width: 100%;
    display: block;
    pointer-events: auto;
    padding: 3px 8px;
    color: #2c2c2c;
    font-family: Outfit;
    font-size: 12px;
    z-index: 1;
    text-align: left;
    cursor: pointer;
    margin-bottom: 1px;
}

    .sorba-dropdown-items .item:last-child {
        margin-bottom: 0;
    }

    .sorba-dropdown-items .item:hover {
        background-color: #edf8ff;
    }

    .sorba-dropdown-items .item.selected, .sorba-dropdown-items .item.sub.selected {
        background-color: #F6F8FA;
        border: 1px solid #e3ecf3;
        border-left: 1px solid #ff9e16;
    }

.inline-fields {
    display: flex;
    flex-direction: row;
}

    .inline-fields > .field {
        flex-grow: 1;
        min-width: 50%;
    }

        .inline-fields > .field:first-child {
            padding-right: 10px;
        }

        .inline-fields > .field:last-child {
            padding-left: 10px;
        }

.field .loading-placeholder.small {
    height: 14px;
    margin-bottom: 1px;
    margin-top: 0px;
}

.main-logo {
    display: block;
    width: 90px;
    height: 30px;
    background: url(/css/images/sorba-logo-white.svg) no-repeat;
    background-size: 100%;
    position: absolute;
    background-position: center;
    left: calc(50% - 45px);
    top: 2px;
}

.new-entity-button {
    font-size: 12px;
    font-family: 'Outfit';
    position: absolute;
    right: 15px;
    top: 5px;
    background: #F6F8FA;
    color: #008AD1;
    border: 1px solid #E3ECF3;
    padding: 0px 10px;
    padding-right: 20px;
    border-radius: 15px;
    cursor: pointer;
    background-image: url(/css/images/plus_blue.svg);
    background-repeat: no-repeat;
    background-position: 94% center;
    background-size: 14px;
}

    .new-entity-button.no-icon {
        padding-right: 10px;
        background-image: none;
    }

    .new-entity-button:hover {
        background-color: #edf8ff;
    }

.sorba-bg-logo {
    position: absolute;
    left: 3rem;
    top: 3rem;
    width: 100px;
    height: 20px;
    background: url('/css/images/sorbalogo_azure.svg') no-repeat;
    background-position: center;
    background-size: contain;
}

.badge-active-menu:first-of-type {
    padding-bottom: 7px;
}


.navigation .module-menu .item.nav-item {
    margin-top: 0px;
    line-height: 23px;
    width: calc(100% - 1px);
}

    .navigation .module-menu .item.nav-item:first-child {
        margin-top: 0px;
    }

.field .sorba-dropdown-items {
    width: 100%;
    z-index: 99;
}

.field.no-icon .sorba-dropdown-wrapper .sorba-dropdown {
    margin-left: 0px;
    padding-left: 6px;
    width: 100%;
}

.badge-active-menu.filter {
    display: flex;
    padding-left: 26px;
}

    .badge-active-menu.filter .icon-clear {
        right: 60px;
    }

.badge-active-menu .sorba-dropdown-wrapper {
    max-width: 180px;
    min-width: 180px;
    flex-grow: 1;
}

    .badge-active-menu .sorba-dropdown-wrapper .sorba-dropdown-items {
        width: 250px;
        min-height: 260px;
    }

    .badge-active-menu .sorba-dropdown-wrapper .sorba-dropdown {
        background-color: transparent;
        border-bottom: 0;
        border-right: 1px solid #D1DBE2;
        padding-right: 20px;
        background-position: calc(100% - 5px) 2px;
        display: inline-block;
        margin-left: 0px;
        padding-left: 0;
        color: #495d70;
        text-wrap: nowrap;
        height: 100%;
    }

.badge-active-menu .filter-big-field {
    flex-grow: 1;
    border: 0;
    outline: 0;
    color: #2c2c2c;
    font-size: 12px;
    border-right: 1px solid #D1DBE2;
    margin-right: 45px;
    background-image: url('/css/images/search_new.svg');
    background-repeat: no-repeat;
    background-position: 0px 4px;
    background-size: 13px;
    padding-left: 18px;
    padding-right: 45px;
    position: relative;
}

    .badge-active-menu .filter-big-field input {
        border: 0;
        padding: 0;
        font-size: 12px;
        outline: 0;
        color: #2c2c2c;
        width: 100%;
    }

.filter-big-field .search-tag {
    display: inline-block;
    margin-right: 8px;
    position: relative;
    padding-right: 15px;
    top: 2px;
    color: #495d70;
    font-size: 11px;
}


    .filter-big-field .search-tag .icon-clear {
        right: -1px;
        width: 15px;
        height: 15px;
        background-size: 15px;
        opacity: 0.3;
        top: 0px;
    }

        .filter-big-field .search-tag .icon-clear:hover {
            opacity: 1;
        }

.filter-main-search {
    width: auto;
    outline: 0;
    position: relative;
    top: 2px;
    z-index: 1;
    display: inline-block;
}

.focus-handle {
    position: absolute;
    width: calc(100% - 300px);
    height: 20px;
    z-index: 0;
    cursor: text;
}

.badge-active-menu .search-placeholder {
    position: absolute;
    left: 18px;
    top: 2px;
    font-size: 12px;
    color: #2c2c2c;
    opacity: 0.55;
    pointer-events: none;
    z-index: 99;
}

.badge-active-menu.m-hidden {
    display: none !important;
}


.icon-filter-search {
    display: block;
    width: 27px;
    height: 18px;
    background-image: url('/css/images/filter_off.svg');
    background-repeat: no-repeat;
    position: absolute;
    right: 25px;
    top: 5px;
    background-size: 13px;
    background-position: center;
    border: 1px solid transparent;
    cursor: pointer;
}

    .icon-filter-search:hover {
        background-color: #EDF8FF;
        border: 1px solid transparent;
        border-radius: 2px;
    }

    .icon-filter-search.active {
        background-color: #EDF8FF;
        border: 1px solid #E3ECF3;
        border-radius: 2px;
    }

.module-search-close {
    position: absolute;
    right: 1.5rem;
    top: 6px;
    font-size: 12px;
    color: #495d70;
    padding-left: 20px;
    background: url('/css/images/times-square_red.svg') no-repeat;
    background-position: 2px center;
    background-repeat: no-repeat;
    background-size: 14px;
    cursor: pointer;
}

    .module-search-close:hover {
        font-family: "Outfit Medium";
    }


.buttons-overlay {
    background: white;
    opacity: 0.7;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 30px;
}

.content .body.editing.filter-pane {
    height: calc(100% - 95px);
}

    .content .body.editing.filter-pane .details-buttons .detail-button {
        min-width: 33%;
    }

.sorba-dropdown-items .item.sub {
    margin-left: 15px;
    border-left: 1px solid #E3ECF3;
    width: auto;
}

.dialog .dialog-body.prompt {
    text-align: left;
    padding-bottom: 0;
    padding-top: 0.5rem;
}

    .dialog .dialog-body.prompt .fields .field .input {
        min-width: 100%;
        max-width: 100%;
    }

        .dialog .dialog-body.prompt .fields .field .input input {
            background-image: none;
            max-width: 100%;
        }

.subitem .icon-inline-menu {
    display: none;
    width: 13px;
    height: 13px;
    background-size: 8px;
    background-image: url(/css/images/three_dots.svg);
    background-repeat: no-repeat;
    margin-left: 3px;
    position: absolute;
    right: 5px;
    top: 3px;
    opacity: 0.55;
}

    .subitem .icon-inline-menu:hover {
        opacity: 1;
    }

.subitem:hover .icon-inline-menu {
    display: inline-block;
}

.subitem .inline-menu {
    position: absolute;
    width: calc(100% - 100px);
    bottom: 100%;
    right: 12px;
    border-radius: 3px;
    border-style: solid;
    background-color: rgb(255, 255, 255);
    border-width: 0px;
    border-color: rgb(228, 228, 228);
    z-index: 50;
    box-shadow: rgb(203 203 203) 1px 2px 4px;
    padding: 5px 0px 5px 11px;
}

.navigation.sidebar-expanded .module-menu .subitem .inline-menu {
    width: calc(100% - 20px);
}

.subitem .inline-menu .item {
    font-size: 12px;
    color: rgb(116, 116, 116);
    margin-bottom: 5px;
    padding: 2px 5px;
    line-height: 22px;
    border-radius: 4px;
    margin-left: -10px;
    width: calc(100% + 10px);
    padding-left: 10px;
}

.inline-menu .icon-copy {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/css/images/copy_n.svg) no-repeat;
    background-size: 13px;
    margin-right: 3px;
    position: relative;
    top: 2px;
}

.inline-menu .icon-edit {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/css/images/edit-alt_n.svg) no-repeat;
    background-size: 13px;
    margin-right: 3px;
    position: relative;
    top: 2px;
}

.inline-menu .icon-delete, .ad-value-table .icon-delete {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/css/images/trash.svg) no-repeat;
    background-size: 13px;
    margin-right: 3px;
    position: relative;
    top: 2px;
}

.ad-value-table .icon-delete {
    position: absolute;
    top: 6px;
    right: 0px;
    opacity: 0.3;
    background-image: url('/css/images/close_filigran.svg');
}

    .ad-value-table .icon-delete:hover {
        opacity: 1;
        cursor: pointer;
    }

.inline-menu .icon-rename {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/css/images/letter-japanese-a.svg) no-repeat;
    background-size: 13px;
    margin-right: 3px;
    position: relative;
    top: 2px;
}

.task-header.single-entity .icon-options {
    right: 15px;
}

.task-header.single-entity .status-holder {
    right: 35px;
}

.tabs {
    display: flex;
    max-width: 250px;
}

    .tabs > * {
        flex-grow: 1;
    }

    .tabs .tab {
        border: 1px solid #E3ECF3;
        color: #495d70;
        font-family: 'Outfit';
        padding-left: 20px;
        cursor: pointer;
        height: 25px;
        line-height: 23px;
        padding-left: 22px;
        padding-right: 6px;
    }

        .tabs .tab:first-child {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .tabs .tab:last-child {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        .tabs .tab:not(.active):hover {
            background-color: #EDF8FF;
            border: 1px solid transparent;
        }

        .tabs .tab.active {
            background-color: #EDF8FF;
        }


        .tabs .tab.ico-history {
            background-size: 12px;
            background-position: 5px center;
            background-image: url('/css/images/history_upd.svg');
            background-repeat: no-repeat;
        }

        .tabs .tab.ico-status {
            background-size: 12px;
            background-position: 5px center;
            background-image: url('/css/images/icon-status-change.svg');
            background-repeat: no-repeat;
            margin-left: -1px;
        }

        .tabs .tab.ico-logs {
            background-size: 12px;
            background-position: 5px center;
            background-image: url('/css/images/books.svg');
            background-repeat: no-repeat;
            margin-left: -1px;
        }

.tab-content {
    margin-top: 15px;
    overflow-x: auto;
}

.sorba-grid {
    width: 100%;
}

.tab-content.activities {
    height: calc(100% - 20px);
}

#pdf-js-frame {
    background: #ededed;
    padding: 20px;
    overflow: auto;
    height: calc(100% - 29px);
    position: relative;
}

    #pdf-js-frame .pdf-canvas-wrapper {
        position: relative;
        margin: 0 auto;
        display: block;
        margin-bottom: 20px;
        overflow: hidden;
    }

.signature-box {
    position: absolute !important;
    left: calc(50% - 225px);
    top: 20%;
    width: 450px;
    height: 300px;
    background: white;
    border: 1px solid #80c4e8;
    border-radius: 3px;
    z-index: 99999;
}

#sign-tab-sign-content {
    height: calc(100% - 80px);
    width: calc(100% - 40px);
    margin-left: 20px;
}

.signature-box .oi {
    cursor: pointer;
    opacity: 0.77;
}

    .signature-box .oi:hover {
        opacity: 1;
    }

.signature-box .info-text {
    padding: 5px;
    text-align: center;
    width: 100%;
    display: inline-block;
}

.signature-box .tab-wrapper {
    padding-top: 13px;
}

.signature-box .tabs {
    text-align: center;
    width: 280px;
    margin: 0 auto;
}

    .signature-box .tabs .tab {
        padding-left: 6px;
        width: 122px;
    }

.sign-pad {
    width: 100%;
    height: calc(100% - 30px);
    background: white;
    margin-top: 15px;
    border: 1px solid rgb(210, 225, 234);
}

#sign-tab-upload-content {
    height: calc(100% - 85px);
}

.sign-img-upload-wrap {
    background: white;
    border: 1px solid rgb(210, 225, 234);
    height: calc(100% - 50px);
    width: calc(100% - 40px);
    margin-left: 20px;
}

.file-select-button {
    border: 1px solid #e3ecf3;
    padding: 6px;
    font-size: 12px;
    display: inline-block;
    padding-bottom: 3px;
    padding-top: 3px;
    width: 122px;
    cursor: pointer;
    vertical-align: middle;
}

    .file-select-button:hover {
        background: #EDF8FF;
    }

.filename-holder {
    padding: 6px;
    font-size: 12px;
    display: inline-block;
    padding-bottom: 3px;
    padding-top: 3px;
    width: 122px;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.upload-signature-preview {
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.positioned-signature {
    position: absolute !important;
    left: 20%;
    top: 20%;
    z-index: 99999;
    width: 60%;
    height: 40%;
    border: 1px solid #80c4e8;
    border-radius: 4px;
}

    .positioned-signature .oi {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        opacity: 0.77;
    }

    .positioned-signature .oi-check {
        right: 35px;
    }

    .positioned-signature .oi:hover {
        opacity: 1;
    }

    .positioned-signature img {
        width: 100%;
        height: 100%;
    }

.sorba-grid th {
    background-color: #f6f8fa;
    border: 1px solid #d2e1ea;
    color: #495d70;
    font-weight: normal;
    font-family: 'Outfit Medium';
    padding: 1px 8px;
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
    z-index: 1;
}

.sorba-grid td {
    border: 1px solid #d2e1ea;
    padding: 1px 8px;
    color: #2c2c2c;
}

.sorba-grid tr:first-child *:first-child {
    border-top-left-radius: 3px;
}

.sorba-grid tr:first-child *:last-child {
    border-top-right-radius: 3px;
}

.sorba-grid tr:last-child *:first-child {
    border-bottom-left-radius: 3px;
}

.sorba-grid tr:last-child *:last-child {
    border-bottom-right-radius: 3px;
}

.table-scroll-wrap-activities {
    overflow-y: auto;
    max-height: 500px;
}

.transition-error-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/css/images/exclamation-triangle.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    margin-right: 5px;
    cursor: pointer;
}

/* sorba toggle */
.sorba-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 17px;
}

    /* Hide default HTML checkbox */
    .sorba-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* The slider */
    .sorba-switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

        .sorba-switch .slider:before {
            position: absolute;
            content: "";
            height: 13px;
            width: 13px;
            left: 2px;
            top: 2px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    .sorba-switch input:checked + .slider {
        background-color: #2196F3;
    }

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

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

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

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

.sorba-switch-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}


.comment .note-editor .note-toolbar {
    padding-left: 180px;
}

.comment .sorba-switch-wrap {
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 99;
}

.mobile-actions {
    display: none;
}

    .mobile-actions .icon-sidebar {
        display: inline-block;
        width: 22px;
        height: 22px;
        background: url(/css/images/bars.svg) no-repeat;
        background-size: 22px;
        margin-right: 15px;
    }

.main-content.navi-open .mobile-actions .icon-sidebar {
    background-image: url(/css/images/close-white.svg);
}


@media(max-width: 900px) {
    .signature-box {
        width: 90%;
        left: 5%;
    }

    .header-area .top-banner {
        padding-left: 8px;
    }

        .header-area .top-banner .auth-wrapper {
            right: 8px;
        }

    .mobile-actions {
        display: inline-block;
    }

    #main-navigation, #history-menu {
        display: none;
    }

    .main-content.navi-open #main-navigation {
        display: block;
        width: 100%;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .navigation .sidebar.expanded {
        position: fixed;
        top: 35px;
        left: 0px;
        width: 100%;
        height: calc(100% - 35px);
    }

    .main-content.navi-open .central-content {
        display: none;
    }

    .content .body .activity-task .content-part .title-section .task-heading {
        text-wrap: nowrap;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
    }

    .task-menu .block-button.open-new-in-browser {
        display: none;
    }

    .items-list .task-wrapper {
        min-width: 0px;
    }

    .activity-task .content-part .title-section .icon-menu {
        display: block;
    }

    .activity-task .icon-new-tab-standalone {
        display: inline-block;
    }

    .header-area .top-banner .module-buttons {
        display: none;
    }

    .content .body .body-content {
        display: block;
    }

    #direct-view {
        display: none;
    }

    .details-body .task-split {
        min-width: unset;
    }

    .content .body .body-content .details-body.visible {
        min-width: 100%;
        max-width: 100%;
    }

    /*.content .body.single-entity {
        height: calc(100% - 30px);
    }*/
    .header-area .toggled-menu.language-mode {
        right: 0;
        bottom: -5px;
        top: unset;
    }

    .notification {
        width: calc(100% - 40px);
        left: 20px;
    }

    .flex-line.activities-line {
        display: block;
    }

    .time-pickers .flex-line {
        float: none;
        margin-top: 10px;
    }

    .tab-content {
        width: 100%;
        overflow-x: auto;
    }

        .tab-content.activities {
            height: calc(100% - 45px);
        }

    .sorba-grid {
        table-layout: fixed;
    }
}

.visibility-hidden {
    visibility: hidden;
}

.task-name.main.hidden {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.details-body.collapsed-buttons .task-header.editing #summary-edit {
    margin-left: 5px;
    max-width: 30%;
    overflow: hidden;
    text-wrap: nowrap;
    margin-left: 25px;
}

.details-body.collapsed-buttons .task-header .icon-confirm-edit, .details-body.collapsed-buttons .task-header .icon-cancel-edit {
    vertical-align: top;
}

@media(max-width: 350px) {
    .details-body .fields {
        overflow-y: hidden;
    }

    .tab-content.activities {
        height: calc(100% - 65px);
    }

    .header-area .current-domain {
        display: none;
    }

    .sorba-grid {
        display: block;
    }

        .sorba-grid tr {
            display: list-item;
            border: none;
            border-top: 2px solid #E3ECF3;
        }

        .sorba-grid th {
            display: inline-block;
            margin-top: 2px;
            margin-bottom: 2px;
        }

        .sorba-grid td {
            display: block;
            border: 0;
        }
}

.paging {
    position: relative;
}

    .paging .prev-btn {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #f3f6fa;
        background-image: url('/css/images/icon-arrow-left.svg');
        background-repeat: no-repeat;
        background-size: 22px;
        background-position: center;
        cursor: pointer;
        opacity: 0.55;
    }

    .paging .next-btn {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #f3f6fa;
        background-image: url('/css/images/icon-arrow-right.svg');
        background-repeat: no-repeat;
        background-size: 22px;
        background-position: center;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        opacity: 0.55;
    }

        .paging .prev-btn:hover, .paging .next-btn:hover {
            opacity: 1;
        }


.details-body .fields .field .input textarea.information-box {
    border-bottom: 0px;
}

.details-body .fields:not(.locked) .field:not(.locked) .input > textarea.information-box:hover {
    background-color: #F6F8FA;
    cursor: default;
}

.pdf-hider {
    position: absolute;
    left: 50px;
    top: 30px;
    width: 200px;
    height: 40px;
    background: #323639;
}

.activity-task .content-part .sorba-dropdown-items {
    right: 11px;
    top: 55px;
    left: unset;
}


.nested-nav .task-wrapper {
    min-width: unset;
}

.nested-nav .activity-task .content-part .task-description {
    padding-right: 100px;
}

.pdf-controls {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 2px;
    padding-top: 1px;
    background: white;
    border-top: 1px solid #e3ecf3;
    border-bottom: 1px solid #e3ecf3;
    position: relative;
    margin-bottom: 1px;
}

.control.print {
    position: absolute;
    top: 1px;
    left: calc(50% + 30px);
    font-size: 14px;
    padding: 2px 5px;
}

.doc-close {
    position: absolute;
    right: 10px;
    top: 0px;
    cursor: pointer;
    display: block;
    width: 19px;
    height: 19px;
    background: url(/css/images/icon-x-hovered.svg);
    background-repeat: no-repeat;
    background-size: 19px;
    z-index: 9999;
}

    .doc-close.pdf {
        right: 10px;
        top: 24px;
    }


    .doc-close.pdf {
        position: absolute;
        right: 1.5rem;
        top: 3px;
        font-size: 12px;
        color: #495d70;
        padding-left: 20px;
        background: url('/css/images/times-square_red.svg') no-repeat;
        background-position: 2px center;
        background-repeat: no-repeat;
        background-size: 14px;
        cursor: pointer;
        width: unset;
        height: unset;
    }

        .doc-close.pdf:hover {
            font-family: "Outfit Medium";
        }

#direct-view .doc-close.pdf {
    right: 20px;
    top: 5px;
}

.doc-confirm-signature {
    position: absolute;
    right: 60px;
    top: -27px;
    cursor: pointer;
    display: block;
    width: 60px;
    height: 26px;
    background: url(/css/images/sb-icon-check.svg);
    background-repeat: no-repeat;
    background-size: 17px;
    background-position: center center;
    z-index: 9999;
    border: 1px solid #e3ecf3;
    border-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: white;
}

    .doc-confirm-signature:hover {
        border-color: transparent;
        background-color: #EDF8FF;
    }

    .doc-confirm-signature:active {
        border-color: #e3ecf3;
    }

.doc-remove-signature {
    position: absolute;
    right: 0px;
    top: -27px;
    cursor: pointer;
    display: block;
    width: 60px;
    height: 26px;
    background: url(/css/images/sb-icon-trash.svg);
    background-repeat: no-repeat;
    background-size: 17px;
    background-position: center center;
    background-color: white;
    z-index: 9999;
    border: 1px solid #e3ecf3;
    border-radius: 3px;
    border-left: 0;
    border-top-left-radius: 0;
}

    .doc-remove-signature:hover {
        border-color: transparent;
        background-color: #EDF8FF;
    }

    .doc-remove-signature:active {
        border-color: #e3ecf3;
    }

.control.print > * {
    opacity: 0.8;
}


.control.print:hover {
    background: #edf8ff;
    padding: 2px 5px;
    border-radius: 5px;
    cursor: pointer;
}

.control.pages input {
    width: 20px;
    text-align: center;
    height: 16px;
    color: #495d70;
    border: 1px solid #d1dbe2;
    border-radius: 4px;
    outline: 0;
}

.control.zoom input {
    width: 40px;
    text-align: center;
    height: 23px;
    color: #495d70;
    border: 1px solid #d1dbe2;
    border-radius: 4px;
    outline: 0;
}

.pdf-controls .control {
    display: flex;
    gap: 5px;
    align-items: center;
}

    .pdf-controls .control.pages {
        color: #495d70;
    }

    .pdf-controls .control.hidden {
        display: none;
    }

.pdf-controls .icon-download {
    cursor: pointer;
    display: inline-block;
}

.control.download-file {
    position: absolute;
    top: 1px;
    left: 50%;
    font-size: 14px;
    padding: 2px 5px;
}

    .control.download-file > * {
        opacity: 0.8;
    }


    .control.download-file:hover {
        background: #edf8ff !important;
        padding: 2px 5px !important;
        border-radius: 5px !important;
        cursor: pointer;
    }


.control.signature {
    position: absolute;
    top: 2px;
    left: calc(50% - 30px);
    font-size: 14px;
    padding: 2px 5px;
}

    .control.signature > * {
        opacity: 0.8;
    }

    .control.signature:hover, .control.signature.active {
        background: #edf8ff;
        padding: 2px 5px;
        border-radius: 5px;
        cursor: pointer;
    }

.doc-icon-pencil {
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url('/css/images/sb-icon-pencil.svg');
    background-repeat: no-repeat;
    background-size: 19px;
}

.doc-icon-print {
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url('/css/images/sb-icon-print.svg');
    background-repeat: no-repeat;
    background-size: 19px;
}

.doc-icon-download {
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url('/css/images/sb-icon-download.svg');
    background-repeat: no-repeat;
    background-size: 19px;
}

.control.save {
    position: absolute;
    top: 8px;
    right: 110px;
    font-size: 14px;
}

    .control.save .oi {
        position: relative;
        top: -1px;
    }

.pdf-controls .download-file:hover, .pdf-controls .oi:hover, .pdf-controls .save:hover {
    background: #f6f8fa;
    border-radius: 8px;
}

.pdf-controls .input[type=number] {
    border: 1px solid #e3ecf3;
    width: 50px;
    text-align: center;
}

.pdf-controls .control-sep {
    border-right: 1px solid #495d70;
    width: 1px;
    height: 11px;
    margin-left: 5px;
    margin-right: 10px;
}