/* Toolbar bottom buttons placeholder */
.envelope-toolbar-placeholder {
    position: sticky;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    bottom: 0px;
    right: 0px;
    
    width: 100%;
    height: 56px;

    background: white;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
}
.envelope-toolbar-placeholder.at-bottom {
    border-color: white;
}

.envelope-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    box-sizing: border-box;

    width: 100%;
    max-width: 800px;
    gap: 24px;
}
@media (max-width: 800px) {
    .envelope-toolbar {
        margin-right: 20px;
        margin-right: 20px;
    }
}
@media (max-width: 600px) {
    .envelope-toolbar {
        justify-content: center;
        align-items: center;

        margin: 0px;
    }

    .envelope-toolbar .save-button-placeholder {
        margin: 0 !important;
    }
}

.envelope-toolbar > div[class$=placeholder] {
}
.envelope-toolbar .button {
    flex: 1;
    font-size: 12px;

    height: 35px;
    width: 125px;
    max-width: 125px;
}
.envelope-toolbar .save-button-placeholder {
    margin-right: 44px;
    position: relative;
}
.envelope-toolbar .next-button-placeholder {
    position: relative;
}
.envelope-toolbar .send-button-placeholder {
    position: relative;
}
.envelope-toolbar .button.save-button {
    margin-right: auto;
}
.envelope-toolbar .button.send-button {
    font-weight: 500;
    color: white;
}
.envelope-toolbar .button.send-button:hover {
}
.envelope-toolbar .button.next-button {
}
.envelope-toolbar .button.prev-button {
}
.envelope-toolbar .button-tooltip-placeholder, .envelope-toolbar .icon-tooltip-placeholder {
    position: absolute;
    top: 0px;
    left: 0px;
    
    width: 316px;
    height: 100%;
}

/* Envelope editor page */
.envelope-editor-page {
    overflow: scroll;
    overflow-x: hidden;
}
.envelope-editor-page .current-state {
    position: absolute;
    z-index: 99;

    top: 26px;
    left: 75px;

    font-weight: 500;
    font-size: 14px;

    color: #333;
}
.envelope-editor-page .page-content {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: start;

    height: 100%;
}
@media (max-width: 800px) {
    .envelope-editor-page .page-content {
        align-items: stretch;
    }
}


