.editable {
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        color: #03a0e7;
    }
}

.action-btn-wrapper {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 35px;
}

.fancy-label {
    font-size: 14px;
    font-family: "Usual-Medium";
    font-weight: 500;
}

.align-form-control-row {
    height: 50px;
    padding: 13px 0;
}

p-multiSelect {
    padding: 13px 12px 8px 12px;
    display: block;
    height: 40px;
    border-bottom: 1px solid #bdbdbd;

    ::ng-deep {
        .ui-multiselect-label {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}

p-dropdown {
    ::ng-deep {

        .ui-dropdown {
            width: 100% !important;
        }

        .dropdown-text {
            top: 0;
            font-size: 14px;
            margin-top: 4px;
            position: absolute;
            left: 30px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-family: "Usual-Medium";
            font-weight: 500;
        }
    }
}

p-inputMask {
    ::ng-deep {
        input {
            width: 100%;
            height: 100%;
        }
    }
}

::ng-deep {
    input, p-inputMask {
        &.ng-invalid {
            &.ng-touched, &.errorBlock {
                border: 1px solid red;
            }
        }
    }

    p-dropdown {
        &.ng-invalid {
            &.ng-touched > .ui-dropdown, &.errorBlock > .ui-dropdown {
                background-image: linear-gradient(to bottom, rgba(3, 160, 231, 0.5), rgba(3, 160, 231, 0.5)), linear-gradient(to bottom, red, red) !important;
            }
        }
    }

    .ui-orderlist-controls {
        display: none !important;
    }

    .ui-orderlist-list-container {
        width: 100%;
        border: 0;

        .ui-orderlist-caption {
            border: 0;
        }

        .ui-orderlist-list {
            border: 0;
            height: auto;

            .ui-orderlist-item {
                cursor: auto;
                min-height: 50px;

                &:hover {
                    background-color: transparent !important;
                    color: #4e5258 !important;
                }
            }

            .ui-state-highlight {
                background-color: transparent !important;
                color: #4e5258 !important;
            }
        }
    }

}

.drag-block {
    cursor: pointer;
}

.templateName {
    label, input {
        font-size: 24px;
        text-align: center;
    }
}

.interactive {
    cursor: pointer;
}

label {
    font-family: "Usual-Regular";
    font-weight: 300;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.calcField {
    position: relative;
    top: -5px;
}


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


.panel-header-input {
    width: 95%;
    display: inline-block;
    position: relative;
    top: -8px;
    background: #fff;
}

.edit-message-template {
    ::ng-deep {
        .ui-dialog {
            .ui-dialog-titlebar {
                display: none;
            }

            .ui-dialog-content {
                padding: 0 !important;

                .message-template-form {
                    padding: 0 !important;
                }

                .main-tab-template {
                    height: 50px;
                }
            }
        }

        .ui-dialog {
            &.ui-dialog-draggable {
                left: 130px !important;
                right: 130px !important;
                overflow-y: scroll;
                height: 92% !important;
            }
        }
    }
}

.disable-drop {
    pointer-events: none;
}

.business-hours {
    display: flex;
    margin-top: 39px;
}

.separator {
    width: 98%;
    background: #4E5258;
    display: flex;
    height: 5px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

.h-60 {
    height: 60px;
}

.mb-10 {
    margin-bottom: 10px;
}

.text-right {
    text-align: right !important;
}
