:root {
    --form-visibility-settings-block-img-size: 26px;
}

#form-visibility-settings-master-modal {
    max-width: 360px;
    padding: 16px;
}

#form-visibility-settings-master-modal .modal-header {
    margin-bottom: 10px;
}

#form-visibility-settings-master-modal-wrp {
    display: flex;
    width: 100%;
    flex-direction: column;
}

#form-visibility-settings-master-modal-layout,
#form-visibility-settings-master-modal-non-public-details-wrp {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 14px;
}

#form-visibility-settings-master-modal-state-wrp {
    display: table;
    width: 100%;
}

#form-visibility-settings-master-modal-non-public-details-wrp {
    display: none;
}

.form-visibility-settings-master-modal-non-public-details-show {
    display: flex !important;
}

#form-visibility-settings-master-modal-tools-wrp {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    margin-top: 4px;
}

#form-visibility-settings-master-modal-errors-wrp {
    display: none;
    width: 100%;
}

.form-visibility-settings-master-modal-errors-show {
    display: table !important;
}

#form-visibility-settings-master-modal-errors-txt {
    color: var(--color-text-red);
    font-size: 14px;
    letter-spacing: 0.4px;
}

/* blocks */


.form-visibility-settings-blocks-grid-content {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.form-visibility-settings-blocks-grid-title {
    display: block;
    color: var(--color-text);
    font-size: 12.5px;
    letter-spacing: 0.5px;
    width: 100%;
    margin-bottom: 3px;
}

.form-visibility-settings-blocks-grid-layout {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.form-visibility-settings-block-wrp {
    display: table;
    width: 100%;
}

.form-visibility-settings-block-btn {
    display: flex;
    width: 100%;
    background-color: var(--color-block-modal);
    flex-direction: column;
    text-align: left;
    border-radius: 8px;
    padding: 9px;
    gap: 6px;
    -webkit-transition: background-color 0.15s;
    -moz-transition: background-color 0.15s;
    -ms-transition: background-color 0.15s;
    -o-transition: background-color 0.15s;
    transition: background-color 0.15s;
}

.form-visibility-settings-block-btn:not(:disabled):hover,
.form-visibility-settings-block-btn:not(:disabled):focus {
    background-color: var(--color-block-modal-hover);
}

.form-visibility-settings-block-btn:disabled {
    cursor: default;
}

.form-visibility-settings-block-header {
    display: flex;
    width: 100%;
    min-height: var(--form-visibility-settings-block-img-size);;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 8px;
}

.form-visibility-settings-block-title-wrp {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: row;
    gap: 8px;
}

.form-visibility-settings-block-value-wrp {
    display: table;
    flex: 0;
}

.form-visibility-settings-block-btn:disabled .form-visibility-settings-block-title-wrp,
.form-visibility-settings-block-btn:disabled .form-visibility-settings-block-value-wrp {
    opacity: 0.5;
}

.form-visibility-settings-block-img-wrp {
    display: table;
}

.form-visibility-settings-block-img-wrp img {
    height: var(--form-visibility-settings-block-img-size);
    width: var(--form-visibility-settings-block-img-size);
    border-radius: 5px;
}

.form-visibility-settings-block-title-txt,
.form-visibility-settings-block-value-txt {
    font-size: 14.5px;
    letter-spacing: 0.4px;
    line-height: 1.35;
}

.form-visibility-settings-block-btn .form-visibility-settings-block-value-txt {
    white-space: nowrap;
    color: var(--color-text-75);
    -webkit-transition: color 0.15s;
    -moz-transition: color 0.15s;
    -ms-transition: color 0.15s;
    -o-transition: color 0.15s;
    transition: color 0.15s;
}

.form-visibility-settings-block-btn:hover .form-visibility-settings-block-value-txt,
.form-visibility-settings-block-btn:focus .form-visibility-settings-block-value-txt {
    color: var(--color-text);
}

.form-visibility-settings-block-btn:disabled .form-visibility-settings-block-title-txt,
.form-visibility-settings-block-btn:disabled .form-visibility-settings-block-value-txt {
    color: var(--color-text-50);
}

.form-visibility-settings-block-desc-wrp {
    display: table;
    width: 100%;
}

.form-visibility-settings-block-desc-txt {
    color: var(--color-text-50);
    font-size: 13.5px;
    letter-spacing: 0.3px;
    line-height: 1.5;
}