.envelope-editor-page .envelope-configuration {
    max-width: 800px;
    padding: 24px 0px;    

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
@media (max-width: 800px) {
    .envelope-editor-page .envelope-configuration {
        padding: 24px;
    }
}

.envelope-editor-page .title {
    font-size: 16px;
    font-weight: normal;
    color: black;
    padding-left: 15px;
}
.envelope-editor-page .title:not(:first-child) {
    margin-top: 32px;
}

.envelope-editor-page .envelope-name {
    margin: 16px;
    margin-top: 38px;
    margin-bottom: 0px;
}
.envelope-editor-page .envelope-name md-input-container {
    width: 100%;
    margin: 0;
}

.envelope-editor-page .pick-signature-type {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
@media (max-width: 800px) {
    .envelope-editor-page .pick-signature-type {
        flex-direction: column;
        gap: 0px;
    }
}


/* Signature type picker */
.envelope-editor-page .signature-type-picker {
    display: flex;
    align-items: start;
    justify-content: space-between;

    position: relative;
    width: 100%;
    
    border-radius: 20px;
    border: 1px solid lightgray;
    
    outline: none;
    box-sizing: border-box;
    
    cursor: pointer;
    
    margin-top: 16px;
    padding: 12px;
    gap: 8px;    
}
.envelope-editor-page .signature-type-picker.selected {
    background: rgba(92, 200, 255, 0.3);
}
.envelope-editor-page .signature-type-picker:not(.selected):hover {
    background: rgba(0, 0, 0, 0.03);
}

.envelope-editor-page .signature-type-picker .picker-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.envelope-editor-page .signature-type-picker .picker-image-placeholder {
}
.envelope-editor-page .signature-type-picker .picker-image {
    width: 42px;
    height: 42px;
}
.envelope-editor-page .signature-type-picker .picker-title {
    font-size: 12px;
    color: black;
}
.envelope-editor-page .signature-type-picker .picker-description {
    font-size: 10px;
    color: #555;
}
.envelope-editor-page .signature-type-picker .picker-checkbox {
    pointer-events: none;
}
.envelope-editor-page .signature-type-picker .picker-checkbox md-checkbox {
    margin: 0;
}

/* Document tag button */
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-name-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-name-container .document-name {
    flex: 1;
    min-width: 0;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-tag-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 25px;
    flex-shrink: 0;

    cursor: pointer;
    border-radius: 6px;
    background: #5cc8ff;
    transition: background 0.15s;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-tag-button:hover {
    background: #3ab5f0;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-tag-button md-icon {
    font-size: 13px;
    color: #fff;

    height: 13px;
    width: 13px;
    
    min-width: 13px;
    min-height: 13px;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-tag-button .document-tag-badge {
    position: absolute;
    top: -3px;
    right: -5px;

    background: #e53935;
    color: white;

    font-size: 8px;
    font-weight: 700;
    line-height: 1;

    width: 14px;
    height: 14px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Document tags section */
.envelope-editor-page .document-drop-list-container-item .document-tags-section {
    padding-top: 2px;
    padding-bottom: 6px;
}
.envelope-editor-page .document-drop-list-container-item .document-tags-section > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.envelope-editor-page .document-drop-list-container-item .document-tags-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.envelope-editor-page .document-drop-list-container-item .document-tags-label {
    font-size: 10px;
    font-weight: 500;
    color: #777;
    flex-shrink: 0;
}
.envelope-editor-page .document-drop-list-container-item .document-tag-chip {
    display: inline-flex;
    align-items: center;

    background-color: #f0f0f0;
    color: #555;

    font-size: 10px;
    font-weight: 600;

    height: 20px;
    border-radius: 4px;

    padding-left: 6px;
    padding-right: 4px;
    gap: 2px;
}
.envelope-editor-page .document-drop-list-container-item .document-tag-chip md-icon {
    font-size: 12px;
    height: 12px;
    width: 12px;
    min-width: 12px;
    min-height: 12px;
    color: #999;
    cursor: pointer;
}
.envelope-editor-page .document-drop-list-container-item .document-tag-chip md-icon:hover {
    color: #555;
}
.envelope-editor-page .document-drop-list-container-item .add-tag-button {
    display: block;
    width: 100%;
    box-sizing: border-box;

    background: white;
    border: 1px solid #1d71b8;
    border-radius: 8px;

    text-align: center;
    color: #1d71b8;

    font-size: 10px;
    font-weight: 500;

    padding: 6px;
    cursor: pointer;
}
.envelope-editor-page .document-drop-list-container-item .add-tag-button:hover {
    background: #f0f7ff;
}

/* Document upload section */
.envelope-editor-page .document-drop-container {
    margin-top: 32px;
    margin-bottom: 32px;
}
.envelope-editor-page .document-upload {
}
.envelope-editor-page .document-upload-box {
    min-height: 450px;
    height: auto;
}
.envelope-editor-page .document-upload-toolbar {
    width: 100%;

    display: flex;
    align-items: center;
    box-sizing: border-box;
    
    margin: 0;
    padding: 0;

    gap: 8px;
}
.envelope-editor-page .document-upload-toolbar .button {
    margin-right: 4px;
}
.envelope-editor-page .document-upload-toolbar .icon-button {
    position:relative;
}
.envelope-editor-page .document-upload-toolbar .cloud-picker-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 8px;
}
.envelope-editor-page .document-upload-toolbar .cloud-picker-buttons .button.icon-button img {
    width: 40px;
    height: 40px;
}
.envelope-editor-page .document-upload-toolbar .button.button-with-icon .button-icon {
    margin: 0;
}
@media (max-width: 600px) {
    .envelope-editor-page .document-upload-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .envelope-editor-page .document-upload-toolbar .button {
        margin-right: 0px;
        margin-bottom: 4px;
    }
    .envelope-editor-page .document-upload-toolbar .cloud-picker-buttons .button {
        width: 100%;
    }
}

.envelope-editor-page .document-upload-tips {
    width: 50%;
    margin: 24px 0px;
    margin-top: 0px;
}
.envelope-editor-page .document-upload-tips .document-upload-tip {
    padding-top: 8px;
}
.envelope-editor-page .document-upload-tips .document-upload-progress-tip {
    display: flex;
    flex-direction: row;
}
.envelope-editor-page .document-upload-tips .document-upload-progress-tip .min-progress {
    margin-right: 8px;
}
.envelope-editor-page .document-upload-tips .document-upload-progress-tip .max-progress {
    margin-left: 8px;
}
.envelope-editor-page .document-upload-tips .document-upload-progress-tip .current-progress {
    width: 100%;
    position: relative;

    display: flex;
    align-self: flex-end;
}
.envelope-editor-page .document-upload-tips .document-upload-progress-tip .current-progress .progress {
    position: absolute;
    top: -18px;
}
@media (max-width: 600px) {
    .envelope-editor-page .document-upload-tips {
        width: 100%;
    }
}

.envelope-editor-page .document-drop-list-container {
    position: relative;
    
    display: flex;
    flex-direction: column;
    flex: 1;

    border: 2px dashed #d3d3d3;
    border-radius: 4px;
    
    width: 100%;
    height: 100%;

    padding: 12px 8px;
}
.envelope-editor-page .document-drop-list-container-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px;
    background: #afc0c91f;
    border-radius: 8px;
    position: relative;
    gap: 24px;
}
.envelope-editor-page .document-drop-list-container-item:not(:last-child) {
    margin-bottom: 8px;
}
@media (max-width: 768px) {
    .envelope-editor-page .document-drop-list-container-item {
        flex-direction: column;
        gap: 8px;
    }
}

.envelope-editor-page .document-drop-list-container-item .document-delete-button-placeholder {
    position: absolute;
    z-index: 0;
    
    top: -6px;
    right: -10px;

    width: 20px;
    height: 20px;

    display: block;
}
.envelope-editor-page .document-drop-list-container-item .document-delete-button-placeholder .document-delete-button {
    width: 20px;
    height: 20px;

    background: white;
    border-radius: 50%;

    display: block;
}
.envelope-editor-page .document-drop-list-container-item .document-delete-button-placeholder .document-delete-button md-icon {
    width: 18px;
    min-width: 18px;

    height: 18px;
    min-height: 18px;

    font-size: 18px;
}

.envelope-editor-page .document-drop-list-container-item .document-item-properties {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    padding-bottom: 4px;
    gap: 8px;
    width: 100%;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties.document-status-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property {
    font-weight: 500;
}

.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-name {
    background: white;
    border-radius: 8px;

    display: flex;
    align-items: center;

    height: 25px;
    padding-left: 8px;

    font-size: 10px;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-name input {
    font-weight: 500;
    border: transparent;
    width: 100%;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-name input:focus {
    outline-color: transparent;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .document-name md-icon {
    height: 14px;
    min-height: 14px;
    
    width: 14px;
    min-width: 14px;
    
    margin-right: 8px;
    font-size: 14px;
}

.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-property .link {
    font-size: 10px;
    font-weight: 500;
}

.envelope-editor-page .document-drop-list-container-item .document-item-properties .custom-select-container {
    border-radius: 8px;
    background: white;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .custom-select-container .selected-option {
    border: none;
    
    padding-left: 8px;
    font-size: 10px;

    height: 20px;
    min-height: 20px;
}

.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-progress-status {
    text-align: right;
    font-weight: 500;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-progress-status .success md-icon {
    color: #1d71b8;
    font-size: 14px;
    
    height: 14px;
    width: 14px;
    min-width: 14px;
    min-height: 14px;

    margin: 0;
    margin-left: 8px;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-progress-status .error md-icon {
    color: rgb(226 0 0);
    font-size: 14px;
    
    height: 14px;
    width: 14px;
    min-width: 14px;
    min-height: 14px;

    margin: 0;
    margin-left: 8px;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-progress-status .success {
    font-size: 10px;
    font-weight: 500;
    color: #1d71b8;
    
    width: 100%;
    text-align: right;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.envelope-editor-page .document-drop-list-container-item .document-item-properties .document-progress-status .error {
    font-size: 10px;
    font-weight: 500;
    color: rgb(226 0 0);
    
    width: 100%;
    text-align: right;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.envelope-editor-page .document-drop-list-container-item md-progress-linear {
    height: 10px;

    margin-top: 6px !important;
    margin-bottom: 6px !important;
}
.envelope-editor-page .document-drop-list-container-item md-progress-linear .md-container .md-bar {
    height: 8px;
}
.envelope-editor-page .document-drop-list-container-item md-progress-linear .md-container {
    border-radius: 8px;
    height: 8px;
}
.envelope-editor-page .document-drop-list-container-item md-progress-linear.md-warn .md-bar {
    background-color: rgb(226 0 0);
}


/* Recipients configuration section */
.envelope-editor-page .recipients-configuration-placeholder {
    max-width: 800px;
    width: 100%;
}
.envelope-editor-page .recipients-configuration-placeholder form {
    width: 100%;
}
.envelope-editor-page .recipients-configuration-placeholder .recipients-configuration:not(:first-child) {
    margin-top: 0;
    padding-top: 0;
}
@media (max-width: 800px) {
    .envelope-editor-page .recipients-configuration-placeholder {
        padding: 0px 24px;
        box-sizing: border-box;
    }
}

.envelope-editor-page .documents-recipients-configuration {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    gap: 12px;

    margin-top: 24px;
    margin-bottom: 24px;

    box-sizing: border-box;
}
.envelope-editor-page .documents-recipients-configuration md-checkbox {
    width: 100%;
}
.envelope-editor-page .documents-recipients-configuration custom-select {
    width: 100%;

    border: 1px solid lightgray;
    border-radius: 8px;
}
.envelope-editor-page .documents-recipients-configuration .custom-select-container .selected-option {
    border-bottom: none;

    padding: 4px;
    padding-left: 12px;
}
.envelope-editor-page .documents-recipients-configuration-divider {
    width: 100%;
}
@media (max-width: 800px) {
    .envelope-editor-page .documents-recipients-configuration {
        flex-direction: column;
        align-items: stretch;
    }
}

.envelope-editor-page .recipients-configuration {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.envelope-editor-page .recipients-configuration .sender-placeholder {
    display: flex;
    flex-direction: column;

    width: 100%;
    box-sizing: border-box;
}
.envelope-editor-page .recipients-configuration .sender-placeholder label {
    width: 100%;
    font-size: 12px;
}
.envelope-editor-page .recipients-configuration .sender-block {
    border: 1px solid #cacaca;
    border-radius: 5px;
    display: flex;
    margin-top: 10px;
}

.envelope-editor-page .sender-selector {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0;
    width: 100%;
    height: 100%;

    font-size: 10px;
}
.envelope-editor-page .sender-selector .custom-select-container .selected-option {
    border: none !important;
}
.envelope-editor-page .sender-selector .custom-select-container .selected-option span {
    opacity: 0;
}
.envelope-editor-page .sender-selector .custom-select-option-placeholder .sender-option-name {
    width:  0%;
}
.envelope-editor-page .sender-selector .custom-select-option-placeholder .sender-option-contact {
    width: 50%;
}

.envelope-editor-page .person-block-body {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 4px 16px;
    box-sizing: border-box;
    position: relative;
}
.envelope-editor-page .person {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
}
@media (max-width: 600px) {
    .envelope-editor-page .person {
        flex-direction: column;
        align-items: flex-start;
    }
}

.envelope-editor-page .person-block-menu-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ccc;
}
.envelope-editor-page .person-block-name {
    width: 100%;
    font-size: 10px;
    padding-right: 10px;
}
.envelope-editor-page .person-block-contact {
    width: 100%;
    font-size: 10px;
    padding-right: 10px;
}

.envelope-editor-page .order-configuration-placeholder {
    display: flex;
    align-items: center;

    width: 100%;
    margin-top: 24px;
    box-sizing: border-box;
}
.envelope-editor-page md-checkbox.order-configuration-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}



/* Send document form */
.envelope-editor-page .send-document-form {
    width: 800px;
    padding: 24px 0px;
    
    display: flex;
    flex-direction: column;
    gap: 24px;
}
@media (max-width: 800px) {
    .envelope-editor-page .send-document-form {
        width: 100%;
        padding: 24px;
        box-sizing: border-box;
    }
}

.envelope-editor-page .send-document-form .form-block {
    border: 1px solid #cacaca;
    border-radius: 4px;
    
    display: flex;
    flex-direction: column;

    padding: 12px 16px;
    gap: 14px;
}
.envelope-editor-page .send-document-form .data-body {
    flex: 1;
    display: flex;
    flex-direction: column;

    gap: 4px;
}
.envelope-editor-page .send-document-form .data-block {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}
.envelope-editor-page .send-document-form .data-block .title {
    font-weight: 600;
    font-size: 12px;
    
    padding: 0;
}
.envelope-editor-page .send-document-form .data-block .label {
    font-size: 11px;
}

.envelope-editor-page .send-document-form .data-block .input-placeholder textarea:focus {
    border: 1px solid #5cc8ff;
}
.envelope-editor-page .send-document-form .data-block .input-placeholder textarea {
    min-height: 52px;
    
    font-size: 10px;
    padding: 2px 8px;
    box-sizing: border-box;

    border-radius: 4px;
    border: 1px solid #ccc;
    
    resize: vertical;
    outline-color: #5cc8ff;
}


.envelope-editor-page .send-document-form .recipients-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.envelope-editor-page .send-document-form .recipient-wrapper {
    position:relative;
}

.envelope-editor-page .send-document-form .recipient-header {
    position:relative;
    padding-left:20px;

    display: flex;
    align-items: center;
    gap: 12px;
}
.envelope-editor-page .send-document-form .recipient-header::before {
    content:"";
    position:absolute;
    
    left:0;
    top: 2px;

    width:8px;
    height:8px;

    border-radius:50%;
    background:#BBB;
}

.envelope-editor-page .send-document-form .recipient-children {
    position:relative;
    font-size: 10px;
    
    margin-top:12px;
    margin-left: 4px;
    
    padding-left: 16px;
}
.envelope-editor-page .send-document-form .recipient-children::before {
    content:"";
    position:absolute;

    left: -1px;
    top: -33px;
    bottom: 0px;
    
    width:1px;
    background:#DDD;
}
.envelope-editor-page .send-document-form .recipient-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    
    font-size: 10px;
    gap: 4px;
}
.envelope-editor-page .send-document-form .recipient-info-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.envelope-editor-page .recipients-configuration .recipient-info .recipient-info-name, 
.envelope-editor-page .recipients-configuration .recipient-info .recipient-info-contact {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



.envelope-editor-page .send-document-form .recipients-documents-list {
    display:flex;
    flex-direction:column;
    gap:16px;
}

.envelope-editor-page .send-document-form .documents-group {
    position:relative;
}
.envelope-editor-page .send-document-form .documents-group:before {
    content:"";
    position:absolute;
    
    left: 2.5px;
    top: 10px;
    bottom: 0px;
    
    width:1px;
    background:#DDD;
}


.envelope-editor-page .send-document-form .document-group-header {
    position:relative;
    padding-left:20px;
    font-weight:600;
}
.envelope-editor-page .send-document-form .document-group-header::before {
    content:"";
    position:absolute;

    left: -16px;
    top:50%;

    width:16px;
    height:1px;

    background:#DDD;
}
.envelope-editor-page .send-document-form .document-group-header::after {
    content:"";
    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:8px;
    height:8px;

    border-radius:50%;
    background:#BBB;
}


.envelope-editor-page .send-document-form .documents-group-body {
    margin-top: 0px;
    margin-left: 4px;
    padding-left: 16px;
    
    display: flex;
    flex-direction: column;
    
    gap: 6px;
    font-size: 10px;
}
.envelope-editor-page .send-document-form .documents-group-body:not(:last-child) {
    margin-bottom: 4px;
}


.envelope-editor-page .send-document-form .document-row {
    position:relative;

    display:flex;
    align-items:center;

    gap:12px;
}
.envelope-editor-page .send-document-form .document-name {
    flex:1;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


.envelope-editor-page .send-document-form .menu-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    
    height: 24px;
    padding: 0px 12px;
}
.envelope-editor-page .send-document-form .menu .md-icon-button {
    padding: 0px;
    margin: 0;

    width: 24px;

    height: 24px;
    min-height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
}
.envelope-editor-page .send-document-form .menu {
    width: 100%;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}
.envelope-editor-page .send-document-form .menu .md-button {
    margin: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    height: 32px;
    min-height: 32px;
}


md-menu-item.envelope-form-menu-headline {
    display: flex;
    align-items: center;
    padding: 0px 16px;
    font-weight: 500;
    height: 32px;
    min-height: 32px;
}
md-menu-item.envelope-form-menu-item{
    height: 32px;
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: 32px;
}
md-menu-item.envelope-form-menu-item .md-button {
    font-size: 11px;
    height: 34px;
    min-height: 34px;
    line-height: 34px;
    padding-left: 32PX;
}
md-menu-item.envelope-form-menu-item .md-button md-icon {
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
}


/* Signature placement section */
@media (max-width: 1280px) {    
    a.mobile-panel-toggle {
        position: absolute;
        z-index: 1;
        top: 8px;
        
        background: #1d71b8;
        
        padding: 10px;
        border-radius: 20%;

        height: 20px;
        max-height: 20px;

        width: 20px;
        max-width: 20px;
    }

    a.mobile-panel-toggle md-icon {
        font-size: 20px;
        line-height: 20px;
        
        height: 20px;
        min-height: 20px;
        max-height: 20px;

        width: 20px;
        min-width: 20px;
        max-width: 20px;
    }
    
    a.mobile-panel-toggle md-icon {
        fill: white;
        color: white;
    }
    
    a.mobile-panel-toggle.mobile-panel-toggle-left {
        left: 12px;
    }
    
    a.mobile-panel-toggle.mobile-panel-toggle-right {
        right: 12px;
    }

    @media (min-width: 1080px) {
        a.mobile-panel-toggle {
            margin: 2% calc(20% - 5vw);
        }

        a.mobile-panel-toggle.mobile-panel-toggle-left {
            left: -20px;
            top: -10px;
        }

        a.mobile-panel-toggle.mobile-panel-toggle-right {
            right: -20px;
            top: -10px;
        }
    }
    
}

.envelope-editor-page .place-signatures .pdf-info-wrapper.active {
    background-color: rgb(191 214 255 / 60%);
}
.envelope-editor-page .place-signatures .pdf-info-placeholder {
    padding: 12px;
    cursor: pointer;
}
.envelope-editor-page .place-signatures .pdf-info-placeholder .pdf-info {
    width: 100%;
    padding-left: 12px;
}
.envelope-editor-page .place-signatures .pdf-info-placeholder .pdf-info .pdf-name {
    font-size: 12px;
    font-weight: 500;

    padding-bottom: 4px;
}
.envelope-editor-page .place-signatures .pdf-info-placeholder .pdf-info .pdf-pages-count {
    font-size: 10px;
    font-weight: normal;
}

.place-signatures {
    width: 100%;
    height: calc(100vh - 193px);
    display: flex;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}
.place-signatures .drag-signers-menu {
    width: 300px;
    height: 100%;
    padding: 32px;
    box-sizing: border-box;
    background: #F6F6F6;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    flex: none;
    overflow-x: hidden;
}
.place-signatures .drag-signers-menu .title {
    font-size: 12px;
    line-height: 20px;
    color: rgba(0,0,0,0.87);
    width: 240px;
}
.place-signatures .blocks-list {
    display: flex;
    flex-direction: column;
    width: 240px;
    margin-top: 8px;
    padding-right: 14px;
    box-sizing: border-box;
}
.place-signatures .drag-signers-menu .block {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}
.place-signatures .drag-signers-menu .block .block-title {
    font-size: 10px;
    line-height: 20px;
    padding: 0px;
    color: rgba(0, 0, 0, 0.87);
}
.place-signatures .signers-list {
    margin-top: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.place-signatures .signer-placeholder {
    width: 100%;
    display: flex;
    position: relative;
    border: 1px solid #ccc;
    /* border-radius: 4px; */
}
.place-signatures .signer-placeholder .fold-button{
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
}
.place-signatures .signer-placeholder .fold-icon{
	
}
.place-signatures .signer {
    width: 100%;
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: 8px 8px 8px 0px;
    border-radius: 4px;
    box-sizing: border-box;
}
.place-signatures .signer.draggable {
    cursor: move;
}
.place-signatures md-icon.signer-icon {
    margin: 0;
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-right: 12px;
}
.place-signatures .signer-name {
    font-size: 8px;
    text-transform: uppercase;
    padding-right: 32px;
    box-sizing: border-box;
    flex: 1;
    margin: 0;
}

.place-signatures .add-signature-button, .place-signatures .add-form-field-button {
    width: 18px;
    height: 18px;

    min-width: 18px;
    min-height: 18px;

    line-height: 18px;
    flex: none;

    margin: 0;
    padding: 0;

    margin-right: 4px;
}
.place-signatures .add-signature-button md-icon, .place-signatures .add-form-field-button md-icon {
    font-size: 15px;
    
    width: 15px;
    min-width: 15px;
    
    height: 15px;
    min-height: 15px;
}


/* 1. Prevenir arrastre nativo del navegador y scroll en el contenedor */
.draggable {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* 2. Desactivar puntero SOLO en capas decorativas o etiquetas de texto 
   para que no interfieran al hacer clic para arrastrar */
.draggable .tag-name,
.draggable .signature-rect,
.draggable .tag-icon,
.draggable span {
    pointer-events: none;
}

/* 3. PERMITIR eventos explícitamente en los tiradores y botones de borrado */
.draggable .ui-resizable-handle,
.draggable .delete_signature,
.draggable .delete_field,
.draggable md-button {
    pointer-events: auto !important;
    touch-action: auto;
}