:host ::ng-deep .qms-bpmn-container {
    .bpmn__editor {
        width: 100%;
        height: 100%;
    }

    #leftpanel {
        float: left;
        width: calc(100% - 400px);
        height: 550px;
    }

    #rightpanel {
        float: right;
        width: 400px;
        height: 550px;
        border: solid;
        border-width: 0px 1px 1px 0px;

        .units {
            font-size: 12px;
        }

        .connection-wrapper {
            padding-bottom: 1.34375em;
            /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
            .mat-card-wrapper {
                padding-right: 0px;
            }

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

        ::ng-deep .mat-mdc-tab-group {
            height: 100%;
        }
        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
        ::ng-deep .mat-tab-disabled {
            cursor: not-allowed;
        }
    }

    #connection-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 398px;
        overflow-y: auto;
        background: #fff;
        overflow-y: auto;
        padding: 0 1rem;

        .shape__connect-type {
            padding: 1rem 0;

            .mat-mdc-radio-button.qms-group-options {
                margin-bottom: 1rem;
                border: 1px solid #e0e0e0;
                width: 100%;
            }
        }

        .mat-mdc-form-field {
            margin-left: 8px;
        }

        .mat-expansion-panel-header.mat-expanded {
            background-color: #eceff7;
            height: 40px !important;
        }

        .connect-link {
            margin-left: 0;
            width: 100%;
        }

        .reload-anchor {
            float: right;
            color: gray;
            height: auto;
            margin: 0;
            font-size: 12px;
        }

        .shape-connect__select-label {
            font-size: 16px;
            font-family: Open Sans;
            font-weight: 600;
        }

        .shape-connect__label {
            font-size: 14px;
            font-family: Open Sans;
            font-weight: 600;
        }

        .shape-connect__item-card {
            border: 1px solid #e0e0e0;
            padding: 10px 0;
            display: flex;
            align-items: center;
            border-radius: 4px;

            .qms-list-item.mat-2-line.image-item {
                height: auto;
            }

            .qms-list-item-content {
                padding: 0px !important;
                margin: 0px;

                .wrap-image {
                    background: transparent;
                    margin-right: 0;
                }
            }


            .connection-icon {
                height: 1.5rem;
            }

            .shape-connect__content {
                width: 80%;
            }

            .item-card__delete-btn {
                margin-left: auto;
            }

            .link-title {
                word-break: break-word;
            }
        }
    }

    .mat-icon {
        color: black;
    }

    .title {
        font-size: 16px;
        font-weight: bold;
    }

    #toolbarpanel {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin-bottom: 16px;
        height: 50px;
        width: 100%;
    }

    #paperpanel {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 400px;
        width: 100%;
    }

    #stencilpanel {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 150px;
        width: 100%;
    }

    /* LAYOUT */
    #toolbar-container {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    #paper-container {
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: inherit;
    }

    #inspector-container {
        position: relative;
        top: 0;
        right: 0;
        bottom: 0px;
        width: 100%;
        background: #ffffff;
        height: inherit;
    }

    #stencil-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 1174px;
        height: inherit;
    }

    #statusbar-container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 25px;
    }

    #panel-stencil-container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 150px;
        overflow-x: auto;
        overflow-y: hidden;
        background-image: url('../../../assets/images/panel-stencil-container-background-image.png');
        background-repeat: repeat;
        transition: all 0.5s ease-in-out 0s;

        .mat-expansion-panel-header-title {
            color: white;
        }

        .joint-theme-default {
            background: none;
        }

        .mat-expansion-indicator {
            &::after {
                color: white;
                transform: rotate(-135deg);
            }
        }

        .mat-expansion-panel-header {
            min-width: 1224px;
            max-width: 100%;
        }

        .joint-stencil>.content {
            width: 1200px;
        }
    }

    #toolbar-container {
        left: 0;
        color: white;
        position: absolute;
    }

    .joint-inspector.joint-theme-bpmn .group>.group-label {
        font-size: 15px;
        text-align: center;
        border: none;
        background: rgb(236, 239, 247);
        height: 40px;
        line-height: 40px;
        color: rgb(48, 48, 70);
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
        left: 0;
        padding: 5px 0 5px 0;
    }

    .joint-inspector.joint-theme-bpmn .group.closed>.group-label {
        background: rgb(236, 239, 247);
        height: 40px;
        line-height: 40px;
    }

    .joint-inspector.joint-theme-bpmn .list-item:nth-child(odd) {
        background: #ecefff;
        /*fallback*/
        background: -moz-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Firefox*/
        background: -webkit-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Chrome + Safari*/
        background: -webkit-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Another Chrome + Safari*/
        background: -o-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Opera*/
        background: -ms-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*IE10+*/
        background: linear-gradient(to left, #91a1c9 0%, #fafafa 100%);
        /*W3C standards*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFFF', endColorstr='#3571b0', GradientType=0);
        /*IE6-9*/
    }

    .joint-inspector.joint-theme-bpmn .list-item:nth-child(even) {
        background: #ecefff;
        /*fallback*/
        background: -moz-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Firefox*/
        background: -webkit-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Chrome + Safari*/
        background: -webkit-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Another Chrome + Safari*/
        background: -o-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*Opera*/
        background: -ms-linear-gradient(left, #ecefff 0%, #fafafa 100%);
        /*IE10+*/
        background: linear-gradient(to left, #91a1c9 0%, #fafafa 100%);
        /*W3C standards*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEFFF', endColorstr='#3571b0', GradientType=0);
        /*IE6-9*/
    }

    .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(odd) {
        background: #eceff7;
        /*fallback*/
        background: -moz-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Firefox*/
        background: -webkit-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Chrome + Safari*/
        background: -webkit-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Another Chrome + Safari*/
        background: -o-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Opera*/
        background: -ms-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*IE10+*/
        background: linear-gradient(to left, #eceff7 0%, #eceff7 100%);
        /*W3C standards*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eceff7', endColorstr='#eceff7', GradientType=0);
        /*IE6-9*/
    }

    //#eceff7
    .joint-inspector.joint-theme-bpmn .list-item .list-item:nth-child(even) {
        background: #eceff7;
        /*fallback*/
        background: -moz-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Firefox*/
        background: -webkit-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Chrome + Safari*/
        background: -webkit-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Another Chrome + Safari*/
        background: -o-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*Opera*/
        background: -ms-linear-gradient(left, #eceff7 0%, #eceff7 100%);
        /*IE10+*/
        background: linear-gradient(to left, #eceff7 0%, #eceff7 100%);
        /*W3C standards*/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eceff7', endColorstr='#eceff7', GradientType=0);
        /*IE6-9*/
    }

    .joint-inspector.joint-theme-bpmn .list-item {
        border-radius: 10px;
        box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

    .joint-inspector.joint-theme-bpmn label {
        color: #7f8c8d;
    }

    .joint-inspector.joint-theme-bpmn .btn-list-add {
        position: relative;
        left: 110px;
        background: #5799da;
        border: 2px solid #0a468e;
    }

    .joint-inspector.joint-theme-bpmn .btn-list-add,
    .joint-inspector.joint-theme-bpmn .btn-list-del {
        background: #5799da;
        height: 25px;
        color: black;
    }

    .joint-inspector.joint-theme-bpmn textarea {
        width: 350px;
        max-width: 350px;
    }

    .joint-inspector.joint-theme-bpmn input[type='color'],
    .joint-inspector.joint-theme-bpmn input[type='range'] {
        width: 171px;
    }

    .joint-inspector.joint-theme-bpmn .list {
        line-height: 0.5;
    }

    .joint-inspector.joint-theme-bpmn .list .select {
        margin-top: 5px;
    }

    .joint-inspector.joint-theme-bpmn .list label,
    .joint-inspector.joint-theme-bpmn .list output,
    .joint-inspector.joint-theme-bpmn .list .units {
        text-align: end;
        margin-right: 4px;
        margin-top: 16px;
        color: black;
    }

    .joint-inspector.joint-theme-bpmn .list-item input {
        width: 50%;
        float: right;
    }

    .joint-inspector.joint-theme-bpmn .list-item .input-wrapper input {
        width: 70%;
        float: none;
    }

    .joint-inspector.joint-theme-bpmn input {
        width: 55%;
    }

    .range-field {
        height: 40px;
        margin-bottom: 15px;
    }

    .joint-paper-scroller {
        overflow: hidden;
    }

    .breadcrumb-container .qms-breadcrumb-item {
        cursor: inherit;
        line-height: 16px;
        font-size: 0.75rem;
        color: black(0.6);
        font-weight: 400;
        line-height: 22px;
        margin: 0;
    }

    .joint-inspector.joint-theme-bpmn .list-item .field {
        padding: 0;
    }

    .joint-inspector.joint-theme-bpmn .field {
        padding: 10px;
    }

    .joint-inspector .group {
        overflow: hidden;
        padding: 0 0 10px;
    }

    .joint-widget.joint-theme-default[data-type="undo"]:after {
        content: '';
    }

    .joint-widget.joint-theme-default[data-type="redo"]:after {
        content: '';
    }

    .joint-toolbar.joint-theme-bpmn button[data-name="fullscreen"]:before,
    .joint-toolbar.joint-theme-bpmn button[data-name='deleteTemplate']:before,
    .joint-toolbar.joint-theme-bpmn button[data-name='resetToTempTemplate']:before,
    .joint-toolbar.joint-theme-bpmn button[data-name='saveAsTemplate']:before {
        width: 40px;
        height: 20px;
        background-color: transparent;
        position: absolute;
        top: 27px;
        left: 0;
    }

    .joint-toolbar.joint-theme-bpmn button[data-name='saveAsTemplate']:before {
        content: attr(data-before);
    }

    .joint-toolbar.joint-theme-bpmn button[data-name='saveAsTemplate']:after {
        background-image: url('data:image/png;base64,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');
        background-size: 20px 20px;
        background-position: 11px -3px;
    }

    .joint-toolbar.joint-theme-bpmn button[data-name='deleteTemplate']:before {
        content: attr(data-before);
    }

    .joint-toolbar.joint-theme-bpmn button[data-name='deleteTemplate']:after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFboAABW6AWAVsncAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAACP0lEQVQ4T5VSS2gTURS9plYNbSZJm+Anbcyk1rpJEMRFFxKEIkg/ahGkTU3tRtKP4qdZiNYPEUGLH+iiooJbdSfFnbh0VVwILuafNEnTNNpoiwlo0+ObZIq2WIkHDufd+865c2cY+hueE9kkoqhWR7K6s7rIVJCJxsaJagzLhtikOk2R9JGDSmYoVMzejCB75xp0zYSDy+mAT5RtdN7wrsU0kTXe7HhbvDCAwpNHyD2dwMLjh1iYfFDS3LMJFCbvYzncA63JPvWeyGxEiV4RVcnu2nfLQ0Fk797A/PXLmB+7tI4XS/3P7L44HITg4aaMOJHgNI3mD/sxNxpGeji0MUf6kT53BpnIIArtrRAcprMUd1vtomtbci7gQ7K3o8xg5+/zat3TjkR3G2Y6DyFx6ii+nGyDuLtWIMm1NSo7CGI9QdpeBdldA6XFCdXfAG2/G6rPBWWvA3KjGSLzCTbm27EZCvOxzE+S/I0JjT1B6e+G0ncMSrALSi+rdS2RnY1aPX0cauhE2aezt2OFYl0BpL7nMQv8N1OLSyC5dZ8Wv30VsfEoYvduVU7m16JXVkjctWVMqmPfgL2baK+cUll/ULal3iJ6LPGk1wqR5yBVQN0322SF5OE+lf4D1hz5toc11hn/xa+632MJlQboED3cm8Xm8pCNNlntLzGfyFteGtEyZhrIrHm51/rkFFtP/iOoU6/1tXPsXuEtL6YPULURXQuN5wYTPPdR4bkCCxYZV3RVeS6f8HIfNK9lwLAyEP0ClVT9dLc5lCAAAAAASUVORK5CYII=');
        background-size: 20px 20px;
        background-position: 11px -1px;
    }

    .joint-toolbar.joint-theme-bpmn button[data-name='resetToTempTemplate']:before {
        content: attr(data-before);
    }

    .joint-toolbar.joint-theme-bpmn button[data-name='resetToTempTemplate']:after {
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJ3SURBVEiJrdZLaxRmFAbgZ8aJpkPFjahJVELAhQvFKw1atBShatSioCKI4kLBe6t46+0XlFJEUmtdCFoEXWi9gIKIEo330EL/gK1acKdgA2LRxTmpE3Um0XhgmMP3nXnf79yngIlYg/M4p7eMxhLMR0OedaOMu7iAE/hLDfkDC9CFkXnWgIPowKYK8EppwLok+QVjqxHczu+9mInP8ScW5vlgzMYe/IgfsC1ti2kzD9fzob2kVKE/wnYMwUd4ip1Yhav5uY7/MAar8VN6uh+d+BXN2PcmD7aJPNSnuzfwbRJWk3J61pmkg3AaiyqNbqGQwCW0iLxMETlZjsk1SKTHXUkyLB89qufyEoamPjgJz4qQXMB36U1/SK4mRptIPDiFptQn4BCW5kt6pB2L+yCAr7A59ctohMMY/4rhB6L22/G7SFpJ31IW4S1iPTaWcB8z8CRB20SNX8QxbMGzfoDDv7iJVpwRVWZEAv2W7rX0E6yarBQVCbdLeIhlAwStlHuYlPqgYi3Ld5QCnqfeXRTxPi7CNPw9EDThn9RLRTEeToty/eY9EHyCa2JkPCgmWx2O5mX9AMDLmCYac45oVI2im+FL7B4AwdfYmPoVsU8Q3TtPtHknpr4DeGuC1uEz/Fx52YQ7Yjw0i8H1NiSt+ZvR+FAMuzGvGi0Wya5LkmvYpXZOyiIsHQk+RIz8/xdP5Xw5kawnxYieha1iyXQK9/8Wc2Zs3k/HAXyaLz8uqvFMLXeXiQHXszLr8DF2iHX5Pb4QYelp1Llizb62MqtJI46k6xu8eaGPw1ox3PZ7+YehlxT6IGrCCtEfzWKqFsT+fixCcQoPqgG8AFOaft796x2HAAAAAElFTkSuQmCC');
        background-size: 20px 20px;
        background-position: 11px -1px;
    }

    .joint-toolbar.joint-theme-bpmn button[data-name="fullscreen"]:after {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAABLklEQVRIS+2UPUtCYRiGj2v9AEfJpYQ+0KHFxjYnJxe3IHCqH9Hu5C8J+gEtBYq0WLg52NaHoFgEnuP1vNyJgi7ve1qqCy7O+zw83M85x4/onx8hSZJ8HMd3+IYvS77iM15p1B9CjvGBZSvQm2JTY2EQtIs9ZTvSXlDBT2U7UllAzhYhZ/il0BkOUltAwD4uXg3nG7TP5BY/MPwVkXuu8DbuWI9rAbvYckOh2BLCSiod1EX6pyp/EzxalkfbU+mgt41H9DNq+UNQjaAOnqhlvQb28SJ4CSF1QkZcH9G+hlWc0XNwvtSoHwTU8V1hTzhxycD5Hg806gcBiwXfUBvXmNOYP4SsWzDEskbCWLfAoGf/+4ca84eQGtodT3C8pNU9XPnFesENZzapkT9HFM0BetrUm3SgdX8AAAAASUVORK5CYII=");
    }

    .joint-inspector.joint-theme-bpmn .toggle span i {
        background: #1a9af3;
        border-radius: 5px;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

    .joint-inspector.joint-theme-bpmn .toggle span i:before {
        text-shadow: none;
        right: 115%;
        font-style: normal;
        font-weight: 700;
        color: white;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 14px;
        position: absolute;
        top: 8px;
    }

    .joint-inspector.joint-theme-bpmn .toggle span i:after {
        text-shadow: none;
        right: 115%;
        font-style: normal;
        font-weight: 700;
        color: rgba(0, 0, 0, 0.4);
        font-family: Helvetica, Arial, sans-serif;
        font-size: 14px;
        position: absolute;
        top: 8px;
    }

    .joint-selection.joint-theme-bpmn .selection-wrapper {
        display: block;
    }

    .no-result-connection {
        height: 100%;
        flex-direction: column;
        display: flex;
        transform: none;
        align-items: center;
        justify-content: center;
        
    }

    .button-add {
        width: 359px; 
        margin: 20px 20px 0px 20px;

        .add-icon {
            color: var(--primary);
        }
    }

    .have-result-connection {
        height: 100%;
        flex-direction: column;
        display: flex;
        transform: none;
    }

    .mat-expansion-panel-header:hover:not(:hover .description-edit) {
        background-color: transparent !important;
    }

    .mat-expansion-panel-header {

        .mat-content {
            display: block;
            .description-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        }

        .default-subtitle {
            font-family: Open Sans;
            font-size: 16px;
            font-weight: 600;
            line-height: 28px;
            color: #0163B2;
        }
    }

    .connection-content-body {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .mat-mdc-menu-item {
            width: initial;
        }

    }

    .edit-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }



    .custom-mat-form-field {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-flex {
            padding-left: 12px;
        }
        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
        .mat-select-arrow {
            display: none;
        }
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
        .mat-form-field-wrapper {
            padding-bottom: 0px;
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-flex {
                border-bottom: none;
                background-color: transparent;
            }
            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
            .mat-form-field-flex:hover {
                background-color: transparent;
            }

        }
    }

    .target-wrapper {
        padding-left: 10px;
        padding-bottom: 8px;
    }

    .qms-list-item-content {
        margin-left: 0px;
        height: auto;
        margin-right: 0px;
    }

    .wrap-image.image-square {
        background-color: transparent;
        margin-right: 0px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .qms-list-text {
        justify-content: center;
        border-bottom: none;
    }

    .mat-expansion-panel-body {
        padding-left: 0px;
        padding-right: 0px;
    }

    .qms-btn-icon {
        height: auto;
    }

    .connection-item-container, .content-item-container {

        .related-item-wrapper {
            display: flex;
            border: 1px solid #E0E0E0;
            border-radius: 4px;
            margin-bottom: 8px;
            align-items: center;

            .trailing-box {
                border-bottom: none !important;
                margin: unset;
                padding: unset;
                align-items: center;
            }

            .custom-anchor {
                display: flex;
                padding: unset;

                .custom-delete-btn {
                    margin-left: 0px;
                }
            }
        }

        .qms-list-item.image-item .qms-list-text {
            border-bottom: none !important;
        }

        .mat-expansion-panel.qms-expansion {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }

        .qms-list-item {
            height: unset;
            margin-left: 0px;
        }
    }

    .connection-item-container {
        .mat-expansion-panel-body {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }
    }

    .active-anchor {
        color: var(--primary);
    }

}

::ng-deep .stencil-paper-drag {
    z-index: 10000;
}

::ng-deep {

    .group-action-member{
        width: 359px;
        max-width: 359px !important; 
        margin-left: 20px !important;
    }

    .mat-expansion-panel-header .mat-expansion-indicator::after {
        color: #0163B2;
    }

    .custom-mat-form-field .mat-mdc-form-field:hover {
        background: none;
    }

    .mat-mdc-menu-panel {
        width: auto;
    }

    .mat-select-search-inside-mat-option .mat-select-search-input {
        border-bottom: 1px solid rgba(0, 0, 0, 0.38);
        margin: 0.25rem;
        background-color: rgba(0, 0, 0, 0.04);
        border-radius: 4px;
    }
}

.activity-attachment__attachment-list {
    .custom-attachment-margin {
        margin: 16px 0px 16px 0px;
    }

    .qms-scrollable-attachment-list {
        .qms-list-item.mat-2-line.image-item {
            height: 64px;
            .qms-line,
            .subtitle {
                -webkit-line-clamp: 1;
            }

            .subtitle:last-child {
                padding: 2px;
            }

            .subtitle {
                font-weight: 600;
                font-size: 16px;
                word-break: break-word;

                .qms-btn-text {
                    &:focus,
                    &:focus-visible {
                        &::after {
                            animation: none;
                        }
                    }
                }
            }

            .qms-btn {
                padding: 0px 8px;
                color: white;
            }

            .qms-btn-icon {
                height: 1.5rem;
                width: 1.5rem;
                line-height: 1.5rem;
            }
        }
    }

    .mat-mdc-dialog-actions {
        padding: 8px 0px 0px 0px;
    }

    .qms-list-text {
        height: 56px;
        border-bottom: 1px solid var(--other-divider) !important;
    }
    ::ng-deep .qms-list-header {
        height: 56px;
        border-bottom: 1px solid var(--other-divider) !important;
    }

    .attachment-ion {
        width: 56px;
        height: 56px;
        background-color: #fff;
    }
}

.qms-badges-container{
    margin-right: 15px;
    display: flex;
    ::ng-deep .qms-badges-circle-large {
        border: 1px double;
    }
    ::ng-deep .text-color-white {
        color: #808080 !important;
        font-weight: 600;
    }
    
}