/* Copyright @ Balbooa, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/* ========================================================================
    New / Edit form page
 ========================================================================== */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/Roboto-Bold.ttf);
}

:root {
    --main-color: #66dab5;
    --input-background: #34374a;
    --cp-main-color: #566e78;
    --cp-button-bg: #404958;
    --dark-modal-bg: #2f3243;
}

body.com_baforms  {
    background: #f5f5f5;
    box-sizing: border-box;
    height: 100vh;

    margin: 0;
    overflow-x: hidden;
}

body {
    margin: 0;
    color: #495057;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

:focus,
select:focus,
input:focus {
    outline: none;
}

i.zmdi {
    font-size: 24px;
    cursor: pointer;
}

.subhead .btn:not([disabled]):active, 
.subhead .btn:not([disabled]):focus, 
.btn.btn-primary:not(:hover) {
    background-color: #fff;
    color: var(--template-text-dark);
    border-color: hsl(var(--hue),20%,80%);
}

.subhead .btn:not([disabled]):active>span, 
.subhead .btn:not([disabled]):focus>span,
.subhead .btn:not(:hover) > span {
    color: var(--subhead-btn-accent) !important;
}

a,
.modal a {
text-decoration: none;
}

#adminForm {
    display: block;
    margin: 0;
}

#condition-logic-modal .ba-settings-toolbar > div i,
.ba-modal-lg.modal.left-filter-modal .modal-header i,
.ba-settings-input-type .input-action-icon i,
.ba-settings-item.ba-settings-typography-toolbar-type > div i,
.modal-header-icon i,
.modal.ba-modal-md .ba-modal-header i,
.uploader-nav .control-toolbar i,
.ba-media-header > div > i,
.submissions-right-sidebar i,
.ba-sidebar span.zmdi {
    border-radius: 3px;
    box-sizing: content-box;
    padding: 8px;
    text-align: center;
    width: 24px;
}

.conditional-logic-checkbox .ba-form-checkbox > input[type="checkbox"],
.hidden-navigation-style .ba-form-page-navigation-wrapper,
.dots-navigation-style span.ba-form-page-navigation-title:first-child:after,
.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style) .ba-form-page-navigation-title:last-child:after,
.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style) .ba-form-page-navigation-title:first-child:before,
.ba-form-checkbox.cancel-sortable > input,
.modal-backdrop.hidden-modal-backdrop,
.cke_toolgroup a.cke_button:last-child:after,
.cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after,
.cke_button_label,
.ba-form-field-item:not(.element-in-sorting) ~ .empty-item,
.ba-work-area table.ba-items-list tbody tr td.select-td.loaded:before,
.ba-work-area table.ba-items-list tbody tr.ui-draggable-dragging td.select-td:before,
#ba-notification:not(.ba-alert) h4,
#ba-notification:not(.ba-alert) i,
.ba-custom-select ul li.selected:before,
.ba-hide-checkbox input[type="checkbox"],
.ba-hide-element,
.com_baforms header.header,
#system-message-container {
    display: none;
}

.ba-modal-sm a.ba-btn-primary:before,
.ba-sidebar a,
.ba-sidebar div > span,
body > .ba-tooltip,
.ba-alert h4 {
    display: block;
}

.ba-icon-md {
    font-size: 18px !important;
}

#ba-notification i,
#filter_search + i,
.ba-context-menu span i,
.ba-custom-select ul li i,
.ba-modal-sm .ba-help-icon,
.main-table .zmdi,
.reset-filtering,
i.theme-import-trigger,
.ba-sidebar span.zmdi {
    font-size: 24px;
}

#default-value-dialog [class*="-data-tags"] > div,
#ba-notification i,
#filter-bar .filter-icons-wrapper > div,
.ba-context-menu span:not(.documentation):not(.support):not(.options),
.ba-custom-select .zmdi-caret-down,
.ba-custom-select ul.visible-select li,
.ba-total-price,
.language-title,
.main-table thead th > span,
.options-context-menu .options a,
.ba-custom-select input[type="text"]{
    cursor: pointer;
}

#condition-logic-modal .ba-settings-toolbar> div label,
.condition-logic-horizontal-fields-wrapper .ba-settings-icon-type i,
#condition-logic-modal .ba-settings-toolbar > div i,
#condition-logic-modal .ba-folder-tree li i,
.ba-cart-promo-code-btn,
.ba-form-product-quantity-cell i,
.ba-form-products-cart .ba-form-product-remove-cell i,
.ba-form-calculator-row .ba-form-calculator-btn,
.ba-integrations-group-wrapper .integrations-group .ba-work-area-element,
.ba-footer-content a,
.ba-form-submit-btn,
.ba-form-submit-btn i,
.ba-form-page .ba-form-page-break-button,
.ba-focus-underline,
.ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper i,
[class*="-data-tags"] *,
.ba-settings-input-type .input-action-icon i,
.ba-form-field-item .ba-input-help i,
.icons-tabs .code-nav a,
.icons-tabs .tab-content .ba-group-element,
.color-scheme-item,
.accordion-heading .accordion-toggle,
.ba-settings-item.ba-settings-margin-type > i,
.ba-settings-item.ba-settings-typography-toolbar-type > div i,
.ba-settings-item.ba-settings-padding-type > i,
.ba-page-resizer i,
div.ba-modal-cp .modal-footer .design-settings-switcher span,
div.ba-modal-cp .advanced-design-settings,
div.ba-modal-cp .modal-footer .design-settings-switcher i,
div.ba-modal-cp .modal-footer i,
.ba-modal-cp .nav-tabs li a,
.code-editor-dialog .nav-tabs li a,
.modal-header-icon i,
.submission-file-wrapper .submission-attachment-icons-wrapper i,
.submissions-right-sidebar i,
.forms-update-available a,
#filter_search + i,
.ba-main-view,
.ba-sidebar div > span,
.ba-sidebar,
.com_baforms .subhead-collapse .subhead-fixed,
.com_baforms .subhead-collapse.collapse,
.language-title,
.modal-footer a,
#filter-bar .filter-icons-wrapper > div {
    transition: all .3s ease-in-out;
}

.ba-context-menu span i,
.ba-modal-sm .ba-help-icon,
.ba-sidebar span,
i.theme-import-trigger,
.main-table .zmdi {
    color: #757575;
}

#ba-notification i,
#ba-notification p,
#filter-bar .ba-custom-select .zmdi-caret-down,
#filter-bar > .app-title-wrapper *,
#filter-bar >.filter-search-wrapper input[type="text"],
#filter_search + i,
.ba-alert h4,
.ba-custom-select input[type="text"],
.ba-custom-select ul li:hover:before,
.ba-dashboard-apps-footer span,
.com_baforms  #ba-notification,
.com_baforms button.close:after,
.language-line,
.reset-filtering,
.select-td i.zmdi-circle-o,
a.ba-btn-primary.active-button,
a.ba-btn-primary.red-btn,
body > .ba-tooltip {
    color: #fff;
}

.ba-btn,
.ba-save-continue a,
.clear-image-field,
.com_baforms .ba-edit-row a,
.com_baforms a:hover,
.modal-trigger,
.com_baforms a:focus {
    text-decoration: none;
}

.content,
.forms-table {
    background: #fff;
    border: 1px solid #f3f3f3;
    padding: 20px 0;
}

.droppad_item label {
    margin-bottom:15px ;
}

.com_baforms .subhead,
.com_baforms .subhead-collapse.collapse {
    height: 51px !important;
    left: 60px;
    margin-bottom: 0;
    overflow: hidden;
    border: none;
}

.com_baforms .subhead-collapse.collapse,
.com_baforms .subhead-collapse .subhead-fixed {
    box-sizing: border-box;
    margin: 0;
    max-width: calc(100% - 60px);
}

.subhead {
    margin: 0 !important;
}

#toolbar-language,
#toolbar-integration,
#toolbar-about {
    float: right;
}

#toolbar .btn,
#toolbar-language *,
#toolbar-integration *,
#toolbar-about * {
    outline: none !important;
    box-shadow: none!important;
}

.com_baforms .container-main {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    min-height: calc(100vh - 110px);
    padding: 0;
    width: 100%;
}

#forms-content {
    display: flex;
}

/* Custom scroll */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 6px;
}

/* ========================================================================
     Sidebar
 ========================================================================== */

.ba-sidebar {
    background: #f5f5f5;
    border-right: 1px solid #e3e3e3;
    box-sizing: border-box;
    flex-grow: 1;
    float: left;
    min-height: calc(100vh - 59px);
    overflow: hidden;
    padding-top: 50px;
    margin-top: -50px;
    width: 60px;
}

.ba-sidebar a {
    padding: 2px 0;
    position: relative;
}

.ba-sidebar span {
    direction: ltr;
    vertical-align: middle;
    white-space: nowrap;
}

.ba-sidebar span.zmdi {
    display: inline-block;
    margin: 2px 10px;
}

.view-form .ba-sidebar span.zmdi {
    margin: 5px 10px;
}

.ba-sidebar > div.bottom-icons {
    border-top: 1px solid #e3e3e3;
}

.ba-sidebar .ba-system-actions {
    border-bottom: 1px solid #e3e3e3;
}

.ba-sidebar span.zmdi:hover {
    background: #ddd;
}

.ba-sidebar .active span:not(.unread-submissions-count) {
    color: var(--main-color) !important;
}

div.ba-modal-cp select.ba-units-select {
    cursor: pointer;
}

/*
/* Context Menu
*/

.ba-context-menu {
    overflow: hidden;
    white-space: nowrap;
}

@keyframes context-menu {
    0%{ width: 265px; opacity: 0; max-height: 350px; visibility: hidden;}
    1%{ width: 0px; opacity: 1; max-height: 0; visibility: visible; }
    100%{ width: 265px; max-height: 350px; }
}

.ba-context-menu {
    animation: context-menu .3s both;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 60px rgba(0,0,0,.15) !important;
    max-height: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 265px;
    z-index: 1040;
}

.ba-context-menu.submissions-context-menu,
.ba-context-menu.forms-context-menu {
    margin-top: -65px;
    margin-left: -45px;
}

[data-joomla-version="4"] #wrapper.wrapper:not(.closed) .ba-context-menu.submissions-context-menu,
[data-joomla-version="4"] #wrapper.wrapper:not(.closed) .ba-context-menu.forms-context-menu {
    margin-left: -285px;
}

.ba-context-menu.folders-context-menu,
.ba-context-menu.empty-context-menu,
.ba-context-menu.files-context-menu {
    background: #34374a;
}

.ba-context-menu.ba-top {
    transform: translateY(-100%);
}

.ba-context-menu.ba-top.ba-left {
    transform: translate(-100%, -100%);
}

.ba-context-menu.ba-left {
    transform: translateX(-100%);
}

.ba-context-menu.options-context-menu {
    animation: none;
    background: #f5f5f5;
    border-radius: 0;
    border: 1px solid #e3e3e3;
    box-shadow: none !important;
    margin-top: -230px;
    max-height: 350px;
    position: absolute;
    visibility: visible;
    width: 265px;
    z-index: 1095;
}

.ba-context-menu.options-context-menu {
    top: 455px;
}

.ba-context-menu.options-context-menu > span {
    align-items: center;
    display: flex!important;
    font-weight: 400;
}

.options-context-menu .options a,
.ba-context-menu span:not(.documentation):not(.support):not(.options) {
    display: block;
    font-size: 14px;
    padding: 17px;
}

.options-context-menu .options a {
    align-items: center;
    display: flex;
    width: 100%;
}

.ba-context-menu span i {
    box-sizing: content-box;
    padding: 0 15px 0 5px;
    text-align: center;
    vertical-align: sub;
    width: 24px;
}

.ba-context-menu.options-context-menu > span span {
    padding: 0!important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-active,
table.ba-items-list tbody tr.context-active a,
table.ba-items-list tbody tr:hover,
.ba-context-menu span:hover a,
.ba-context-menu span:hover i,
.ba-context-menu span:hover {
    background: #65d9b4 !important;
    border-bottom-color: transparent;
    color: #fff !important;
}

#ba-media-manager .ba-custom-select ul li:hover,
#ba-media-manager .ba-custom-select ul li:hover i,
.media-manager-enabled .ba-context-menu span:hover a,
.media-manager-enabled .ba-context-menu span:hover i,
.media-manager-enabled .ba-context-menu span:hover {
    background: #65d9b4 !important;
}

.view-forms .ba-custom-select ul li:hover,
.view-forms .ba-custom-select ul li:hover i,
.view-forms .ba-context-menu span:hover a,
.view-forms .ba-context-menu span:hover i,
.view-forms .ba-context-menu span:hover {
    background: #61cfab!important;
}

table.ba-items-list tbody tr.context-active i,
table.ba-items-list tbody tr:hover a,
table.ba-items-list tbody tr:hover i {
    color: #fff !important;
}

.ba-context-menu span a {
    color: #333;
}

.options.ba-group-element {
    border-top: 1px solid #e3e3e3;
}

.ba-form-headline-field .ba-field-label-wrapper * {
    display: inline-block;
}

.disable-button i,
.disable-button {
    cursor: not-allowed !important;
    background: transparent !important;
    color: #cacaca !important;
}

.disable-button {
    opacity: .5;
}

/* ========================================================================
    Filter Bar
 ========================================================================== */

#filter-bar {
    align-items: flex-start;
    background: var(--main-color);
    box-sizing: border-box;
    display: flex;
    height: 250px !important;
    padding: 50px 50px 25px;
    position: relative;
}

#filter-bar > .app-title-wrapper {
    align-items: baseline;
    box-sizing: border-box;
    display: inline-flex;
    padding-right: 25px;
    width: 25%;
}

#filter-bar > .app-title-wrapper h1 {
    font-family: 'Roboto';
    font-size: 26px;
    font-weight: 700;
    line-height: 50px;
    margin: 0;
    margin-right: 25px;
}

/* Search */

#filter-bar >.filter-search-wrapper {
    display: inline-flex;
    width: 50%;
    position: relative;
}

#filter-bar >.filter-search-wrapper div {
    position: relative;
    width: 100%;
}

#filter-bar >.filter-search-wrapper input[type="text"] {
    background: rgba(0, 0, 0, .05);
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    font: 400 16px/45px 'Roboto', sans-serif;
    height: 50px;
    margin: 0;
    padding: 0 25px 0 80px;
    width: 100%;
}

#filter-bar >.filter-search-wrapper input[type="text"]::-webkit-input-placeholder {
    color: #fff;
    opacity: .5;
}

#filter-bar >.filter-search-wrapper input[type="text"]::-moz-placeholder {
    color: #fff;
    opacity: .5;
}

#filter-bar .submissions-forms-filter .ba-custom-select input:hover,
#filter-bar .filter-icons-wrapper > div:hover,
#filter-bar >.filter-search-wrapper input[type="text"]:focus {
    background: rgba(0, 0, 0, .1);
}

#filter_search + i {
    cursor: text;
    left: 20px;
    opacity: .5;
    position: absolute;
    top: 14px;
}

/* Filter Icons */
#filter-bar .filter-icons-wrapper {
    display: inline-flex;
    flex-direction: row-reverse;
    margin-left: 5px;
    width: 25%;
}

#filter-bar .filter-icons-wrapper > div {
    border-radius: 3px;
    margin-left: 5px;
}

/*
/* Custom Select
*/

.ba-custom-select {
    position: relative;
}

.ba-custom-select input[type="text"] {
    background: transparent;
    border-radius: 3px;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    font: 500 14px/45px 'Roboto', sans-serif;
    height: 50px;
    margin: 0;
    overflow: hidden;
    padding: 0px 30px 0px 10px;
    position: inherit;
    text-overflow: ellipsis;
    transition: all .4s 0s ease-in-out;
    z-index: 5;
}

.ba-custom-select ul {
    background: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    box-sizing: border-box;
    left: 0;
    list-style: none;
    margin: 50px 0 0 0;
    max-height: 96px;
    opacity: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    padding: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 265px;
    z-index: 2;
}

.ba-custom-select.default-country-select i,
.ba-custom-select .zmdi-caret-down {
    font-size: 23px;
    position: absolute;
    right: 10px;
    top: 12px;
    z-index: 5;
}

.ba-modal-sm .ba-custom-select .zmdi-caret-down {
    color: #757575;
    right: 15px;
    top: 37px;
}

.ba-modal-list-picker ul li,
.ba-custom-select ul li {
    font-size: 14px;
    font-weight: 400 !important;
    opacity: 0;
    overflow-y: auto;
    padding: 20px;
    padding-left: 65px;
    position: relative;
}

#default-country-dialog.ba-modal-list-picker ul li {
    align-items: center;
    display: flex;
    padding: 0 25px;
    width: 100% !important;
}

.ba-custom-select.default-country-select i {
    color: var(--cp-main-color);
}

.ba-custom-select.default-country-select ul:not(.visible-select) ~ input[type="text"].default-country-search:not(.select-input) {
    cursor: pointer !important;
}

.ba-custom-select.default-country-select ul.visible-select ~ i.zmdi-caret-down,
.ba-custom-select.default-country-select ul:not(.visible-select) ~ i.zmdi-search {
    display: none;
}

.ba-modal-list-picker ul li:hover:before,
.ba-settings-item.ba-settings-font-type .fonts-select ul li:hover:before,
.ba-custom-select ul li:hover:before {
    border-color: #fff !important;
}

.ba-modal-list-picker ul li:hover,
.ba-modal-list-picker ul li.popular-fonts:not(:first-child):hover:before,
ul.ba-phone-countries-list li:hover,
.ba-custom-select ul li:hover,
.ba-custom-select ul li:hover i {
    background: #65d9b4 !important;
    border-bottom-color: transparent !important;
    color: #fff !important;
}

.ba-custom-select.default-country-select ul li:before {
    display: none;
}

.ba-modal-list-picker ul li:before,
.ba-custom-select ul li:before {
    border-radius: 50%;
    border: 2px solid #ddd;
    box-sizing: content-box;
    content: "";
    height: 15px;
    left: 25px;
    position: absolute;
    top: 20px;
    width: 15px;
}

#default-country-dialog li:before {
    display: none;
}

#ba-media-manager .pagination-limit .ba-custom-select ul li:before {
    border-color: var(--cp-main-color);
}

.ba-custom-select ul li i {
    border-radius: 3px;
    left: 14px;
    padding: 8px;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 24px;
}

.modal-body .accordion-body {
    display: block;
    overflow: hidden;
    transition: height .35s ease;
}

/* Visible Select */
.ba-custom-select ul.visible-select {
    opacity: 1;
    visibility: visible;
    z-index: 15;
}

@keyframes context-menu-inner {
    0%{ transform: translateY(10%); opacity: 0;}
    100%{transform: translateY(0);  opacity: 1;}
}

.ba-modal-list-picker ul li,
.ba-custom-select ul.visible-select li {
    animation: context-menu-inner .4s .1s cubic-bezier(.25,.98,.26,.99) both;
    backface-visibility: hidden;
    box-sizing: content-box;
    opacity: 1;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 180px;
}

.view-submissions .main-table.submissions-list .active-submission td,
.view-submissions .main-table.submissions-list .active-submission .zmdi.zmdi-check,
.main-table .table .context-active a,
.main-table .table .context-active i,
.main-table .table .context-active td,
.main-table .table tr:not(.sortable-helper):hover td .zmdi,
.main-table.dashboard-content .table tr.context-active td i.zmdi,
.main-table .table tr:not(.sortable-helper):hover td,
.main-table .table tr:not(.sortable-helper):hover td a {
    background: var(--main-color) !important;
    border-bottom-color: transparent !important;
    color: #fff !important;
}

#filter-bar .ba-custom-select .zmdi-caret-down {
    margin-top: 2px;
}

#filter-bar .ba-custom-select input {
    box-sizing: border-box;
    text-align: center;
    text-transform: uppercase;
    width: auto;
}

#filter-bar .submissions-forms-filter .ba-custom-select input {
    background: rgba(0, 0, 0, .05);
    border-radius: 0;
    margin-left: 1px;
    text-align: left;  
    text-transform: none;
    width: 100%; 
}

#filter-bar .submissions-forms-filter {
    width: 15%;
}

.view-submissions #filter-bar >.filter-search-wrapper {
    width: 35%;  
}

.submissions-forms-filter .ba-custom-select ul.visible-select {
    left: auto;
    right: 0;
}

.reset-filtering {
    border-radius: 3px;
    display: inline-block;
    padding: 13px;
    text-align: center;
    vertical-align: middle;
    width: 24px;
}

.main-table th.status-th > div .ba-custom-select ul {
    margin-left: -55px;
}

.main-table th > div .ba-custom-select ul {
    margin-left: 25px;
    margin-top: 10px;
}

.view-forms .main-table tr td{
    cursor: context-menu;
}

/* Pagination Limit */

#ba-media-manager .pagination-limit ul {
    overflow-y: auto !important;
    background: #34374a;
}

.pagination-limit .ba-custom-select ul {
    margin-left: 75px !important;
    transform: translateX(-100%);
}

@keyframes filter-bar-context-menu {
    0%{ width: 265px; opacity: 0; max-height: 290px; visibility: hidden;}
    1%{ width: 0px; opacity: 1; max-height: 0; visibility: visible; }
    100%{ width: 265px; max-height: 290px; }
}

.ba-custom-select ul.visible-select,
.pagination-limit .ba-custom-select ul.visible-select {
    animation: filter-bar-context-menu .3s both;
    border-radius: 6px;
    border-top: none ;
    margin-top: 50px;
    max-height: none;
    overflow: hidden;
    overflow-y: auto;
    top: 0;
}

@keyframes add-link {
    0%{ left: 50%; width: 0; max-height: 2px; }
    50%{ left: 0; width: 275px; max-height: 2px; }
    100%{ left:0; width: 275px; max-height: 118px; }
}

.ba-modal-sm .ba-custom-select ul.visible-select {
    animation: add-link .4s cubic-bezier(.25,.98,.26,.99) both;
    border-radius: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 2px solid #1da6f4;
    margin-top: 0;
    max-height: none;
    opacity: 1;
    overflow-y: auto;
    overflow: hidden;
    top: 69px;
    visibility: visible;
    z-index: 15;
}

.uploader-nav .pagination-limit .ba-custom-select ul.visible-select {
    box-shadow: 0 4px 60px rgba(0,0,0,.15) !important;
    color: #cad3da;
    top: -10px;
}

span.ba-group-element {
    border-top: 1px solid #f3f3f3;
}

.ba-context-menu.folders-context-menu span.ba-group-element,
.ba-context-menu.empty-context-menu span.ba-group-element,
.ba-context-menu.files-context-menu span.ba-group-element {
    border-top: 1px solid #3f4256;
}

/* ========================================================================
    Main View
 ========================================================================== */

.ba-main-view {
    min-height: calc(100vh - 110px);
    overflow: hidden;
    width: calc(100% - 60px);
}

.main-table thead th {
    font-weight: 500;
}

.main-table {
    background: #fff;
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.06);
    margin: -80px auto 0;
    position: relative;
    width: 1170px;
    max-width: 100%;
}

.main-table thead th.active {
    position: relative;
}

.main-table thead th:first-child,
.main-table .table-striped tbody > tr > td:first-child {
    padding-left: 15px;
    padding-right: 10px;
}

.main-table thead th {
    border-bottom: 1px solid #f3f3f3;
}

.main-table thead th:first-child,
.main-table .select-td {
    width: 1%;
}

.main-table .status-th,
.main-table .status-td {
    width: 5%;
}

.main-table .table-striped tbody > tr:nth-child(odd) > td,
.main-table .table-striped tbody > tr:nth-child(odd) > th,
.main-table .table-striped tbody > tr > td,
.main-table .table-striped tbody > tr > th,
.main-table thead th {
    background: transparent;
    border: none;
    box-sizing: border-box;
    padding: 28px 5px;
    vertical-align: middle !important;
    white-space: nowrap;
}

.main-table thead th > span {
    position: relative;
    white-space: nowrap;
}

.main-table th span[data-sorting] + div {
    display: inline-block;
    width: 25px;
}

.main-table th span[data-sorting] + div .ba-custom-select .zmdi-caret-down {
    border-radius: 3px;
    line-height: 25px;
    padding: 0;
    right: 0;
    text-align: center;
    top: -18px;
    transition: background .3s;
    width: 24px;
}

.main-table th span[data-sorting] + div .ba-custom-select .zmdi-caret-down:hover,
.category-list li i.open-category-settings:hover,
.category-list li i.sorting-handle:hover {
    background: #ddd;
}

.main-table thead th,
.main-table .table-striped tbody > tr:not(:last-child) > td {
    border-bottom: 1px solid #f3f3f3;
}

.trashed-list td.select-td + td,
td.status-td + td {
    white-space: normal !important;
}

.main-table .zmdi.zmdi-check,
.main-table > .table td,
.main-table > .table a {
    font-weight: 500;
    color: #3f3f3f;
}

.select-td input:checked + i.zmdi-circle-o,
.select-td input + i + i.zmdi-check {
    opacity: 0;
}

.active .set-featured-post,
.select-td input:checked + i + i.zmdi-check {
    opacity: 1;
}

.select-td .zmdi {
    left: calc(50% - 8px);
    margin: 0;
    position: absolute;
    top: 0;
}

.select-td i.zmdi-circle-o {
    opacity: .5;
}

td .ba-hide-checkbox:not(.ba-image) {
    height: 18px;
}

td .ba-hide-checkbox {
    position: relative;
}

.main-table .status-th + th {
    width: 75%;
}

.main-table .table-striped tbody > tr:nth-child(odd) > td.status-td + td+ td,
.main-table .table-striped tbody > tr > td.status-td + td+ td,
.main-table .status-th + th + th  {
    text-align: right;
    padding-right: 25px;
}

.main-table thead th.active span:before {
    background: var(--main-color);
    bottom: -33px;
    content: "";
    height: 4px;
    left: -10px;
    position: absolute;
    right: -10px;
}

/* ========================================================================
    Trashed View
 ========================================================================== */

.main-table.trashed-list tr th:nth-child(2) {
    width: 92%;
}

/* ========================================================================
    Submissions View
 ========================================================================== */

.view-submissions .main-table.submissions-list {
    display: flex;
}

.view-submissions .main-table.submissions-list > .table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 45%;
}

.view-submissions .main-table.submissions-list > .table tbody {
    border: none;
    display: block;
    height: 749px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    overflow-x: hidden;
}

.table>:not(:first-child) {
    border-top: none;
}


.view-submissions .main-table.submissions-list > .table thead,
.view-submissions .main-table.submissions-list > .table tbody tr {
    cursor: context-menu;
    display: table;
    table-layout: fixed;
    width: 100%;
}

@-moz-document url-prefix() { 
    .view-submissions .main-table.submissions-list > .table thead, 
    .view-submissions .main-table.submissions-list > .table tbody tr {
        table-layout: auto;
    }
}

.view-submissions .main-table.submissions-list thead th:first-child,
.view-submissions .main-table.submissions-list .select-td {
    width: 7%;
}

.view-submissions .main-table.submissions-list thead th:nth-child(2),
.view-submissions .main-table.submissions-list .select-td + td {
    text-align: left;
    white-space: normal;
    width: 60%;
}

.view-submissions .main-table.submissions-list .table thead th:nth-child(2) + th,
.view-submissions .main-table.submissions-list .select-td + td + td {
    width: 25%;
}

.main-table.submissions-list .ba-submission-unread {
    background: #f5f5f5 !important;
}

.main-table.submissions-list table tbody:not(.order-list-sorting) tr td {
    cursor: context-menu;
}

.main-table.submissions-list table tbody:not(.order-list-sorting) tr td span{
    cursor: pointer;
}

/* Submissions Right Sidebar */
.view-submissions .submissions-right-sidebar {
    border-left: 1px solid #f3f3f3;
    display: flex;
    flex-direction: column;
    width: 55%;
}

.view-submissions .submissions-right-sidebar .submissions-sidebar-header {
    align-items: center;
    border-bottom: 1px solid #f3f3f3;
    display: flex;
    height: 82px;
    justify-content: flex-end;
    padding: 0 25px;
}

.view-submissions .submissions-right-sidebar .submissions-sidebar-header > span:not(.disabled) {
    cursor: pointer;
}

.view-submissions .submissions-right-sidebar .submissions-sidebar-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.submissions-right-sidebar i {
    color: #3f3f3f;
    font-weight: 500;
}

.ba-form-toggle input[disabled="disabled"]+ span,
.submissions-right-sidebar .submissions-sidebar-header > span.disabled {
    cursor: not-allowed !important;
}

.submissions-sidebar-scroll-wrapper {
    flex-grow: 1;
    max-height: 674px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    padding: 25px 0 50px;
}

.submission-info-wrapper {
    padding: 0 50px;
}

.submission-sidebar-title {
    font: 700 18px/32px 'Roboto', sans-serif;
}

.submission-sidebar-date {
    float: right;
}

.submissions-sidebar-body .ba-poll-results-row .ba-poll-results-percent,
.submissions-sidebar-body .ba-poll-results-title,
.submission-data-message .ba-cart-total-row .ba-cart-row-title,
.submission-data-message .ba-cart-subtotal-row .ba-cart-row-title,
.submission-sidebar-date,
.submission-data-label {
    font: 500 14px/32px 'Roboto', sans-serif;
}

.submissions-sidebar-body .ba-poll-results-row .ba-poll-results-percent,
.submission-data-message .ba-cart-total-row .ba-cart-row-title,
.submission-data-message .ba-cart-subtotal-row .ba-cart-row-title {
    color: #333;
}

.submission-sidebar-title,
.submission-sidebar-date {
    padding: 25px 0;
    display: inline-block;
}

.submissions-sidebar-body .ba-poll-results-title,
.submission-data-message .ba-cart-total-row .ba-cart-row-title,
.submission-data-message .ba-cart-subtotal-row .ba-cart-row-title,
.submission-data-label {
    display: inline-block;
    font-size: 16px;
}

.submission-data-row:not(:last-child) {
    margin-bottom: 25px;
}

.ba-signature-img {
    max-width: 100%;
}

.submissions-sidebar-body .ba-poll-results-row,
.submission-data-message {
    color: #999;
    font-weight: 400;
    line-height: 24px;
    word-break: break-word;
}

.submissions-sidebar-body .ba-poll-results-rows-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.submissions-sidebar-body .ba-poll-results-row {
    align-items: center;
    border-top: 1px solid #f3f3f3;
    display: flex;
    order: var(--poll-order);
    padding: 5px 0;
    width: 100%;
}

.submissions-sidebar-body .ba-poll-results-row[style="--poll-order:0;"] {
    border-top: none;    
}

.submissions-sidebar-body .ba-poll-results-row .ba-poll-results-value {
    flex-grow: 1;
}

.submissions-sidebar-body .ba-poll-results-row .ba-poll-results-votes,
.submissions-sidebar-body .ba-poll-results-row .ba-poll-results-percent {
    min-width: 80px;
} 

.submissions-sidebar-body .ba-poll-results-row .ba-poll-results-percent {
    text-align: right;
}

/* ========================================================================
    Modal
 ========================================================================== */
/*
/* Login Modal
*/

#login-modal {
    background: #2f3243;
    overflow: hidden;
    padding: 0;
    z-index: 1080;
}

.com_baforms .modal-backdrop.login-modal {
    z-index: 1070 !important;
}

#login-modal iframe {
    height: 384px;
    opacity: 0;
    transition: .3s .3s ;
}

#login-modal iframe.iframe-loaded {
    opacity: 1
}

/*
/* Deactivate Modal
*/

#deactivate-dialog {
    background: #fff;
    border-radius: 6px;
    border: none;
    bottom: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    box-sizing: border-box;
    left: 50%;
    margin-left: -162px;
    padding: 25px;
    top: calc(50% - 160px) !important;
    width: 325px;
}

#deactivate-dialog .modal-body {
    backface-visibility: hidden;
    padding: 0;
    overflow: visible;
}

#deactivate-dialog h3 {
    color: #1a1a1a;
    margin: 0 0 50px 0;
    font:500 18px/20px 'Roboto', sans-serif;
}

#deactivate-dialog p {
    font: 400 16px/30px 'Roboto', sans-serif;
    color: #757575;
    padding: 0;
}

#deactivate-dialog .modal-footer {
    background-color: transparent;
    border: none;
    box-shadow: none;
    display: block;
    margin-top: 25px;
    padding: 0;
    text-align: right;
}

#deactivate-dialog .modal-footer>:not(:last-child) {
    margin-right: 0;
}

#deactivate-dialog .modal-footer a {
    background-color: transparent;
    border-radius: 3px;
    border: none;
    color: #363637;
    cursor: pointer;
    display: inline-block;
    font: 500 16px/18px 'Roboto', sans-serif;
    overflow: hidden;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease;
}

#deactivate-dialog .modal-footer a.ba-btn-primary.red-btn {
    background: #f44236;
    color: #fff;
    line-height: 18px;
}

#deactivate-dialog .modal-footer a:first-child:hover {
    background-color: rgba(0,0,0,0.1);
}

#deactivate-dialog .modal-footer a.ba-btn-primary {
    position: relative;
    z-index: 1;
}

#deactivate-dialog .modal-footer a.ba-btn-primary.red-btn:hover:after {
    background: #f44236;
    opacity: 1;
    transform: scale(27);
}

#deactivate-dialog .modal-footer a.ba-btn-primary:after {
    background: #fff;
    border-radius: 50%;
    backface-visibility: hidden;
    content: "";
    height: 3px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transition: all .5s cubic-bezier(.25,.98,.26,.99);
    transform: scale(0);
    width: 3px;
    cursor: pointer;
    z-index: -1;
}

body .modal-backdrop.google-fonts-dialog,
body .modal-backdrop.drive-folders-dialog,
body .modal-backdrop.default-country-dialog,
body .modal-backdrop.color-variables-dialog {
    animation: none !important;
    opacity: 0 !important;
}

.com_baforms > .modal-backdrop.integration-element-options-modal ~ .modal-backdrop,
.com_baforms > .modal-backdrop.integration-element-options-modal,
body.component .modal-backdrop {
    opacity: .05;
}

.com_baforms > .modal-backdrop.condition-logic-modal ~ .modal-backdrop,
.com_baforms > .modal-backdrop.integration-element-options-modal ~ .modal-backdrop {
    z-index: 1080;
}

.com_baforms .modal-backdrop,
.com_baforms .modal-backdrop.fade.in {
    background: #2e3241;
    opacity: 0;
    z-index: 1060;
}

@keyframes backdrop-close {
    to { opacity: 0;}
}

.ba-backdrop-close {
    animation: backdrop-close .3s linear both !important;
}

@keyframes backdrop {
    from { opacity: 0;}
}

.com_baforms .modal-backdrop,
.ba-modal-backdrop {
    animation: backdrop .3s linear both;
}

.com_baforms > .modal-backdrop {
    opacity: .56;
}

.modal-backdrop ~ .modal-backdrop {
    animation: none;
    opacity: .05;
}

.modal h3.ba-modal-title {
    color: #1a1a1a;
    cursor: default;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    margin: 0 0 50px 0;
}

/* Export Dialog */
#export-dialog ul {
    list-style: none;
    margin: 0 0 50px 0;
    padding: 0;
}

#export-dialog li {
    list-style: none;
    margin-top: 30px;
    position: relative;
}

#export-dialog li:first-child {
    margin-top: 0;
}

.ba-hide-checkbox input {
    display: none;
}

#export-dialog li label:not(.ba-form-toggle ) {
    cursor: default;
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    margin: 0 0 0 40px;
}

#export-dialog input[type="radio"] + span:before {
    border-radius: 50%;
    border: 2px solid #757575;
    box-sizing: content-box;
    content: "";
    cursor: pointer;
    display: block;
    height: 18px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s;
    width: 18px;
}

#export-dialog input[type="radio"]:checked + span:before {
    background: var(--main-color);
    border-radius: 50%;
    border: 2px solid var(--main-color);
    box-shadow: inset 0px 0px 0px 3px rgb(245, 245, 245);
    content: "";
    display: block;
    height: 18px;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
}

@keyframes click-wave {
    0% { left: 1px; top: 1px;width: 19px; height: 19px; opacity: 0.35;}
    100% { width: 50px; height: 50px; left: -14px; top: -14px; opacity: 0;}
}

#export-dialog input[type="radio"]:checked + span:after {
    animation: click-wave 0.65s;
    background: var(--main-color);
    border-radius: 50%;
    content: '';
    display: block;
    position: absolute;
    z-index: 100;
}

/* Languages Dialog */
#languages-dialog {
    background: #2f3243 !important;
    border-radius: 6px;
    border: none;
    margin-left: -215px;
    padding: 0;
    top: calc(50% - 200px) !important;
    width: 430px;
}

#languages-dialog .modal-body {
    min-height: 400px;
    max-height: 400px;
}

#languages-dialog .modal-body {
    box-sizing: border-box;
    overflow: scroll;
    overflow-x: hidden;
    padding: 25px 40px;
}

.language-line {
    align-items: inherit;
    display: flex;
    flex-grow: 1;
    font: 500 16px/16px 'Roboto';
}

.language-img {
    display: inline-block;
}

.language-img img {
    border-radius: 50%;
    height: 36px;
    margin: 20px 40px 20px 0;
    width: 36px;
}

.language-title {
    width: 200px;
}

.language-code,
.language-title {
    align-items: center;
    display: flex;
}

.forms-update-available a:hover,
.language-title:hover,
.language-code {
    color: var(--cp-main-color);
}

.forms-update-available a,
.ba-dashboard-apps-footer span {
    align-items: center;
    display: flex;
    flex-grow: 1;
    font: 500 16px/16px 'Roboto';
}

.forms-update-available a {
    background: transparent;
    color: #1da6f4;
    justify-content: flex-end;
    padding: 0;
}

.ba-dashboard-apps-footer span {
    font-size: 12px;
}

/* Login Modal */
.layout-create .navbar{
    display: none;
}

.layout-create #login-modal {
    overflow: hidden;
    top: calc(50% - 180px) !important;
    z-index: 1060;
}

.layout-create #login-modal .modal-body {
    overflow: visible;
}

.layout-create .modal.ba-modal-sm .ba-footer-content {
    text-align: right;
}

.layout-create .ba-modal-sm input:focus {
    border-color: #fff !important;
    border-bottom-color: #e3e3e3 !important;
}

input:not(.cke_dialog_ui_input_text):focus {
    border-color: transparent !important;
    outline: none !important;
}

.layout-create .modal.ba-modal-sm .ba-footer-content .ba-btn-primary {
    animation-delay: .75s;
}

@keyframes fade-up-effect {
    from { transform: translateY(40%); opacity: 0; }
}

.layout-create input#ba-title {
    animation: fade-up-effect .6s both;
    animation-delay: .25s;
}

.layout-create input#ba-title + .focus-underline {
    top: 68px;
}

#rename-modal .focus-underline,
#create-folder-modal .focus-underline {
    bottom: 50px;
}

input:focus + .focus-underline,
#rename-modal input:focus + .focus-underline,
.layout-create #login-modal input:focus + .focus-underline,
.layout-create input:focus + .focus-underline {
    transform: scaleX(1);
}

.focus-underline,
.layout-create #login-modal .focus-underline,
.layout-create .focus-underline {
    background: #65d9b4 !important;
    bottom: 0;
    height: 2px;
    left: 0px;
    position: absolute;
    transform: scaleX(0);
    transition: all .3s cubic-bezier(0.4,0,0.2,1);
    width: 100%;
}

.layout-create .ba-btn-primary {
    border-radius: 3px;
    border: none;
    color: #fff;
    font: 500 16px/normal 'Roboto', sans-serif;
    display: inline-block;
    overflow: hidden;
    opacity: 1;
    padding: 15px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
    z-index: 1;
}

/*
/* About Modal
*/

.icon-bookmark:not([data-notification="0"]) {
    background: #f64231 !important;
}

.icon-bookmark:not([data-notification="0"]):before {
    color: #fff;
    content: attr(data-notification)!important;
    font-family: inherit;
    font-weight: bold;
}

@keyframes modal-sm-in {
    from {opacity: 0;}
    to { opacity: 1;}
}

.ba-dashboard-apps-dialog.ba-dashboard-about.visible-dashboard-dialog {
    animation: modal-sm-in .3s cubic-bezier(0.4,0,0.2,1) both;
    visibility: visible;
}

.ba-dashboard-apps-dialog.ba-dashboard-about {
    background: #2f3243;
    border-radius: 6px;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    margin-left: -180px;
    opacity: 0;
    position: fixed;
    visibility: visible;
    top: -100vh;
    visibility: hidden;
    z-index: 9999;
}

.ba-dashboard-apps-dialog.ba-dashboard-about:before {
    border: 5px solid transparent;
    border-bottom: 5px solid #2f3243;
    box-sizing: content-box;
    content: "";
    height: 5px;
    left: 430px !important;
    margin-left: -5px;
    position: absolute;
    top: -14px;
}

.ba-dashboard-apps-body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow: hidden;
    padding: 25px 40px;
    width: 500px;
}

.ba-forms-dashboard-row {
    align-items: center;
    display: flex;
    width: 100%;
}

.ba-forms-dashboard-row i {
    background: #484c64;
    border-radius: 3px;
    color: #fff;
    font-size: 18px;
    height: 42px;
    line-height: 42px;
    margin: 15px 30px 15px 0;
    min-width: 42px;
    text-align: center;
    width: 42px;
}

.ba-dashboard-apps-footer span a {
    color: #566e78;
    transition: .3s;
}

.ba-forms-dashboard-row a,
.ba-forms-dashboard-row span {
    align-items: center;
    color: #fff;
    display: flex;
    flex-grow: 1;
    font: 500 16px/16px 'Roboto';
    text-decoration: none;
}

.ba-dashboard-apps-body div a,
.ba-dashboard-apps-body div span.forms-version {
    flex-grow: 0;
}

.ba-dashboard-apps-footer {
    padding: 0 40px 25px;
}

.ba-dashboard-apps-footer span {
    display: inline-block;
    font-size: 12px;
}

.ba-dashboard-apps-footer span a:hover,
.ba-dashboard-apps-body .dashboard-link-action {
    color: #1da6f4;
}

.ba-dashboard-apps-body div a,
.ba-dashboard-apps-body div span.forms-version,
.ba-dashboard-apps-body .dashboard-link-action:hover,
.ba-dashboard-apps-footer span {
    color: #566e78;
}

.ba-dashboard-apps-body .forms-activate-license i {
    background: #1ca6f4;
}

.ba-dashboard-apps-body .forms-update-available i {
    background:#f64231 !important;
}

.ba-dashboard-apps-body .forms-update-wrapper i,
.ba-dashboard-apps-body .forms-deactivate-license i {
    background: #17c671;
}

/*
/* Modal SM
*/
.modal.in {
    animation: modal-sm-in .3s linear both;
}

@keyframes close-modal-sm {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

.modal.ba-modal-close {
    animation: close-modal-sm .3s cubic-bezier(0.4,0,0.2,1) both !important;
    display: block !important;
    opacity: 1;
    transform: scale(1);
    visibility: visible!important;
}

.modal.ba-modal-sm,
.com_baforms .modal.ba-modal-sm {
    background-color: #fff;
    border-radius: 6px;
    border: none;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    box-sizing: border-box;
    left: 50%;
    height: auto;
    margin-left: -162px;
    overflow: visible;
    padding: 25px;
    position: fixed;
    top: calc(50% - 185px) !important;
    width: 325px;
    z-index: 1070;
}

.modal-backdrop.integration-element-options-modal,
#edit-post-link-dialog {
    z-index: 1070;
}

.modal.ba-modal-sm .modal-header {
    align-items: flex-start;
    border: none;
    padding: 0;
}

.ba-modal-sm h3,
.ba-modal-sm .modal-header h3 {
    color: #1a1a1a;
    cursor: default;
    display: inline-block;
    font: 500 18px/20px 'Roboto', sans-serif;
    margin: 0 0 50px 0;
}

.ba-modal-sm p {
    font: 400 16px/30px 'Roboto', sans-serif;
    color: #757575;
}

.ba-modal-sm .ba-help-icon {
    cursor: help ;
    float: right;
    margin-top: -3px;
    position: relative;
}

.ba-modal-sm .modal-body {
    padding: 0;
}

.ba-input-lg {
    position: relative;
}

.ba-modal-sm input[type="text"]:focus,
.ba-modal-sm input[type="text"],
.ba-modal-sm select {
    border: 1px solid transparent !important;
    border-bottom-color: #e3e3e3 !important;
    box-shadow: none;
    box-sizing: border-box;
    color: #1a1a1a;
    font: 400 22px/45px 'Roboto', sans-serif;
    height: 45px;
    margin: 25px 0 50px 0;
    overflow: hidden;
    padding: 4px 6px;
    text-overflow: ellipsis;
    width: 100%;
}

.reset-input-margin {
    margin-bottom: 0 !important;
}

.ba-input-lg input {
    background-color: transparent !important;
    cursor: text !important;
    padding-right: 40px !important;
    text-overflow: ellipsis !important;
}

.ba-modal-sm input[type="text"]::-webkit-input-placeholder {
    color: #757575;
}

.ba-modal-sm input[type="text"]::-moz-placeholder {
    color: #757575;
}

.ba-modal-sm input[type="password"]::-webkit-input-placeholder {
    color: #757575;
}

.ba-modal-sm input[type="password"]::-moz-placeholder {
    color: #757575;
}

i.theme-import-trigger {
    border-radius: 3px;
    padding: 8px;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 27px;
    width: 24px;
    z-index: -1;
}

.ba-modal-sm .modal-footer {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-top: 25px;
    padding: 0;
    text-align: right;
}

.ba-modal-sm .modal-footer a {
    color: #363637;
}

@keyframes bounce-effect {
    0% { transform:  scale(.05); opacity: 0;}
    70% { transform:  scale(1.01); opacity: 1;}
    100% { transform:  scale(1); opacity: 1;}
}

#create-form-modal .ba-footer-content a {
    animation: bounce-effect .45s 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    opacity: 0;
}

.ba-footer-content a,
.modal-footer a {
    background-color: transparent;
    border-radius: 3px;
    border: none;
    color: #363637;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    overflow: hidden;
    padding: 15px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}

.ba-footer-content a:not(.ba-btn-primary):hover {
    background-color: rgba(0,0,0,0.1);
    color: #363637;
}

a.ba-btn-primary:not(.red-btn):not(.active-button) {
    color: #cacaca;
    cursor: not-allowed;
}

.ba-modal-sm .modal-footer a:not(.ba-btn-primary):hover {
    background-color: rgba(0,0,0,0.1);
    color: #363637;
}

a.ba-btn-primary.active-button {
    cursor: pointer !important;
    color: #fff!important;
}

a.ba-btn-primary {
    color: #cacaca;
    position: relative !important;
    z-index: 1;
}

a.ba-btn-primary.red-btn {
    background: #f44236;
    line-height: 18px;
    color: #fff;
}

.ba-modal-sm a.ba-btn-primary.active-button:before {
    backface-visibility: hidden;
}

.ba-create-item a:after,
.ba-modal-sm a.ba-btn-primary.active-button:after,
.ba-modal-sm a.ba-btn-primary:before,
a.red-btn:after, 
a.ba-btn-primary:after {
    content: "";
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale(0);
    z-index: -1;
}

.ba-modal-sm a.ba-btn-primary:before {
    background: #65d9b4 ;
    border-radius: 100%;
    height: 5px;
    margin: -2px 0 0 -2px;
    transition: all .7s ease;
    width: 5px;
}

.ba-create-item a:after,
.ba-modal-sm a.ba-btn-primary.active-button:after,
a.ba-btn-primary:after,
a.red-btn:after {
    background: rgba(255, 255, 255, 0.8);
    backface-visibility: hidden;
    border-radius: 50%;
    cursor: pointer;
    height: 3px;
    transition: all .3s ease-out;
    width: 3px;
}

.ba-modal-sm a.ba-btn-primary.active-button:hover:after {
    background: #65d9b4;
}

.ba-create-item a:hover:after,
a.ba-btn-primary.red-btn:hover:after,
.ba-modal-sm a.ba-btn-primary.active-button:before,
.ba-modal-sm a.ba-btn-primary.active-button:hover:after {
    backface-visibility: hidden;
    opacity: 1;
    transform: scale(37);
}

.ba-create-item a:hover:after,
a.ba-btn-primary.red-btn:hover:after {
    background: #f44236;
}

#theme-import-trigger {
    cursor: pointer !important;
}

/* Delete dialog */
#delete-dialog {
    z-index: 1085;
}

/* Bulk Adding dialog */
#bulk-adding-dialog.ba-modal-cp {
    margin: 0;
    overflow: visible;
    z-index: 1080;
}

#bulk-adding-dialog.ba-modal-cp .modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#bulk-adding-dialog.ba-modal-cp .modal-body {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    height: calc(100% - 70px);
    overflow: hidden;
    padding-right: 0;
}

#bulk-adding-dialog.ba-modal-cp .modal-body .ba-settings-group {
    border: none !important;
}

#bulk-adding-dialog.ba-modal-cp .modal-body .ba-settings-item {
    margin: 0;
}

#bulk-adding-dialog.ba-modal-cp .modal-body .ba-settings-item.ba-settings-textarea-type textarea {
    background: var(--dark-modal-bg);
    color: #fff;
    margin-top: 0;
    min-height: 430px;
    padding: 0 25px 0 0;
    outline: none;
}

/*
/* Modal CP
*/

div.ba-modal-cp {
    background-color: transparent;
    border-radius: 6px;
    border: none;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    box-sizing: border-box;
    left: var(--modal-cp-left);
    overflow: hidden;
    top: var(--modal-cp-top);
}

.basic-design-settings.active,
.advanced-design-settings.active {
    height: 100%;
}

div.ba-modal-cp .modal-footer {
    background: var(--dark-modal-bg);
    border-radius: 0;
    border: none;
    box-shadow: none;
    color: var(--cp-main-color);
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 15px 25px;
}

#design-settings-dialog.ba-modal-cp .modal-footer {
    justify-content: space-between;
}

div.ba-modal-cp .modal-footer > i{
    cursor: ns-resize;
}

div.ba-modal-cp .modal-footer:before,
div.ba-modal-cp .modal-footer:after {
    display: none;
}

div.ba-modal-cp .modal-footer .design-settings-switcher {
    align-items: center;
    cursor: pointer;
    display: flex;
}

div.ba-modal-cp .modal-footer .design-settings-switcher i {
    font-size: 18px;
    margin-right: 10px;
}

div.ba-modal-cp .modal-footer .design-settings-switcher span {
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
}

div.ba-modal-cp .modal-footer i:hover,
div.ba-modal-cp .modal-footer .design-settings-switcher:hover * {
    color: #fff;
}

div.ba-modal-cp .advanced-design-settings {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

div.ba-modal-cp .advanced-design-settings:not(.active) {
    transform: translateY(100%);
}

/*
/* Accordion
*/

.accordion-group,
.accordion {
    margin: 0;
}

.ba-settings-group,
.basic-design-settings .ba-settings-group,
.accordion-group {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #34374a;
}

#integration-element-options-modal .ba-settings-group:not(:last-child) {
    border-bottom: none;
}

.ba-settings-group.last-visible-group,
.accordion-inner .ba-settings-group:last-child,
#default-value-dialog .modal-body > div:first-child .ba-settings-group {
    border: none;
}

.modal-body .ba-settings-group-title,
.accordion-heading .accordion-toggle {
    align-items: center;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
}

.accordion-heading .accordion-toggle:hover {
    color: var(--cp-main-color);
}

.accordion-inner {
    padding: 0;
    border: none;
}

.accordion-group.active .accordion-toggle i {
    transform: rotate(90deg);
}

.conditions-matches-wrapper,
.week-days-wrapper > div,
.ba-settings-item-title {
    color: #cad3da;
    flex-grow: 1;
    font: 500 14px/18px "Roboto", sans-serif;
}

.ba-settings-item-title {
    margin-right: 15px;
    word-break: break-word;
}

.ba-inline-checkbox .ba-settings-item-title {
    margin-right: 0;
}

.modal-body .ba-settings-group-title,
.accordion-heading a {
    font: 500 16px/24px "Roboto", sans-serif
}

.ba-icons-search-wrapper {
    position: relative;
}

.ba-integrations-search-wrapper input,
.select-data-tags-type,
.ba-icons-search-wrapper input {
    height: 45px !important;
    width: 100% !important;
}

.ba-integrations-search-wrapper {
    padding: 20px 30px;
}

/* Accordion Group*/
#text-editor-dialog .modal-body input,
#integration-element-options-modal .ba-modal-list-picker .modal-body input,
.ba-settings-item.ba-settings-textarea-type textarea,
.conditional-logic-title input[type="text"],
#condition-logic-modal .ba-work-area input[type="number"],
#condition-logic-modal .ba-work-area input[type="text"],
#condition-logic-modal .ba-work-area select,
.ba-form-calculator-screen,
.ba-integrations-search-wrapper input,
.icons-tabs .tab-pane .ba-icons-search-wrapper input,
.ba-input-field-options .accordion-body input[type="number"],
.ba-input-field-options .accordion-body input[type="text"],
.ba-input-field-options .accordion-body select,
#add-columns-dialog .ba-range-wrapper input[type="number"],
.ba-settings-item.ba-settings-font-type .fonts-select input[type="text"],
div.ba-modal-cp input,
div.ba-modal-cp select {
    background: var(--input-background);
    border-radius: 3px;
    border: none;
    box-sizing: border-box;
    color: var(--cp-main-color);
    font: 500 14px/14px 'Roboto';
    height: 39px;
    margin: 0;
    padding: 5px;
    width: 60px;
}

.ba-settings-item.ba-settings-textarea-type textarea {
    color: #fff;
    line-height: 1.75em;
    margin-top: 20px;
    max-width: 100% !important;
    min-height: 200px;
    min-width: 100% !important;
    padding: 15px;
}

.ba-modal-cp select[data-option="unit"][data-group="promo"] {
    width: 190px !important;
    min-width: 190px;
}

.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="number"][data-group="promo"][data-option="discount"] {
    margin-right: 10px;
}

.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-price input[type="number"] {
    background: transparent;
    border-bottom: 1px solid #34374a;
    border-radius: 0;
    height: 45px;
}

#text-editor-dialog .modal-body input::-webkit-input-placeholder,
#bulk-adding-dialog.ba-modal-cp .modal-body .ba-settings-item.ba-settings-textarea-type textarea::-webkit-input-placeholder,
.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-price input[type="number"]::-webkit-input-placeholder {
    color: var(--cp-main-color);
}

#bulk-adding-dialog.ba-modal-cp .modal-body .ba-settings-item.ba-settings-textarea-type textarea::-moz-placeholder,
.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-price input[type="number"]::-moz-placeholder {
    color: var(--cp-main-color);
}

.ba-modal-list-picker .modal-body input,
.conditional-logic-title input[type="text"],
div.ba-modal-cp input[type="text"] {
    padding: 5px 15px;
}

@media not all and (min-resolution:.001dpcm){
    @supports (-webkit-appearance:none) {
        div.ba-modal-cp select {
            -webkit-appearance:none;
        }
    }
}

#text-editor-dialog .modal-body input,
.conditional-logic-title input[type="text"],
.ba-integrations-search-wrapper input,
div.ba-modal-cp input:focus:invalid:focus,
div.ba-modal-cp textarea:focus:invalid:focus,
div.ba-modal-cp select:focus:invalid:focus,
.icons-tabs .tab-pane .ba-icons-search-wrapper input,
#add-columns-dialog .ba-range-wrapper input[type="number"],
.ba-settings-item.ba-settings-font-type .fonts-select input[type="text"],
div.ba-modal-cp input {
    color: #fff;
}

.ba-settings-item.ba-settings-font-type .fonts-select input {
    cursor: pointer;
}

.ba-integrations-group-wrapper .integrations-group,
.icons-tabs .tab-content .ba-options-group,
.ba-settings-item {
    align-items: center;
    display: flex;
    margin: 25px 0;
    position: relative;
}

.ba-settings-item.ba-settings-textarea-type {
    align-items: flex-start;
    flex-direction: column;
}

.ba-settings-item.ba-settings-lightbox-position-type,
#integration-element-options-modal .ba-settings-group .ba-settings-select-multiple-type {
    align-items: flex-start;
}

.ba-integrations-group-wrapper .integrations-group {
    flex-wrap: wrap;
}

#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-sortable-type,
#dropdown-field-settings-dialog .ba-settings-item.ba-settings-sortable-type,
#checkbox-field-settings-dialog .ba-settings-item.ba-settings-sortable-type,
#radio-field-settings-dialog .ba-settings-item.ba-settings-sortable-type {
    margin-bottom: 0;
}

#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper,
#dropdown-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper,
#checkbox-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper,
#radio-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper {
    padding-left: 15px;
    margin-top: 0;
}

#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper input::-webkit-input-placeholder, 
#dropdown-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper input::-webkit-input-placeholder, 
#checkbox-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper input::-webkit-input-placeholder,
#radio-field-settings-dialog .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper input::-webkit-input-placeholder {
    color: var(--cp-main-color);
}

.ba-subgroup-element:not(.visible-subgroup)  {
    display: none;
}

.conditional-logic-title input[type="text"],
.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-item input[type="text"] {
    background: transparent;
    border-bottom: 1px solid #34374a;
    border-radius: 0;
    width: 210px;
    min-width: 210px;
}

#poll-field-settings-dialog.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-item input[type="text"]:not([data-type="color"]) {
    text-overflow: ellipsis; 
}

#poll-field-settings-dialog.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-item input[type="text"].minicolors-input {
    min-width: 105px;
    width: 105px; 
}

#poll-field-settings-dialog.fields-editor-panel.ba-modal-cp .sorting-item .sorting-colorpicker {
    display: flex;
    align-items: center;
}

.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-item.with-sorting-image input[type="text"] {
    min-width: 150px;
    width: 150px;
}

#navigation-settings-dialog.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-item input[type="text"] {
    min-width: 330px;
    width: 330px;
}

.conditional-logic-title,
.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-price,
.fields-editor-panel.ba-modal-cp .ba-settings-group .sorting-title  {
    position: relative;
    margin-bottom: 5px;
}

.ba-focus-underline {
    background: var(--main-color);
    bottom: 0;
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
}

.conditional-logic-filter.active input + .ba-focus-underline,
input:focus + .ba-focus-underline {
    transform: scaleX(1);
}

.sorting-item.default-item {
    position: relative;
}

.sorting-item.default-item:not(.sortable-helper):before  {
    color: var(--main-color);
    content: '\f27d';
    font: normal normal normal 16px/1 'Material-Design-Iconic-Font';
    position: absolute;
    right: -20px;
    top: calc(50% - 11px);
}

.ba-settings-selected-dates-wrapper {
    align-items: baseline;
}

.selected-dates-wrapper.disable-range-dates {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    width: 265px;
}

.fields-editor-panel.ba-modal-cp .selected-dates-wrapper.disable-range-dates input[type="text"] {
    min-width: 123px;
    width: 123px !important;
}

.number-delimiter {
    color: var(--cp-main-color);
    font-size: 24px;
    margin: 0 5px 0 0;
}

.fields-editor-panel.ba-modal-cp .selected-dates-wrapper.disable-range-dates .number-delimiter {
   margin: 0 5px;
}

.ba-settings-item.ba-settings-color-scheme-type {
    margin: 0;
}

#custom-color-scheme-dialog .modal-body .ba-settings-item:first-child,
.basic-design-settings .ba-settings-group-title + .ba-settings-item,
.accordion-inner .ba-settings-item:first-child {
    margin-top: 0;
}

.accordion-inner .ba-settings-group ~ .ba-settings-group .ba-settings-item:first-child {
     margin: 25px 0;
}

.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="number"],
div.ba-modal-cp .ba-range-wrapper input[type=range] + input {
    margin-right: 3px;
    padding: 5px !important;
    width: 65px;
}

.ba-settings-item.ba-settings-margin-type,
.ba-settings-item.ba-settings-padding-type {
    flex-wrap: wrap;
}

.ba-settings-item.ba-settings-margin-type .ba-settings-item-title,
.ba-settings-item.ba-settings-padding-type .ba-settings-item-title {
    margin-bottom: 15px;
}

.ba-settings-item.ba-settings-margin-type > i,
.ba-settings-item.ba-settings-padding-type > i {
    color: var(--cp-main-color);
    margin-bottom: 15px;
}

.ba-settings-item.ba-settings-margin-type > i.link-enabled,
.ba-settings-item.ba-settings-padding-type > i.link-enabled,
.ba-settings-item.ba-settings-margin-type > i:hover,
.ba-settings-item.ba-settings-typography-toolbar-type > div i:hover,
.ba-settings-item.ba-settings-padding-type > i:hover {
    color: #fff;
}

.ba-units-value,
.ba-settings-item.ba-settings-margin-type .ba-settings-toolbar,
.ba-settings-item.ba-inline-checkbox > div > span,
.ba-settings-item.ba-settings-padding-type .ba-settings-toolbar {
    color: var(--cp-main-color);
    display: flex;
    font-size: 12px;
    font-weight: bold;
}

.ba-settings-item.ba-settings-margin-type .ba-settings-toolbar,
.ba-settings-item.ba-settings-padding-type .ba-settings-toolbar {
    width: 100%
}

.ba-settings-item.ba-settings-margin-type .ba-settings-toolbar > div,
.ba-settings-item.ba-inline-checkbox > div,
.ba-settings-item.ba-settings-padding-type .ba-settings-toolbar > div {
    align-items: center;
    display: flex;
    flex-direction: column-reverse;
    margin-right: 10px;
}

.ba-settings-item.ba-inline-checkbox > div {
    flex-grow: 1;
}

.ba-units-value,
.ba-settings-item.ba-settings-margin-type .ba-settings-toolbar .ba-units-select,
.ba-settings-item.ba-settings-padding-type .ba-settings-toolbar .ba-units-select {
    margin-left: 5px;
}

.ba-units-value,
.ba-settings-item.ba-settings-margin-type .ba-settings-toolbar span,
.ba-settings-item.ba-inline-checkbox > div > span,
.ba-settings-item.ba-settings-padding-type .ba-settings-toolbar span {
    margin-top: 10px;
    justify-content: center;
}

.ba-settings-item.ba-settings-margin-type .ba-settings-toolbar > div input,
.ba-settings-item.ba-settings-padding-type .ba-settings-toolbar > div input {
    width: 70px;
}

#condition-logic-modal .ba-settings-toolbar,
#condition-logic-modal .ba-settings-toolbar > div,
.ba-settings-item.ba-settings-typography-toolbar-type > div > div,
.ba-settings-item.ba-settings-typography-toolbar-type > div {
    display: flex;
}

#condition-logic-modal .ba-settings-toolbar > div label,
.ba-settings-item.ba-settings-typography-toolbar-type > div > div label  {
    margin-bottom: 0;
}

#poll-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i,
#condition-logic-modal .ba-settings-toolbar> div label:not(.active) i,
#condition-logic-modal .ba-settings-toolbar> div label:not(.active) > span:not(.ba-tooltip),
#dropdown-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i,
#checkbox-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i,
#radio-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i,
#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i {
    cursor: not-allowed;
}

#condition-logic-modal .ba-settings-toolbar > div label span:not(.ba-tooltip) {
    line-height: 24px;
    display: inline-block;
}

#condition-logic-modal .ba-settings-toolbar > div,
.ba-settings-item.ba-settings-typography-toolbar-type > div > div {
    background: #343749;
    border-radius: 3px;
    margin-right: 3px;
    overflow: hidden;
}

.condition-logic-horizontal-fields-wrapper .ba-settings-icon-type i,
#condition-logic-modal .ba-settings-toolbar > div i,
.ba-integrations-search-wrapper i,
.ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper i,
.ba-icons-search-wrapper i,
.ba-settings-input-type .input-action-icon i,
.ba-settings-item.ba-settings-typography-toolbar-type > div i {
    color: var(--cp-main-color);
}

#condition-logic-modal .ba-settings-toolbar > div i,
.ba-integrations-search-wrapper i,
.ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper i,
.ba-icons-search-wrapper i,
.ba-settings-input-type .input-action-icon i,
.ba-settings-item.ba-settings-typography-toolbar-type > div i {
    padding: 10px;
    border-radius: 0;
}

.ba-settings-input-type .input-action-icon {
    height: 45px;
    position: absolute;
    right: 0;
    top: 0;
    width: 45px;
}

#poll-field-settings-dialog .ba-settings-group .select-input[data-empty="false"]~ .input-click-trigger,
#poll-field-settings-dialog .ba-settings-group .select-input[data-empty="true"]~ .reset {
    display: none;
}

.ba-integrations-search-wrapper i,
.ba-icons-search-wrapper i,
.ba-settings-input-type .input-action-icon i {
    position: absolute;
    right: 0;
    top: 0;
}

.ba-integrations-search-wrapper i,
.ba-icons-search-wrapper i {
    right: 35px;
}

.ba-integrations-search-wrapper i {
    top: 20px;
}

.ba-settings-item.ba-settings-font-type .fonts-select {
    width: 265px;
    min-width: 265px;
}

.ba-settings-item.ba-settings-font-type .default-country-select ul.visible-select,
.ba-settings-item.ba-settings-font-type .fonts-select ul.visible-select {
    animation: none;
    background: var(--input-background);
    border-radius: 0;
    box-shadow: 0 50px 40px rgba(0,0,0,.15);
    margin-top: 45px;
    max-height: 290px;
}

.ba-modal-list-picker ul li {
    animation: none;
    color: #cad3da;
    font: 500 14px/18px "Roboto", sans-serif !important;
}

.ba-modal-list-picker ul li:before,
.ba-settings-item.ba-settings-font-type .fonts-select ul li:before {
    border-color: var(--cp-main-color);
}

.ba-input-field-options .accordion-body input[type="number"],
.ba-input-field-options .accordion-body input[type="text"],
.ba-input-field-options .accordion-body select,
.ba-settings-item.ba-settings-font-type .fonts-select input[type="text"] {
    background: var(--input-background);
    padding: 0 15px;
    height: 45px;
    width: 100%;
}

.ba-settings-item.ba-settings-font-type .fonts-select input[type="text"]::-webkit-input-placeholder {
    color: var(--cp-main-color);
}

.conditional-logic-filter,
.ba-settings-sortable-type .sorting-item {
    display: flex;
}

.ba-settings-sortable-type .sorting-item .sorting-icon {
    align-items: center;
    color: var(--cp-main-color);
    cursor: move;
    display: flex;
    width: 25px;
    transition: .3s;
}

.ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper i:hover,
.ba-settings-sortable-type .sorting-item .sorting-icon:hover {
    color: #fff;
}

.ba-settings-sortable-type .sorting-item .sorting-icon i{
    cursor: move;
    margin-bottom: 10px;
    font-size: 16px;
    margin-left: 10px;
}

.ba-settings-sortable-type .sorting-title {
    margin-right: 10px;
}

/* 
/* Rating 
*/

.ba-form-field-item.ba-form-rating-field .ba-field-container {
    text-align: var(--field-typography-text-align);
}

.ba-form-rating-group-wrapper {
    display: inline-flex;
    margin-top: 10px;
}

.ba-form-rating-group-wrapper label {
    background-repeat: no-repeat;
    background-size: cover;
    height: 32px;
    margin: 0 0 0 15px;
    transition: .3s;
    width: 32px;
}

.ba-form-rating-group-wrapper label:first-child {
    margin: 0;
}

/* Smiles */
.ba-form-rating-group-wrapper.smiles-layout label {
    background-image: url(../../../../../components/com_baforms/assets/images/smiles/very-unsatisfied.svg);
    filter: grayscale(1);
}

.ba-form-rating-group-wrapper.smiles-layout .ba-form-rating.active,
.ba-form-rating-group-wrapper.smiles-layout label:hover {
    filter: grayscale(0);
}

.ba-form-rating-group-wrapper.smiles-layout label:nth-child(2) {
    background-image: url(../../../../../components/com_baforms/assets/images/smiles/unsatisfied.svg);
}

.ba-form-rating-group-wrapper.smiles-layout label:nth-child(3) {
    background-image: url(../../../../../components/com_baforms/assets/images/smiles/neutral.svg);
}

.ba-form-rating-group-wrapper.smiles-layout label:nth-child(4) {
    background-image: url(../../../../../components/com_baforms/assets/images/smiles/satisfied.svg);
}

.ba-form-rating-group-wrapper.smiles-layout label:nth-child(5) {
    background-image: url(../../../../../components/com_baforms/assets/images/smiles/very-satisfied.svg);
}

.ba-form-rating-group-wrapper label input{
    height: 32px;
    width: 32px;
    margin: 0;
    opacity: 0;
}


/* Stars */
.ba-form-rating-group-wrapper.stars-layout label {
    position: relative;
}

.ba-form-rating-group-wrapper.stars-layout label:before {
    content: '\f27d';
    font: normal normal normal 32px/32px 'Material-Design-Iconic-Font';
    color: #f8cf4c;
    position: absolute;
}

.ba-form-rating-group-wrapper.stars-layout label {
    margin: 0;
    width: 35px;
}

.ba-form-rating-group-wrapper.stars-layout label:before {
    filter: grayscale(0);
}

.ba-form-rating-group-wrapper.stars-layout:not(:hover):not(.active) label:before,
.ba-form-rating-group-wrapper.stars-layout:not(:hover) label.active ~ label:before,
.ba-form-rating-group-wrapper.stars-layout label:hover ~ label:before {
    filter: grayscale(1);
}

/* Range */
.form-slider-wrapper,
.form-range-wrapper,
.ba-range-wrapper {
    display: flex;
    margin: 0;
    position: relative;
}

.form-slider-wrapper:before,
.form-range-wrapper:before,
.ba-range-wrapper:before {
    background: var(--input-background);
    border-radius: 6px;
    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: calc(50% - 3px);
    width: 115px;
}

.form-slider-wrapper:before,
.form-range-wrapper:before {
    height: 10px;
}

.form-slider-wrapper:before,
.form-range-wrapper:before {
    background: rgba(214, 214, 214, 0.4);
    width: 100%;
}

.ba-form-range-liner,
.ba-range-liner {
    background: var(--main-color);
    border-radius: 6px;
    height: 6px;
    left: 0;
    position: absolute;
    top: calc(50% - 3px);
}

.ba-form-range-liner {
    background: var(--theme-color);
    height: 10px;
}

.ba-form-range-liner:not([style*="100%"]) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.form-range-wrapper input,
.ba-range-wrapper input {
    background: var(--cp-main-color);
    border: none;
    box-sizing: border-box;
    height: 35px;
    margin-left: 20px;
    margin: 0;
    padding: 5px;
    position: relative;
    vertical-align: middle;
    width: 55px;
}

.ba-settings-panel-title-wrapper {
    align-items: baseline;
    display: inline-flex;
    flex-grow: 100;
}

.ba-settings-panel-option-wrapper {
    align-items: center;
    display: inline-flex;
    flex-grow: 1;
    float: right;
}

.form-range-wrapper input[type=range],
.ba-range-wrapper input[type=range] {
    -webkit-appearance: none;
    background-color: transparent;
    border: none !important;
    outline: none !important;
    height: 35px;
    margin-right: 25px;
    padding: 0;
    width: 115px;
}

.form-range-wrapper input[type=range] {
    margin-right: 0;
    width: 100%;
}

.form-range-wrapper input[type=range]:focus,
.ba-range-wrapper input[type=range]:focus {
    border-color: transparent;
    outline: none;
}

.form-range-wrapper input[type=range]::-webkit-slider-runnable-track,
.ba-range-wrapper input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
    height: 6px;
}

.form-range-wrapper input[type=range]::-webkit-slider-thumb,
.ba-range-wrapper input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-image: none;
    background: var(--main-color);
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    height: 24px;
    margin-top: -7px;
    transition: transform 0.1s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
    width: 24px;
}

.form-range-wrapper input[type=range]::-moz-range-thumb {
    background: var(--theme-color);
    width: 30px !important;
    height: 30px !important;
}

.ba-form-slider-field .form-range-wrapper input[type=range]::-webkit-slider-thumb {
    background: var(--theme-color);
    width: 30px;
    height: 30px;
}

.form-range-wrapper input[type=range]::-webkit-slider-thumb {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
    margin-top: -10px;
}

.ba-range-wrapper input[type=range]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(102, 218, 181, .3);
}

.form-range-wrapper input[type=range]::-moz-focus-outer,
.ba-range-wrapper input[type=range]::-moz-focus-outer {
    border: 0 !important;
    outline: none !important;
}

.form-range-wrapper input[type=range]::-moz-range-track,
.ba-range-wrapper input[type=range]::-moz-range-track {
    background: transparent;
    border: none;
    height: 6px;
}

.form-range-wrapper input[type=range]::-moz-range-thumb,
.ba-range-wrapper input[type=range]::-moz-range-thumb {
    -moz-transition: transform 0.1s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
    background: var(--main-color);
    border-radius: 50%;
    border: none;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    height: 24px;
    transform: translateY(2px);
    width: 24px;
}

.ba-range-wrapper input[type=range]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(102, 218, 181, .3);
}

.form-range-wrapper input[type=range]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .05);
}

.form-range-wrapper input[type=range]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .05);
}

.ba-field-container .form-slider-input-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.ba-field-container .form-slider-input-wrapper input[type="number"]{
    background: none;
    border-radius: 0;
    border: none;
    box-sizing: content-box;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 85px !important;
}

.ba-field-container .form-slider-input-wrapper input[type="number"][data-type="slider"] {
    text-align: left;
}

.ba-field-container .form-slider-input-wrapper input[type="number"][data-type="slider"] ~ input[type="number"][data-type="slider"] {
    text-align: right;
}

.ba-range-liner.ba-mirror-liner {
    transform: translateX(-100%);
}

.ba-range-liner.letter-spacing {
    left: 57.5px;
}

.basic-design-settings .modal-body .ba-settings-group:nth-child(4) .ba-range-wrapper {
    margin-right: 37px;
}

/* Slider */
.ba-form-slider-field input {
    background: var(--cp-main-color);
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    height: 35px;
    margin-left: 20px;
    margin: 0;
    padding: 5px;
    position: relative;
    vertical-align: middle;
    width: 55px;
}

.ba-form-slider-field input[type=range] {
    -webkit-appearance: none;
    background-color: transparent;
    border: none !important;
    outline: none !important;
    height: 35px;
    margin-right: 25px;
    padding: 0;
    width: 115px;
}

.ba-form-slider-field input[type=range] {
    margin-right: 0;
    width: 100%;
    pointer-events: none;
}

.ba-form-slider-field input[type=range] + input[type=range] {
    position: absolute;
}

.ba-form-slider-field input[type=range]:focus {
    border-color: transparent;
    outline: none;
}

.ba-form-slider-field input[type=range]::-webkit-slider-runnable-track {
    background: transparent;
    height: 6px;
}

.ba-form-slider-field input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    -webkit-appearance: none;
    background-image: none;
    background: var(--theme-color);
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    height: 30px;
    margin-top: -7px;
    transition: transform 0.1s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
    width: 30px;
}

.ba-form-slider-field input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
    margin-top: -10px;
}

.ba-form-slider-field input[type=range]::-moz-focus-outer {
    border: 0 !important;
    outline: none !important;
}

.ba-form-slider-field input[type=range]::-moz-range-track {
    background: transparent;
    border: none;
    height: 6px;
}

.ba-form-slider-field input[type=range]::-moz-range-thumb {
    background: var(--theme-color);
    border-radius: 50%;
    border: none;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    height: 30px;
    pointer-events: all;
    transform: translateY(2px);
    width: 30px;
    -moz-transition: transform 0.1s ease-in-out 0s, box-shadow 0.2s ease-in-out 0s;
}

.ba-form-slider-field input[type=range]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .05);
}

.ba-form-slider-field input[type=range]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, .05);
}

/* Checkbox */
.ba-form-toggle {
    min-width: auto;
    width: 55px;
}

.ba-form-toggle {
    margin-bottom: 0;
}

.ba-form-toggle input[type="checkbox"] ~ span:not(.ba-tooltip) {
    background: #3e495a;
    border-radius: 20px !important;
    border: none !important;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 30px !important;
    margin: 0;
    padding: 2px;
    position: relative;
    transition: all .4s ease;
    width: 55px !important;
}

.ba-form-toggle input[type="checkbox"]:checked ~ span:not(.ba-tooltip) {
    background: var(--main-color) !important;
}

.ba-form-toggle input[type="checkbox"] {
    display: none;
}

.ba-form-toggle input[type="checkbox"] ~ span:not(.ba-tooltip):after {
    background: #fff;
    border-radius: 50%;
    content: "" !important;
    display: block;
    height: 24px;
    left: 1px;
    position: relative;
    top: 1px;
    transition: all .2s ease;
    width: 24px;
}

.ba-form-toggle input[type="checkbox"]:checked ~ span:not(.ba-tooltip):after {
    left: 26px;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element,
.icons-tabs .tab-content .ba-group-element {
    margin: 0 15px 0 0;
}

.icons-tabs {
    height: calc(100% - 100px);
}

.conditional-logic-checkbox label,
.ba-form-checkbox.cancel-sortable {
    margin: 0;
    position: relative;
    margin-right: 30px;
}

.conditional-logic-checkbox .ba-form-checkbox > span,
.ba-form-checkbox.cancel-sortable > span {
    border-radius: 3px;
    border: 2px solid var(--cp-main-color);
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 20px;
    position: absolute;
    top: 10px;
    transition: .3s;
    width: 20px;
}

.conditional-logic-checkbox .ba-form-checkbox > span:hover,
.ba-form-checkbox.cancel-sortable > span:hover {
    border: 2px solid var(--main-color);
}

.conditional-logic-checkbox .ba-form-checkbox input[type="checkbox"]:checked + span,
.ba-form-checkbox.cancel-sortable input[type="checkbox"]:checked + span {
    border: 2px solid var(--main-color);
    background: var(--main-color);
}

.ba-form-acceptance-field label.ba-form-checkbox input[type="checkbox"]:checked + span,
.ba-form-field-item .ba-form-checkbox-wrapper input[type="checkbox"]:checked + span {
    border: 2px solid var(--theme-color);
    background: var(--theme-color);
}

.conditional-logic-checkbox .ba-form-checkbox input[type="checkbox"]:checked + span:before,
.ba-form-acceptance-field label.ba-form-checkbox input[type="checkbox"]:checked + span:before,
.ba-form-field-item .ba-form-checkbox-wrapper input[type="checkbox"]:checked + span:before,
.ba-form-checkbox.cancel-sortable input[type="checkbox"]:checked + span:before {
    color: #fff;
    content: '\f26b';
    display: block;
    font: normal normal normal 24px/26px 'Material-Design-Iconic-Font';
    text-align: center;
}

.conditional-logic-checkbox .ba-form-checkbox input[type="checkbox"]:checked + span:before,
.ba-form-checkbox.cancel-sortable input[type="checkbox"]:checked + span:before {
    font: normal normal normal 16px/16px 'Material-Design-Iconic-Font';
}

@keyframes checkbox-checked  {
    from { opacity: 0; transform: scale(0);}
    to { opacity: 1; transform: scale(1);}
}

.ba-form-field-item .ba-form-checkbox-wrapper input[type="checkbox"]:checked + span:before {
    animation: checkbox-checked .15s linear;
}

.ba-form-poll-field.ba-form-field-item .ba-form-radio,
.ba-cart-row-content .ba-form-radio,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio {
    margin-bottom: 0;
}

.ba-form-poll-field.ba-form-field-item .ba-form-radio input[type="radio"]:checked + span:before,
.ba-cart-row-content .ba-form-radio input[type="radio"]:checked + span:before,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio input[type="radio"]:checked + span:before {
    border-color: var(--theme-color);
}

.ba-form-poll-field.ba-form-field-item .ba-form-radio input[type="radio"]:checked + span:before,
.ba-cart-row-content .ba-form-radio input[type="radio"]:checked + span:before,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio input[type="radio"]:checked + span:before {
    background: var(--theme-color);
    border-radius: 50%;
    border: 2px solid var(--theme-color);
    box-shadow: inset 0px 0px 0px 3px var(--form-background-color);
    content: "";
    display: block;
    height: 30px;
    left: 0;
    opacity: 1;
    position: absolute;
    top: calc(var(--field-typography-line-height)/2 - 14px);
    width: 30px;
}

.sorting-image-wrapper .sorting-image {
    background-position: center;
    background-size: cover;
    border-radius: 3px;
    height: 45px;
    margin-right: 10px;
    position: relative;
    text-align: center;
    width: 45px;
}

.sorting-image-wrapper .sorting-image:after {
    background: #2e3241;
    bottom: 0;
    left: 0;
    content: "";
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
}

.sorting-image-wrapper .sorting-image:hover:after {
    opacity: .56;
}

.sorting-image-wrapper .sorting-image i {
    box-sizing: content-box;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    opacity: 0;
    padding: 10px;
    pointer-events: none;
    position: relative;
    text-align: center;
    transition: .3s;
    width: 24px;
    z-index: 1;
}

.sorting-image-wrapper .sorting-image:hover i {
    opacity: 1;
    pointer-events: all;
}

/* Signature Field */

.ba-form-signature-field .ba-signature-canvas {
    height: 150px !important;
}

.ba-form-signature-field .ba-signature-canvas {
    padding: 0 !important
}

.ba-form-signature-field .ba-field-container {
    display: flex;
    flex-direction: column;
}

.ba-form-signature-field .ba-clear-signature-canvas {
    cursor: pointer;
    color: var(--label-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-weight: 400;
    margin-top: 10px;
    opacity: .5;
    text-align: right;
    transition: .3s;
}

.ba-form-signature-field .ba-clear-signature-canvas:hover {
    opacity: 1;
}

.ba-form-signature-field .ba-field-container i {
    color: var(--field-icon-color);
    height: 90px;
    justify-content: center;
    left: calc(50% - 45px - var(--field-border-width)/2);
    position: absolute !important;
    top: 30px;
    width: 90px;
}

/* Checkbox Field */

.ba-form-acceptance-field .ba-field-container,
.ba-form-field-item .ba-form-checkbox-wrapper {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    flex-wrap: wrap;
    float: left;
    margin: 15px 0;
    position: relative;
    width: calc(100% / var(--checkbox-field-count));
}

.ba-form-field-item .ba-form-checkbox-wrapper.checkbox-image-wrapper {
    align-items: flex-end;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper.checkbox-image-wrapper .ba-checkbox-wrapper {
    align-items: flex-start;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper.checkbox-image-wrapper {
    align-content: flex-start;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper,
.ba-form-field-item .checkbox-image-group-wrapper .ba-form-checkbox-wrapper {
    border: 1px solid rgba(214, 214, 214, 0.4);
    border-left-color: transparent;
    cursor: pointer;
    padding: 25px;
    margin: 0;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper {
    border: 1px solid rgba(214, 214, 214, 0.4);   
}

.ba-form-poll-field.ba-form-field-item .ba-field-container {
    margin-top: 15px;
}

.ba-form-field-item .checkbox-image-group-wrapper .ba-form-checkbox-wrapper:first-child,
.ba-form-field-item .checkbox-image-group-wrapper .ba-form-checkbox-wrapper.last-row-checkbox-wrapper+.ba-form-checkbox-wrapper  {
    border-left: 1px solid rgba(214, 214, 214, 0.4);
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:hover,
.ba-form-field-item .checkbox-image-group-wrapper .ba-form-checkbox-wrapper:hover,
.checkbox-image-group-wrapper .checked-image-container.ba-form-checkbox-wrapper {
    border-color: var(--theme-color) !important;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:before,
.ba-form-field-item .checkbox-image-group-wrapper .ba-form-checkbox-wrapper:before,
.checkbox-image-group-wrapper .ba-form-checkbox-wrapper:before {
    border: 4px solid transparent;
    bottom: -3px;
    content: "";
    left: -3px;
    pointer-events: none;
    position: absolute;
    right: -3px;
    top: -3px;
    z-index: 1;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper.checked-image-container:before,
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:hover:before,
.ba-form-field-item .checkbox-image-group-wrapper .checked-image-container.ba-form-checkbox-wrapper:before,
.ba-form-field-item .ba-input-wrapper:not(.ba-alert) .checkbox-image-group-wrapper .ba-form-checkbox-wrapper:hover:before {
    border: 4px solid var(--theme-color) !important;
}

.ba-form-field-item .checkbox-image-group-wrapper .ba-form-checkbox-wrapper.last-row-checkbox-wrapper ~ .ba-form-checkbox-wrapper {
    border-top-color: transparent;
}

.ba-form-acceptance-field .ba-field-container,
.ba-form-field-item .ba-form-checkbox-wrapper .ba-checkbox-wrapper{
    box-sizing: border-box;
    display: inline-flex;
    min-height: 18px;
    padding-left: 50px;
    position: relative;
    width: 100%;
}

.ba-form-acceptance-field label.ba-form-checkbox > span,
.ba-form-field-item .ba-form-checkbox-wrapper label.ba-form-checkbox > span {
    background: rgba(214, 214, 214, 0.4);
    border-radius: .25em;
    border: 2px solid transparent;
    box-sizing: border-box;
    content: '';
    display: block;
    height: 30px;
    left: 0;
    position: absolute;
    top: calc(var(--field-typography-line-height)/2 - 14px);
    transition: all .3s;
    width: 30px;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:hover .ba-form-radio span:before,
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper .ba-form-radio span:hover:before,
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:hover label.ba-form-checkbox > span,
.ba-form-acceptance-field label.ba-form-checkbox > span:hover,
.checkbox-image-wrapper:hover .ba-checkbox-image + .ba-checkbox-wrapper .ba-form-radio span:before,
.checkbox-image-wrapper:hover .ba-checkbox-image + .ba-checkbox-wrapper .ba-form-checkbox > span,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio span:hover:before,
.ba-form-field-item .ba-form-checkbox-wrapper label.ba-form-checkbox > span:hover {
    border: 2px solid var(--theme-color) !important;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper .ba-form-radio span,
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper label.ba-form-checkbox > span,
.checkbox-image-wrapper .ba-checkbox-image + .ba-checkbox-wrapper .ba-form-radio span:before,
.checkbox-image-wrapper .ba-checkbox-image + .ba-checkbox-wrapper .ba-form-checkbox > span {
    transition: none !important;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper .ba-form-radio span:before,
.ba-form-poll-field.ba-form-field-item .ba-form-radio span:before,
.ba-cart-row-content .ba-form-radio span:before,
#disable-week-days-dialog .week-days-wrapper > div:before,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio span:before {
    background: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid var(--field-border-color);
    content: "";
    display: block;
    height: 30px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s;
    width: 30px;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper .ba-form-radio span:before ,
.ba-cart-row-content .ba-form-radio span:before,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-form-radio span:before {
    background: rgba(214, 214, 214, 0.4);
    border: 2px solid transparent;
    top: calc(var(--field-typography-line-height)/2 - 14px);
    transform: translateY(0);
}

.ba-cart-row-content .ba-form-radio input,
.ba-form-acceptance-field .ba-form-checkbox input,
.ba-form-field-item .ba-form-checkbox-wrapper input {
    display: none;
}

.ba-form-acceptance-field .ba-form-acceptance-html,
.ba-form-field-item .ba-form-checkbox-wrapper .ba-checkbox-title {
    color: var(--field-typography-color);
    cursor: text;
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    letter-spacing: var(--field-typography-letter-spacing);
    line-height: var(--field-typography-line-height);
    text-align: var(--field-typography-text-align);
    text-transform: var(--field-typography-text-transform);
    width: 100%;
}

.ba-form-acceptance-field .ba-form-acceptance-html a {
    color: var(--theme-color);
    cursor: default;
}

.ba-checkbox-image {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    width: 100%;
}

.ba-checkbox-image img {
    max-width: 100%;
    width: 100%;
}

.ba-checkbox-image + .ba-checkbox-wrapper {
    align-items: center;
    cursor: pointer;
    flex-direction: row-reverse;
    justify-content: center !important;
    padding: 20px 20px 20px 20px !important;
}

.ba-checkbox-image + .ba-checkbox-wrapper .ba-checkbox-title {
    width: auto;
    cursor: text;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper .ba-form-radio span:before,
.ba-cart-row-content .ba-form-radio span:before,
.ba-form-radio-field .ba-form-checkbox-wrapper .ba-checkbox-image + .ba-checkbox-wrapper .ba-form-radio span:before,
.ba-form-field-item .ba-form-checkbox-wrapper .ba-checkbox-image + .ba-checkbox-wrapper label.ba-form-checkbox > span {
    cursor: pointer;
    margin-right: 1em;
    position: static!important;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:not(.checkbox-image-wrapper) .ba-form-radio span:before {
    margin-right: 0;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:not(.last-row-checkbox-wrapper ) {
    border-right-width: 0;
}

/* Checkbox Field */
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-group-wrapper:not(.checkbox-image-group-wrapper) .ba-form-checkbox-wrapper {
    margin-bottom: 10px;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper .ba-form-radio span:before, 
.ba-form-poll-field.ba-form-field-item .ba-form-radio span:before,
.ba-form-poll-field.ba-form-field-item .ba-form-radio input[type="radio"]:checked + span:before,
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper label.ba-form-radio > span,
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper label.ba-form-checkbox > span {
    right: 0;
    left: auto;
}

.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper .ba-checkbox-wrapper {
    padding-left: 0;
    padding-right: 0;
}

.ba-form-poll-field .ba-form-checkbox-wrapper:not(.checkbox-image-wrapper) .ba-form-radio,
.ba-form-poll-field.ba-form-field-item .ba-form-checkbox-wrapper:not(.checkbox-image-wrapper) label.ba-form-checkbox {
    width: 30px;
    margin-left: 25px;
}


/*
/* Basic Design Settings
*/

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element,
.icons-tabs .tab-content .ba-group-element,
.color-scheme-item {
    align-items: center;
    background: var(--input-background);
    border-radius: 6px;
    border: 3px solid transparent;
    box-sizing: content-box;
    color: var(--cp-main-color);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 60px;
    justify-content: center;
    margin-bottom: 20px;
    padding: 10px;
    width: 60px;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element {
    border: 3px solid #2f3243;
    box-sizing: border-box;
    font-weight: 500;
    height: 170px;
    position: relative;
    width: 195px;
}

.disabled-licence .ba-form-field:not([data-key="input"]):not([data-key="submit"]):not([data-key="text"]):not([data-key="image"]):not([data-key="html"]),
.disabled-licence #condition-logic-modal .ba-settings-button-type a,
.disabled-licence #condition-logic-modal:not(.fullscrean) .ba-folder-tree > ul {
    opacity: .5;
}

.disabled-licence .ba-integrations-group-wrapper .integrations-group .ba-work-area-element .templates-element-image,
.disabled-licence .ba-integrations-group-wrapper .integrations-group .ba-work-area-element:not([data-id]) img {
    opacity: .25;
}

.disabled-licence .ba-form-field:not([data-key="input"]):not([data-key="submit"]):not([data-key="text"]):not([data-key="image"]):not([data-key="html"]) *,
.disabled-licence .ba-form-field:not([data-key="input"]):not([data-key="submit"]):not([data-key="text"]):not([data-key="image"]):not([data-key="html"]){
    cursor: pointer;
}

.disabled-licence #condition-logic-modal:not(.fullscrean) .ba-folder-tree > ul li:before {
    bottom: 0;
    content: "";
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element img {
    margin-bottom: 25px;
    max-height: 30px;
    max-width: 40px;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element.templates-element {
    height: 300px;
    width: 300px;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element.templates-element .templates-element-image {
    background-position: top,center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    margin-bottom: 20px;
    max-height: initial;
    max-width: none;
    width: 100%;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element.templates-element .templates-element-image + span {
    margin-bottom: 10px;
}

.icons-tabs .tab-content .ba-group-element span {
    display: none;
}

.icons-tabs .tab-content .ba-group-element i {
    font-size: 24px;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element:hover,
.icons-tabs .tab-content .ba-group-element:hover,
.color-scheme-item:hover {
    border-color: var(--main-color);
    color: #fff;
}

.color-scheme-item div {
    height: 30px;
    width: 100%;
}

.color-scheme-item div:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.color-scheme-item div + div {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.color-scheme-item:nth-child(1) div:first-child {
    background: #34dca2;
}

.color-scheme-item:nth-child(1) div + div {
    background: #fff;
}

.color-scheme-item:nth-child(2) div:first-child {
    background: #ff735e;
}

.color-scheme-item:nth-child(2) div + div {
    background: #fff;
}

.color-scheme-item:nth-child(3) div:first-child {
    background: #007df7;
}

.color-scheme-item:nth-child(3) div + div {
    background: #fff;
}

.color-scheme-item:nth-child(4) div:first-child {
    background: #00ada9;
}

.color-scheme-item:nth-child(4) div + div {
    background: #fff;
}

.color-scheme-item:nth-child(5) div:first-child {
    background: #34dca2;
}

.color-scheme-item:nth-child(5) div + div {
    background: #2a3035;
}

.color-scheme-item:nth-child(6) div:first-child {
    background: #ff735e;
}

.color-scheme-item:nth-child(6) div + div {
    background: #2a3035;
}

.color-scheme-item:nth-child(7) div:first-child {
    background: #007df7;
}

.color-scheme-item:nth-child(7) div + div {
    background: #2a3035;
}

.icons-tabs .tab-content .ba-options-group,
.basic-design-settings .ba-settings-item {
    flex-wrap: wrap;
    justify-content: space-between;
}

.icons-tabs .tab-content .ba-options-group {
    justify-content: flex-start;
}

#text-editor-dialog .modal-body input,
.ba-modal-list-picker .modal-body input,
.modify-item-suffix,
.conditional-logic-title input[type="text"],
#integration-element-options-modal .ba-settings-group select,
.ba-settings-group input[type="text"],
[class*="-data-tags"] input[type="text"],
.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"],
.ba-settings-item.ba-settings-select-type select {
    cursor: pointer;
    height: 45px;
    min-width: 265px;
    width: 265px;
}

#text-editor-dialog .modal-body input[type="text"] {
    cursor: text;
    max-width: 695px;
    width: calc(100% - 11px);
}

.forms-cp-panel-right #text-editor-dialog .modal-body input[type="text"] {
    max-width: 100%;
    width: 100%;
}

.disabled-licence .ba-form-page > .ba-edit-item .ba-buttons-wrapper .ba-edit-wrapper:not(:first-child),
.disabled-licence .ba-settings-item.ba-settings-select-type select option[value="password"],
.disabled-licence .ba-settings-item.ba-settings-select-type select option[value="phone"],
.disabled-licence .ba-settings-item.ba-settings-select-type select option[value="zip"],
.disabled-licence .ba-settings-item.ba-settings-select-type select option[value="card"],
.disabled-licence .ba-settings-item.ba-settings-select-type select option[value="date"],
.disabled-licence .ba-settings-item.ba-settings-select-type select option[value="time"],
.disabled-licence .add-new-page,
.disabled-licence .ba-settings-item.ba-settings-select-type select option[value="lightbox"] {
    display: none;
}

.conditional-logic-title input[type="text"] {
    min-width: auto;
    width: 100%;
}

#integration-element-options-modal .ba-settings-group input[type="text"]:not(.select-image) {
    cursor: text;
}

.ba-modal-list-picker .modal-body input,
#integration-element-options-modal .ba-settings-group select,
#integration-element-options-modal .ba-settings-group input[type="text"] {
    background: #3c3f52;
}

.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"]::-webkit-input-placeholder {
    color: var(--cp-main-color);
}

#default-value-dialog [class*="-data-tags"] > div:hover >.ba-settings-item-title {
    color: #fff;
}

#default-value-dialog [class*="-data-tags"] > div input[type="text"] {
    width: 150px;
}

#integration-element-options-modal .integration-options[data-group="zoho_crm"] .ba-settings-group input,
.fields-editor-panel.ba-modal-cp .ba-settings-group input[data-option="default"],
.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"].select-input {
    padding-right: 45px;
    text-overflow: ellipsis;
}

#integration-element-options-modal .integration-options[data-group="zoho_crm"] .ba-settings-group input {
    text-overflow: initial;
}

.ba-settings-item.ba-settings-select-type select[data-option="validation"][disabled="disabled"] {
    cursor: not-allowed;
}

.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"]:not(.select-input),
.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"].select-input.field-id-input {
    cursor: text !important;
}

.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"]:not(.select-input)[data-option="subject"] {
    padding-right: 45px;
}

[class*="-data-tags"] input[type="text"],
.fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"].select-input.field-id-input {
    color: var(--cp-main-color);
}

/*
/* Add Columns
*/

#add-columns-dialog {
    box-sizing: border-box;
    height: 90px;
    padding: 20px 30px;
    width: 360px;
    background: var(--dark-modal-bg);
}

#add-columns-dialog .ba-settings-item {
    margin: 5px 0;
}

#add-columns-dialog.ba-modal-picker:before {
    border: 5px solid transparent;
    border-top: 5px solid #2f3243;
    bottom: -10px;
    margin-left: -5px;
    right: calc(50% - 5px);
}

.visible-add-columns-dialog .columns-dialog-parent > .ba-edit-item {
    display: inline-flex!important;
    animation: none!important;
}

.columns-dialog-parent > .ba-edit-item .edit-settings i {
    transform: none!important;
}

.visible-add-columns-dialog .ba-edit-item,
.visible-add-columns-dialog .ba-buttons-wrapper,
.visible-add-columns-dialog .ba-tooltip  {
    display: none !important;
}

.ba-column-resize .empty-item,
.visible-add-columns-dialog .ba-form-row,
.visible-add-columns-dialog .ba-edit-item,
.visible-add-columns-dialog .add-new-page,
.visible-add-columns-dialog .ba-page-resizer,
.visible-add-columns-dialog .ba-column-resizer {
    pointer-events: none;
}

/*
/* Modal MD
*/
.modal.ba-modal-md {
    border-radius: 6px;
    box-sizing: border-box;
    left: 50%;
    height: auto;
    margin-left: -250px;
    padding: 0;
    top: calc(50% - 275px) !important;
    width: 500px;
}

.modal.ba-modal-md .modal-body {
    max-height: none;
    padding: 0;
    width: 100%;
}

#integration-element-options-modal .modal-footer,
.ba-modal-md .modal-footer {
    background-color: transparent;
    border-top: 1px solid #3b3e54;
    box-shadow: none;
    padding: 0;
    text-align: center;
    flex-wrap: nowrap;
}

#integration-element-options-modal .modal-footer {
    background-color: var(--dark-modal-bg);
}

.modal.ba-modal-md .ba-modal-header h3 {
    font-weight: 500;
    line-height: 20px;
    font-size: 18px;
    margin: 0;
}

#move-to-modal.ba-modal-md .ba-modal-header h3 {
    color: #fff;
}

.modal.ba-modal-md .ba-modal-header i {
    color: #fff;
    font-weight: normal;
    opacity: 1;
    position: absolute;
    right: 10px;
    text-shadow: none;
    top: 10px;
}

.availible-folders ul i,
.ba-folder-tree li a i,
.ba-folder-tree li i:not(.zmdi-folder),
.uploader-nav i {
    vertical-align: sub;
}

.availible-folders {
    background: var(--input-background);
    box-sizing: border-box;
    font-weight: 500;
    margin: 0;
    max-height: 430px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

#integration-element-options-modal .modal-header,
#integration-element-options-modal .modal-body,
#move-to-modal {
    background: var(--input-background);
}

/* Modal MD Button */
#integration-element-options-modal .modal-footer a,
.ba-modal-md .modal-footer a {
    background: var(--input-background);
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
    float: left;
    font-size: 14px;
    font-weight: 700;
    padding: 21px 0 !important;
    text-align: center;
    width: 50%;
}

#integration-element-options-modal .modal-footer a,
#move-to-modal .modal-footer a {
    color: var(--cp-main-color);
}

#move-to-modal .modal-footer a.ba-btn-primary:not(.active-button){
    opacity: .3;
}

#integration-element-options-modal .modal-footer a:not(:last-child),
.ba-modal-md .modal-footer a:first-child {
    border-right: 1px solid #3b3e54;
}

#integration-element-options-modal .modal-footer a:hover,
#move-to-modal .modal-footer a:first-child:hover,
.ba-modal-md .modal-footer a:first-child:hover {
    color: #fff;
}

#integration-element-options-modal .modal-footer a.ba-btn-primary {
    cursor: pointer !important;
}

.ba-modal-md a.ba-btn-primary:before {
    background: #65d9b4 ;
    border-radius: 100%;
    content: '';
    display: block;
    height: 5px;
    left: 50%;
    margin: -2px 0 0 -2px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale(0);
    transition: all .4s ease;
    width: 5px;
    z-index: -1;
}

.ba-modal-md a.ba-btn-primary.active-button:before {
    transform: scale(65);
    opacity: 1;
}

.ba-modal-md a.active-button:hover:after {
    background: #65d9b4;
    opacity: 1;
    transform: scale(65);
    z-index: -1;
}

/*
/* Modal LG
*/

#integration-element-options-modal,
.modal.ba-modal-md,
.modal.ba-modal-lg {
    border: none;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
}

.ba-modal-lg div > .nav-tabs {
    height: auto;
}

.modal.ba-modal-cp h3.ba-modal-title,
.modal.ba-modal-lg h3.ba-modal-title {
    margin: 0;
    color: #fff;
}

.modal.ba-modal-lg h3.ba-modal-title + .modal-header-icon {
    float: right;
}

.modal-header-icon i {
    color: #fff;
    line-height: 18px;
}

.modal.ba-modal-cp .modal-header-icon i,
.modal.ba-modal-lg .modal-header-icon i {
    cursor: pointer !important;
    padding: 0 8px;
}

.ba-modal-cp .modal-header .select-modal-cp-position:hover i,
.modal.ba-modal-cp .modal-header-icon i:hover,
.modal.ba-modal-lg .modal-header-icon i:hover {
    color: var(--cp-main-color);
}

.modal.ba-modal-lg {
    background: transparent;
    border-radius: 6px;
    height: 600px;
    left: 50%;
    margin-left: -485px;
    top: calc(50% - 300px);
    transition: all .3s cubic-bezier(.25,.98,.26,.99);
    width: 970px;
}

@keyframes uploader-modal {
    from {margin-top: 100vh;}
}

.fields-editor-panel.ba-modal-cp,
#design-settings-dialog,
.modal.ba-modal-lg.in {
    animation: uploader-modal .5s cubic-bezier(.25,.98,.26,.99);
}

.fields-editor-panel.ba-modal-cp:not([style*="position: fixed"]),
#design-settings-dialog:not([style*="position: fixed"]),
.modal.ba-modal-lg.in {
    top: calc(50% - 300px);
}

@keyframes close-modal {
    0% {margin-top: 0;}
    100% {margin-top: 100vh;}
}

.fields-editor-panel.ba-modal-cp.ba-modal-close,
#design-settings-dialog.ba-modal-close,
.modal.ba-modal-lg.ba-modal-close {
    animation: close-modal .5s cubic-bezier(.25,.98,.26,.99) both;
    display: block !important;
}

.modal.ba-modal-lg .modal-body {
    max-height: 600px;
    overflow: visible !important;
    padding: 0;
    width: 100%;
}

#code-editor-dialog .modal-body,
#text-editor-dialog .modal-body,
#html-editor-dialog .modal-body {
    max-height: 100%;
}

#text-editor-dialog .modal-body .ba-settings-group {
    border-bottom: none;
}

.modal.ba-modal-lg .modal-body iframe {
    height: 600px;
    transition: all .5s;
}

body.contentpane.component {
    background: #fafafa;
    height: 100%;
    padding: 0;
}

.draggable-handle *,
.draggable-handle {
    cursor: move !important;
}

/* Modal L fullscrean */
.modal.ba-modal-lg.fullscrean {
    height: 98%;
    left: 1%;
    margin: 0;
    top: 1%;
    width: 98%;
}

.modal.ba-modal-lg.fullscrean .modal-body,
.modal.ba-modal-lg.fullscrean .modal-body iframe {
    height: 98vh;
    max-height: none;
}

.ba-modal-lg .nav-tabs {
    color: #fff;
    font-size: 16px;
    min-height: 40px;
    overflow: hidden;
    position: relative;
    text-transform: capitalize;
}

/* Settings Tabs */
div > .nav-tabs {
    background: #1da6f4;
    border: none !important;
    height: 60px;
    margin: 0;
    padding: 0;
}

div > .nav-tabs > li {
    display: inline-flex;
}

.icons-tabs .nav-tabs > li,
.ba-modal-cp .nav-tabs > li {
    flex-grow: 1;
    min-width: 20%;
}

.icons-tabs .nav-tabs > li {
    width: 100%;
}

.icons-tabs .nav-tabs li a,
.modal .nav-tabs li a {
    align-items: center;
    border-radius: 0;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    font: 500 12px/20px 'Roboto', sans-serif;
    letter-spacing: 1px;
    margin: 0;
    max-width: 250px;
    opacity: .65;
    padding: 20px;
    position: relative;
    text-overflow: ellipsis;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.ba-modal-lg .nav-tabs li a {
    display: block;
}

div > .nav-tabs a:before {
    background: #fff;
    bottom: 0px;
    content: "";
    height: 4px;
    left: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 100;
}

.ba-modal-lg div > .nav-tabs a:before {
    bottom: 1px;
}

div > .nav-tabs .active a:before {
    transition: opacity .01s ease-in-out;
    transition-delay: .35s;
    opacity: 1;
}

.icons-tabs .nav-tabs li a:before {
    transition: all .2s ease-in-out;
}

.icons-tabs .nav-tabs li:not(.active) a:before {
    height: 0;
}

@keyframes icons-active {
    from { opacity: 0;}
    to {opacity: 1;}
}

.icons-tabs .tab-pane.active {
    animation: icons-active .4s .1s ease-in-out both;
    overflow: hidden;
    padding: 20px 0;
}

#default-value-dialog .modal-body > div,
.icons-tabs .tab-pane > div {
    box-sizing: border-box;
    padding: 0 30px;
}

.icons-tabs .tab-pane .ba-icons-search-wrapper {
    padding-bottom: 20px !important;
}

.ba-integrations-search-wrapper input,
#default-value-dialog .ba-settings-group .select-data-tags-type,
.icons-tabs .tab-pane .ba-icons-search-wrapper input,
.icons-tabs .tab-pane > div input {
    padding: 5px 45px 5px 15px;
}

.ba-integrations-group-wrapper,
.icons-tabs .tab-pane > div:not(.ba-icons-search-wrapper) {
    padding: 0 10px 0 30px;
    height: calc(100% - 45px);
    overflow-y: scroll;
}

.ba-integrations-group-wrapper {
    height: calc(100% - 85px);
}

#templates-modal .ba-integrations-group-wrapper {
    height: 100%;
}

div > .nav-tabs > .active > a,
div > .nav-tabs > .active > a:hover,
div > .nav-tabs > .active > a:focus,
.modal .nav-tabs a:hover,
div > .nav-tabs li.active a {
    background: transparent;
    border: none !important;
    color: #fff ;
    opacity: 1;
}

body:not(.pdf-submissions-activated) .pdf-attachment-option{
    display: none;
}

.trigger-picker-modal.default-country-select:before {
    content: '\f2f9';
    font: normal normal 18px/24px'Material-Design-Iconic-Font';
    position: absolute;
    right: 10px;
    top: calc(50% - 12px);
}

.accordion-group.calculation-field-design-group:not(.field-inherit-enabled) .field-design-options {
    display: none;
}

.accordion-group.calculation-field-design-group:not(.field-inherit-enabled) .ba-settings-group:not(.field-design-options) {
    border-bottom: none !important; 
}

/* ========================================================================
    Panel-right
 ========================================================================== */
.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) {    
    animation: none !important;
    border-left: 1px solid #e3e3e3;
    border-radius: 0;
    border-right: 1px solid #e3e3e3;
    box-shadow: none;
    left: auto !important;
    min-height: calc(100vh - 46px)!important;
    right: 0 !important;
    top: 148px !important;
    transition: none !important;
    z-index: 1;
    min-width: 450px;
    width: var(--modal-cp-width);   
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .modal-header,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .modal-header,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .modal-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: 1px solid #e3e3e3;
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .modal-body,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .modal-body,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .modal-body {
    min-height: calc(100vh - 222px);
    height: calc(100% - 222px);
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#bulk-adding-dialog)#design-settings-dialog .modal-body {
    min-height: calc(100vh - 276px);
    height: calc(100% - 276px);
}

.forms-cp-panel-right .ba-forms-workspace {
    width: calc(100vw - 292px - var(--modal-cp-width));
    max-width: calc(100vw - 742px);
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .resize-handle-left,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .resize-handle-left,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .resize-handle-left {
    align-items: center;
    bottom: 0;
    cursor: col-resize;
    display: flex;
    height: calc(100vh - 147px);
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
    z-index: 100;
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .resize-handle-left:before,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .resize-handle-left:before,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .resize-handle-left:before {
    color: #4f2b4f;
    content: '\f19b';
    font: normal normal normal 24px/1 'Material-Design-Iconic-Font';
    opacity: .1; 
    transition: all .3s ease-in-out;
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .resize-handle-left:hover:before,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .resize-handle-left:hover:before,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .resize-handle-left:hover:before {
    opacity: 1;
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .draggable-handle *:not(i):not(select),
.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .draggable-handle,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .draggable-handle *:not(i):not(select),
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .draggable-handle,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .draggable-handle *:not(i):not(select), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .draggable-handle {
    cursor: default!important;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .modal-body, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .tab-content > div {
    width: var(--modal-cp-width);
    min-width: 450px;
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .modal-header,
.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .modal-body,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .modal-header,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .modal-body,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .modal-header-icon i,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .accordion-heading .accordion-toggle:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .tab-content,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .modal-body,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .modal-header {
    background: #f5f5f5;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .select-modal-cp-position:hover i,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .modal-header-icon i:hover{
    opacity: .5;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) div > .nav-tabs {
    border-bottom: 1px solid #e3e3e3 !important; 
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .nav-tabs li a {
    font-weight: 500;
}
.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg h3.ba-modal-title,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg h3.ba-modal-title,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) h3.ba-modal-title,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .accordion-heading .accordion-toggle,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .nav-tabs li a:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .code-nav .active a {
    color: #1a1a1a;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#poll-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#total-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#dropdown-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#checkbox-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#radio-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover) {
    color: #757575 !important;   
}

.forms-cp-panel-right #html-editor-dialog.modal.ba-modal-lg .modal-header-icon i,
.forms-cp-panel-right #text-editor-dialog.modal.ba-modal-lg .modal-header-icon i, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .nav-tabs li a,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper i, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .modal-header-icon i,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-margin-type > i, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-padding-type > i {
    color: #757575;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-margin-type > i:not(.link-enabled), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-padding-type > i:not(.link-enabled),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-margin-type > i.link-enabled:hover, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-padding-type > i.link-enabled:hover {
    opacity: .5;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-margin-type > i:not(.link-enabled):hover, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-padding-type > i:not(.link-enabled):hover {
    opacity: 1;
} 

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .accordion-group {
    border-bottom: 1px solid #e3e3e3;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .selected-dates-tags,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-font-type .fonts-select,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .modify-item-suffix, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-group input[type="text"]:not(.cancel-sortable):not([data-type="color"]), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="text"]:not(.cancel-sortable):not([data-type="color"]), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) select:not([data-group="characters"]):not(.ba-units-select),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) #submit-button-general-settings .ba-settings-item.ba-settings-textarea-type textarea,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) #submit-button-general-settings input, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) #submit-button-general-settings select {
    width: calc(var(--modal-cp-width) - 185px);
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-form-toggle input[type="checkbox"] ~ span:not(.ba-tooltip) {
    background: #ddd    
}

.forms-cp-panel-right .fields-editor-panel.ba-modal-cp .ba-settings-group input[type="text"]::-webkit-input-placeholder {
    color: #999;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-range-wrapper input[type=range]::-webkit-slider-thumb {
    box-shadow: none;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-range-wrapper input[type=range]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(102, 218, 181, .3);
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-range-wrapper input[type=range]::-moz-range-thumb {
    box-shadow: none;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-range-wrapper input[type=range]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(102, 218, 181, .3);
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-margin-type .ba-settings-toolbar span, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-inline-checkbox .ba-settings-item-title,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-units-value,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal) .ba-settings-item.ba-settings-padding-type .ba-settings-toolbar {
    color:#757575;
    font-weight:500;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-item.ba-settings-input-type.add-new-select-item-wrapper i:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-item.ba-settings-margin-type > i:hover, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-item.ba-settings-padding-type > i:hover {
    color: #757575;
    opacity: .5;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-range-wrapper:before,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .color-scheme-item,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-item.ba-settings-typography-toolbar-type > div > div {
    background: #e5e5e5;
}


.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-item-title {
    color: #3f3f3f;
    width: 100px;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-item.ba-settings-typography-toolbar-type > div i {
    color: #566e78;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .modal-body .ba-settings-group-title {
    color: #1a1a1a;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .modal-body .ba-settings-group,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .modal-body .basic-design-settings .ba-settings-group {
    border-bottom: 1px solid #e3e3e3;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .accordion-inner .ba-settings-group:last-child{
    border: none !important;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-sortable-type .sorting-item .sorting-icon:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .color-scheme-item:hover {
    color: var(--cp-main-color);
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .modal-footer > i {
    opacity: 0;
    pointer-events: none;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group .sorting-price input[type="number"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"], 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group .sorting-item input[type="text"] {
    background: transparent!important;
    border-bottom:1px solid #e3e3e3!important;
}

.forms-cp-panel-right #text-editor-dialog .modal-body input[type="text"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"], 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .ba-range-wrapper input[type=range] + input ,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .ba-settings-item.ba-settings-textarea-type textarea,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) input:not(.ba-range), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) select {
    background:#e5e5e5;
    color:#3f3f3f;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-group="tax"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-group="padding"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-option="discount"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][class="minicolors-opacity"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-option="min"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-option="max"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-option="step"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-option="filesize"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-option="count"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal).fields-editor-panel .ba-settings-group input[type="number"][data-group="characters"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#integration-element-options-modal):not(#bulk-adding-dialog) .ba-range-wrapper input[type=range] + input  {
    background:#e5e5e5 !important;  
    border-bottom: none!important;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#poll-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#total-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#dropdown-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-sortable-type .sorting-item .sorting-icon:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#checkbox-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#radio-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i {
    opacity: .5;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#poll-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#total-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#dropdown-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover), 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#checkbox-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover),
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#radio-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i:not(:hover) {
    background: transparent !important;    
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#poll-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#total-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i:hover, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#dropdown-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i:hover, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#select-multiple-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#checkbox-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i:hover,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#radio-field-settings-dialog .ba-settings-item.ba-settings-typography-toolbar-type > div > div label:not(.active) i:hover {
    color: #3f3f3f !important;
    background: transparent!important ; 
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog):not(#design-settings-dialog) .modal-footer {
    display: none;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#design-settings-dialog .modal-footer {
   background: #f5f5f5;
   border-top: 1px solid #e3e3e3
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#design-settings-dialog .modal-footer .design-settings-switcher span {
    font-weight: 400 !important; 
    color: #333 !important;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#design-settings-dialog .modal-footer .design-settings-switcher i {
    color: #757575 !important;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#design-settings-dialog .modal-footer .design-settings-switcher {
    transition: .3s;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#design-settings-dialog .modal-footer .design-settings-switcher:hover  {
    opacity: .5;
}

.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-text-editor-type {
    justify-content: flex-end;
}

.forms-cp-panel-right .ba-form-calculator-screen {
    font-weight: 500;
}

.forms-cp-panel-right .ba-form-calculator-screen,
.forms-cp-panel-right .ba-form-calculator-row .ba-form-calculator-btn {
    background:#e5e5e5;
    color:#3f3f3f;   
}

.forms-cp-panel-right .ba-form-calculator-btn[data-fields] {
    color: #fff !important;
}

.forms-cp-panel-right .basic-design-settings .ba-settings-item.ba-settings-color-scheme-type {
    justify-content: flex-start;
}

.forms-cp-panel-right .color-scheme-item {
    margin-right: 10px;
}

#bulk-adding-dialog .select-modal-cp-position {
    display: none;
}

/* Panel Right Text-Editor */

.forms-cp-panel-right #text-editor-dialog span.cke_toolgroup,
.forms-cp-panel-right #text-editor-dialog  div .cke_contents ,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) span.cke_toolgroup,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-settings-text-editor-type .text-editor-textarea + div .cke_contents {
    background:#e5e5e5;
}

.forms-cp-panel-right #text-editor-dialog a.cke_combo_button,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) a.cke_combo_button {
    background:#e5e5e5 !important;    
}

.forms-cp-panel-right #text-editor-dialog .cke_top,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .cke_top {
    background: transparent !important;
}

.forms-cp-panel-right #text-editor-dialog .ba-form-calculator-row .ba-form-calculator-btn, 
.forms-cp-panel-right #text-editor-dialog .cke_ltr .cke_button__source_icon, 
.forms-cp-panel-right #text-editor-dialog .cke_ltr .cke_button__bulletedlist_icon, 
.forms-cp-panel-right #text-editor-dialog .cke_ltr .cke_button__numberedlist_icon, 
.forms-cp-panel-right #text-editor-dialog span.cke_button_icon,
.forms-cp-panel-right #text-editor-dialog .cke_reset_all a.cke_button__mytextcolor,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .ba-form-calculator-row .ba-form-calculator-btn, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .cke_ltr .cke_button__source_icon, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .cke_ltr .cke_button__bulletedlist_icon, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .cke_ltr .cke_button__numberedlist_icon, 
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) span.cke_button_icon,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .cke_reset_all a.cke_button__mytextcolor {
    backface-visibility: hidden;
    color: #566e78;
    -webkit-font-smoothing: antialiased;
}

.forms-cp-panel-right #text-editor-dialog .cke_combo_arrow,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .cke_combo_arrow {
    border-top: 3px solid #757575;
}

.forms-cp-panel-right #text-editor-dialog body[class*="cke_"],
.forms-cp-panel-right #text-editor-dialog .cke_combo_text,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) body[class*="cke_"],
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .cke_combo_text {
    color: #3f3f3f;
}


.forms-cp-panel-right textarea.cke_source,
body[class*="cke_"].forms-cp-panel-right-enabled {
    color:#3f3f3f;
}

.forms-cp-panel-right #text-editor-dialog .modal-body::-webkit-scrollbar-thumb,
.forms-cp-panel-right #text-editor-dialog .modal-body::-webkit-scrollbar-thumb ,
.forms-cp-panel-right #text-editor-dialog .tab-content > div::-webkit-scrollbar-thumb,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog) .modal-body::-webkit-scrollbar-thumb,
.forms-cp-panel-right div.ba-modal-cp:not(#default-value-dialog):not(#select-icon-dialog)#design-settings-dialog .modal-body::-webkit-scrollbar-thumb ,
.forms-cp-panel-right  div.ba-modal-cp .tab-content > div::-webkit-scrollbar-thumb {
    background: #ddd;
}

.forms-cp-panel-right .ba-forms-workspace::-webkit-scrollbar {
    height: 6px;
}

.forms-cp-panel-right  .cke_combo.cke_combo__format.cke_combo_on {
    background: transparent;
}

.forms-cp-panel-right  .lightbox-position-wrapper > div {
    background: #e5e5e5;
}

/* ========================================================================
    Froms Lightbox Layout
 ========================================================================== */
.ba-forms-workspace:not(.ba-forms-lightbox-enabled) .ba-forms-workspace-lightbox-backdrop,
.ba-forms-workspace:not(.ba-forms-lightbox-enabled) .ba-forms-workspace-lightbox-edit-icons,
.ba-forms-workspace:not(.ba-forms-lightbox-enabled) .ba-forms-lightbox-row {
    display: none;
}

.ba-forms-workspace.ba-forms-lightbox-enabled {
    background: var(--lightbox-color);
    overflow-x: hidden;
    transition: background .3s;
}

.ba-forms-workspace.ba-forms-lightbox-enabled:not(.lightbox-position-center) {
    background:transparent !important;
}

.ba-forms-workspace.ba-forms-lightbox-enabled:not(.lightbox-position-center) .edit-lightbox-color {
    display: none;
}

/* Lightbox Position*/

.lightbox-position-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-right: 135px;
    width: 135px;
    min-width: 135px;
}

.lightbox-position-wrapper > div {
    background: #343749;
    border-radius: 3px;
    cursor: pointer;
    height: 40px;
    margin: 5px 0 0 5px;
    transition: .3s;
    width: 40px;
}

.lightbox-position-wrapper > div.active,
.lightbox-position-wrapper > div:hover {
    background: var(--main-color) !important;
}

/*
/* Lightbox Effect
*/

.ba-forms-workspace.ba-forms-lightbox-enabled .ba-form-page {
    transition: opacity .3s, transform .3s ;
}

.ba-forms-workspace.ba-forms-lightbox-enabled .ba-forms-workspace-body {
    perspective: 1300px;
}

/* Fade In */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-1 .ba-form-page {
    opacity: 0;
}

/* Scale In */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-2 .ba-form-page {
    opacity: 0;
    transform: scale(0.7);
}

/* Slide In Left */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-3 .ba-form-page {
    opacity: 0;
    transform: translateX(-50%);
}

/* Slide In Right */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-4 .ba-form-page {
    opacity: 0;
    transform: translateX(50%);
}

/* Slide In Top */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-6 .ba-form-page {
    opacity: 0;
    transform: translateY(50%);
}

/* Slide In Bottom */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-5 .ba-form-page {
    opacity: 0;
    transform: translateY(-50%);
}

/* Spinner */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-7 .ba-form-page {
    opacity: 0;
    transform: scale(0) rotate(720deg);
}

/* Fall In */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-8 .ba-form-page {
    opacity: 0;
    transform-style: preserve-3d;
    transform: translateZ(600px) rotateX(20deg);
}

/* Flip Horizontal */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-9 .ba-form-page {
    opacity: 0;
    transform: rotateY(-70deg);
    transform-style: preserve-3d;
}

/* Flip Vertical */
.ba-forms-workspace.ba-forms-lightbox-enabled.ba-forms-lightbox-effect-10 .ba-form-page {
    opacity: 0;
    transform: rotateX(-70deg);
    transform-style: preserve-3d;
}

.ba-forms-workspace-lightbox-edit-icons {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
}

.ba-forms-workspace.ba-forms-lightbox-enabled.lightbox-position-center .add-new-page i,
.lightbox-position-center .ba-forms-workspace-lightbox-edit-icons i {
    background: rgba(0, 0, 0, .25);
    color: #fff !important;
}

.ba-forms-workspace.ba-forms-lightbox-enabled .add-new-page i:hover,
.ba-forms-workspace-lightbox-edit-icons i:hover {
    opacity: .75;
}

.ba-forms-lightbox-row {
    text-align: right;
    transform: translate(calc(0px - var(--form-padding-left)), calc(0px - var(--form-padding-top)));
    width: calc(100% + var(--form-padding-left) + var(--form-padding-right));
}

.ba-forms-lightbox-row i {
    color: var(--label-typography-color) !important;
    padding: 20px !important;
}

/* ========================================================================
    Code Editor Settings
 ========================================================================== */
div.ba-modal-cp:not([style*="position: fixed"]),
.code-editor-dialog.modal.ba-modal-lg,
#text-editor-dialog.modal.ba-modal-lg {
    left: calc(100% - 50px);
    margin-left: -450px;
}

.code-editor-dialog.modal.ba-modal-lg[style*="position: fixed"],
#text-editor-dialog.modal.ba-modal-lg[style*="position: fixed"]  {
    left: var(--modal-cp-left);
    top: var(--modal-cp-top);
}

#default-value-dialog,
#select-icon-dialog {
    animation: modal-picker .3s cubic-bezier(0.4,0,0.2,1) both;
    opacity: 0;
    left: 200vw;
    margin-left: 0;
    overflow: visible;
    z-index: 1060;
}

#default-value-dialog .modal-header,
#select-icon-dialog .modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#default-value-dialog .modal-body,
#select-icon-dialog .modal-body {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#select-icon-dialog .modal-body iframe {
    height: 100%;
}

.modal.ba-modal-md .ba-modal-header,
.ba-modal-md .modal-header,
.ba-modal-cp .modal-header,
#text-editor-dialog.modal.ba-modal-lg .modal-header,
.code-editor-dialog.modal.ba-modal-lg .modal-header {
    background: var(--dark-modal-bg);
    border: none;
    display: block;
    padding: 25px 15px 25px 25px;
    text-align: left;
}

#html-editor-dialog.modal.ba-modal-lg .modal-header-icon ,
#text-editor-dialog.modal.ba-modal-lg .modal-header-icon , 
.ba-modal-cp .modal-header .modal-header-icon,
.ba-modal-cp .modal-header {
    display: flex;
}

#html-editor-dialog.modal.ba-modal-lg .modal-header .select-modal-cp-position, 
#text-editor-dialog.modal.ba-modal-lg .modal-header .select-modal-cp-position, 
.ba-modal-cp .modal-header .select-modal-cp-position {
    position: relative;
}

#html-editor-dialog.modal.ba-modal-lg .modal-header .select-modal-cp-position select, 
#text-editor-dialog.modal.ba-modal-lg .modal-header .select-modal-cp-position select, 
.ba-modal-cp .modal-header .select-modal-cp-position select {
    cursor: pointer !important;
    height: 20px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 40px!important;
}

.modal.ba-modal-md .ba-modal-header,
.ba-modal-md .modal-header {
    background: var(--input-background);
}

div.ba-modal-cp,
#text-editor-dialog,
.code-editor-dialog.ba-modal-lg.modal {
    font-family: "Roboto", sans-serif;
    height: 550px;
    min-height: 550px;
    min-width: 450px;
    width: 450px;
}

.code-editor-dialog .code-nav {
    background: transparent;
    border: none;
    margin: 0;
}

.icons-tabs .code-nav,
.ba-modal-cp .code-nav {
    background: transparent !important;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

.nav-tabs:before,
.nav-tabs:after,
.nav-pills:before,
.nav-pills:after {
    display: none;
}

.icons-tabs .nav-tabs li a,
.ba-modal-cp .nav-tabs li a,
.code-editor-dialog .nav-tabs li a {
    color: var(--cp-main-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    max-width: none !important;
    opacity: 1;
    text-align: center;
    width: 100%;
}

.ba-modal-cp .nav-tabs li a {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icons-tabs .code-nav .active a,
.icons-tabs .code-nav a:hover,
.ba-modal-cp .code-nav .active a,
.ba-modal-cp .nav-tabs a:hover,
.code-editor-dialog .code-nav .active a,
.code-editor-dialog .nav-tabs a:hover {
    color: #fff;
}

.icons-tabs .code-nav a,
.ba-modal-cp .code-nav a {
    justify-content: center;
}

.code-editor-dialog .nav-tabs > li  {
    width: 50%;
}

#default-value-dialog .modal-body > div:nth-child(2),
#default-value-dialog .modal-body,
#text-editor-dialog .modal-body,
.code-editor-dialog .modal-body {
    background: var(--dark-modal-bg);
    height: calc(100% - 70px);
    overflow: hidden;
}

#text-editor-dialog .modal-body {
    padding: 20px 30px;
    box-sizing: border-box;
}

#default-value-dialog .modal-body > div:nth-child(2) {
    height: calc(100% - 95px);
    overflow-y: auto;
}

#default-value-dialog.calculator-data-tags .modal-body > div:nth-child(2) {
    height: 100%;
}

#design-settings-dialog .modal-body,
div.ba-modal-cp .modal-body {
    height: calc(100% - 123px);
}

#integration-element-options-modal .modal-body{
    height: calc(100% - 130px);
}

#submit-button-settings-dialog .tab-content > div,
.icons-tabs .tab-content > div,
#select-icon-dialog .modal-body.tab-content > div,
#design-settings-dialog .modal-body .tab-content > div {
    height: 100%;
}

#submit-button-settings-dialog .modal-body,
#select-icon-dialog .modal-body,
#design-settings-dialog .advanced-design-settings .modal-body {
    overflow: hidden;
    padding: 0;
}

div.ba-modal-cp .modal-body {
    background: var(--dark-modal-bg);
    max-height: none;
}

div.ba-modal-cp .general-tabs,
.code-editor-dialog .general-tabs {
    min-height: 100%;
}

div.ba-modal-cp .tab-content,
.code-editor-dialog .tab-content {
    background: var(--dark-modal-bg);
    height: calc(100% - 60px);
    position: absolute;
    width: 100%;
}

#edit-custom-html .cm-s-material.CodeMirror-wrap,
#edit-custom-html,
#html-editor-dialog.code-editor-dialog .tab-content {
    height: 100%;
}

#select-icon-dialog .modal-body {
    height: calc(100% - 65px);
}

#material-tab,
#fontawesome-tab,
#code-edit-javascript,
#code-edit-css {
    height: 100%;
    width: 100%;
}

#default-value-dialog .modal-body,
div.ba-modal-cp .modal-body,
div.ba-modal-cp .tab-content > div {
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 20px 30px;
    scrollbar-width: thin;
    scrollbar-color: #484c65 transparent;
    width: 450px;
}

.tabs-underline {
    background: #fff;
    height: 4px;
    position: fixed;
    top: inherit;
    margin-top: -4px;
    z-index: 1;
}

.icons-tabs .nav-tabs .active a:before,
.ba-modal-cp .tabs-underline,
.ba-modal-cp .nav-tabs a:before,
.code-editor-dialog .tabs-underline,
.code-editor-dialog .nav-tabs a:before {
    background: var(--main-color);
}

.zmdi.resizable-handle-right {
    bottom: 10px;
    color: var(--cp-main-color);
    cursor: se-resize !important;
    font-size: 36px;
    position: absolute;
    right: 15px;
    z-index: 10;
}

.zmdi.resizable-handle-right:before {
    display: block;
    transform: rotate(-45deg);
}

.ba-modal-cp div > .nav-tabs a:before,
.ba-modal-lg div > .nav-tabs a:before {
    bottom: 1px;
}

/* CodeMirror */
.CodeMirror-hints {
    background-color: #fff;
    box-shadow: 0 4px 60px rgba(0,0,0,.15) !important;
    list-style: none;
    margin:0;
    max-height: 310px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    padding: 0;
    position: fixed;
    width: 265px;
    border-radius: 6px;
    z-index: 1560;
}

.CodeMirror-hint {
    cursor: pointer;
    font: 400 14px/28px 'Roboto', sans-serif !important;
    letter-spacing: normal !important;
    overflow: hidden;
    padding: 17px;
    white-space: pre;
}

.CodeMirror-hint:hover,
li.CodeMirror-hint-active {
    background: #546e7b;
    color: white;
}

.CodeMirror-hints.ba-autocomplete {
    opacity: 1;
}

.cm-s-material.CodeMirror-wrap + span {
    display: block;
    height: 4px;
    overflow: hidden;
    position: absolute;
    top: 56px;
    width: 50%;
}

.CodeMirror-scroll {
    height: 100% !important;
    margin: 0;
    overflow: hidden!important;
    overflow-y: scroll!important;
    padding: 0;
    width: 100%;
}

.CodeMirror-sizer {
    margin-left: 30px !important;
}

.code-editor-dialog .CodeMirror-gutter-wrapper {
    left: -30px !important;
}

.CodeMirror pre {
    padding: 0 15px !important;
}

#code-editor-dialog.code-editor-dialog .CodeMirror {
    height: 100%;
}

.cm-s-material.CodeMirror-wrap {
    background: #2f3243 !important;
    width: 100%;
}

.code-editor-dialog .CodeMirror-hscrollbar {
    overflow-x: hidden;
}

.code-editor-dialog .CodeMirror-scrollbar-filler {
    display: none !important;
}

.CodeMirror .CodeMirror-scroll .CodeMirror-gutters {
    background: transparent;
}

.ba-modal-lg .tab-content .ba-group-element .CodeMirror .CodeMirror-gutters {
    border: none;
}

.ba-modal-lg .tab-content .ba-group-element .CodeMirror-linenumber {
    color: #cacaca;
}

.CodeMirror-code * {
    font-size: 16px;
    line-height: 24px;
}

.CodeMirror-code {
    margin-top: 15px;
}

.CodeMirror .CodeMirror-scroll .CodeMirror-cursor {
    height: 15px !important;
    margin: 5px 0;
}

.code-editor-dialog .CodeMirror-vscrollbar {
    bottom: 0 !important;
    display: none !important;
}

.ba-modal-lg .tab-content .ba-group-element .CodeMirror {
    background: #f9f9f9;
    width: 790px;
}

/* ========================================================================
    Text Editor Settings
 ========================================================================== */

span.cke_button_icon:before {
    display: inline-block;
    font: normal normal normal 24px/1 'Material-Design-Iconic-Font';
    width: 24px;
}

#text-editor-dialog .modal-body > div:not(.ba-settings-group),
#text-editor-dialog .modal-body > div:not(.ba-settings-group) > div  {
    border: none;
    height: 100%;
}

#text-editor-dialog .modal-body > div .ba-settings-item {
    margin-top: 0;
}

.cke_toolgroup {
    background: #343749;
    border-radius: 3px;
    margin: 0 2px 2px 0;
    overflow: hidden;
    padding: 0;
}

textarea.cke_source,
.cke_bottom,
.cke_wysiwyg_frame,
.cke_wysiwyg_div,
.cke_inner {
    background: transparent!important;
    border: none;
    box-sizing: border-box;
}

textarea.cke_source {
    box-sizing: border-box;
    color: #fff;
    margin: 0;
    padding: 15px 5px;
}

.cke_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 0 10px 10px;
}

#text-editor-dialog .modal-body .cke_inner  {
    padding: 0;
}

.ba-settings-text-editor-type .text-editor-textarea + div {
    border: none;
}

.ba-settings-text-editor-type .cke_inner {
    padding: 0;
}

.cke_contents {
    flex-grow: 1;
}

.ba-settings-text-editor-type .text-editor-textarea + div .cke_contents {
    background: var(--input-background);
    border-radius: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

a.cke_button_disabled:hover,
a.cke_button_disabled:focus,
a.cke_button_disabled:active {
    border: none;
    padding: 0;
}

a.cke_button_off:hover,
a.cke_button_off:focus,
a.cke_button_off:active,
a.cke_button {
    background: transparent !important;
    border: none;
    cursor: pointer;
    height: auto;
    padding: 0;
}

.cke_reset_all a.cke_button__mytextcolor {
    color: var(--cp-main-color);
}

.cke_resizer {
    display: none;
}

.resizable-started .modal-body:before {
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.cke_top {
    background: #2f3243 !important;
    border: none !important;
    border: none;
    padding: 0;
}

.cke_path * {
    color: var(--cp-main-color) !important;
}

.cke_combo {
    margin-bottom: 0;
}

.cke_combo:after {
    display: none;
}

.cke_combo_text {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 44px;
    width: 165px;
}

a.cke_combo_button {
    background: #343749 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    border-radius: 3px;
}

.cke_combo_arrow {
    border-top: 3px solid #fff;
    margin: 20px 0 0;
}

.cke_panel {
    background-color: #343749;
    border: none !important;
    width: 200px !important;
}

.cke_panel_listItem.cke_selected a,
.cke_panel_grouptitle {
    border-bottom: none !important;
    background: var(--cp-button-bg) !important;
    color: #fff;
}

.cke_panel_listItem.cke_selected a {
    border-bottom: none !important;
    background: var(--main-color) !important;
    color: #fff;
}

.cke_panel_listItem a:hover,
.cke_panel_listItem a:focus,
.cke_panel_listItem a:active {
    background-color: var(--cp-button-bg);
}

.cke_panel_listItem a:focus {
    outline: none;
    background-color: var(--main-color);
}

.cke_panel_listItem:nth-child(7) ~ .cke_panel_listItem {
    display: none!important;
}

.cke_combo.cke_combo__format {
    border-radius: 3px;
}

.cke_combo.cke_combo__format.cke_combo_on {
    background: var(--cp-button-bg);
}

.ba-form-calculator-row .ba-form-calculator-btn,
.cke_ltr .cke_button__source_icon,
.cke_ltr .cke_button__bulletedlist_icon,
.cke_ltr .cke_button__numberedlist_icon,
span.cke_button_icon {
    background-image: none !important;
    border-radius: 0;
    color: var(--cp-main-color);
    display: inline-block;
    font-size: 24px;
    height: auto;
    line-height: 0;
    margin: 0;
    padding: 10px!important;
    text-align: center;
    transition: background .3s ease;
    width: 24px!important;
}

span.cke_button_icon.cke_button__TextColor_icon {
    color: inherit;
}

#condition-logic-modal .ba-settings-toolbar > div label.active i,
#condition-logic-modal .ba-settings-toolbar > div label:hover i,
.ba-form-calculator-row .ba-form-calculator-btn:hover,
.ba-calendar-row > div:not(.ba-empty-date-cell):not(.ba-curent-date):hover,
.ba-settings-input-type .input-action-icon i:hover,
.ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i,
.ba-settings-item.ba-settings-typography-toolbar-type > div > div i:hover,
.ba-settings-item.ba-settings-typography-toolbar-type > div > label:hover,
.cke_1 a.cke_path_item:hover,
.cke_1 a.cke_path_item:focus,
.cke_1 a.cke_path_item:active,
a.cke_button_on .cke_button__source_icon,
a.cke_button_off:hover span,
a.cke_button_off:focus span,
a.cke_button_off:active span,
a.cke_button_on span {
    background: var(--cp-button-bg) !important;
    color: #fff !important;
}

.cke_1 a.cke_path_item {
    cursor: pointer;
}

.forms-cp-panel-right a.cke_button_on .cke_button__source_icon,
.forms-cp-panel-right a.cke_button_on span,
#condition-logic-modal .ba-settings-toolbar> div label.active,
#condition-logic-modal .ba-settings-toolbar> div label.active i,
.ba-form-calculator-btn[data-fields],
.ba-settings-item.ba-settings-typography-toolbar-type > div > div label.active i,
a.cke_button_on .cke_button__source_icon,
a.cke_button_on span {
    background: var(--main-color) !important;
}

#condition-logic-modal .ba-settings-toolbar> div label {
    position: relative;
}

#condition-logic-modal .ba-settings-toolbar > div label > span:not(.ba-tooltip){
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#condition-logic-modal .ba-settings-toolbar > div label.active i {
    background: transparent !important;
}

span.cke_button_icon.cke_button__TextColor_icon:before {
    content: '\f1a4';
}

span.cke_button_icon.cke_button__bold_icon:before {
    content: '\f23d';
}

span.cke_button_icon.cke_button__italic_icon:before {
    content: '\f245';
}

span.cke_button_icon.cke_button__underline_icon:before {
    content: '\f24f';
}

span.cke_button_icon.cke_button__numberedlist_icon:before {
    content: '\f248';
}

span.cke_button_icon.cke_button__bulletedlist_icon:before {
    content: '\f247';
}

span.cke_button_icon.cke_button__strike_icon:before {
    content: '\f3ac';
}

span.cke_button_icon.cke_button__outdent_icon:before {
    content: '\f243'
}

span.cke_button_icon.cke_button__indent_icon:before {
    content: '\f244';
}

span.cke_button_icon.cke_button__blockquote_icon:before {
    content: '\f1b2';
}

span.cke_button_icon.cke_button__justifyleft_icon:before {
    content: '\f23b';
}

span.cke_button_icon.cke_button__justifycenter_icon:before {
    content: '\f239';
}

span.cke_button_icon.cke_button__justifyright_icon:before {
    content: '\f23c';
}

span.cke_button_icon.cke_button__justifyblock_icon:before {
    content: '\f23a';
}

span.cke_button_icon.cke_button__video_icon:before {
    content: '\f2e0';
}

span.cke_button_icon.cke_button__plugins_icon:before {
    content: '\f275';
}

span.cke_button_icon.cke_button__link_icon:before {
    content: '\f18e';
}

span.cke_button_icon.cke_button__unlink_icon:before {
    content: '\f136';
}

span.cke_button_icon.cke_button__image_icon:before {
    content: '\f1e8';
}

span.cke_button_icon.cke_button__horizontalrule_icon:before {
    content: '\f22f';
}

span.cke_button__source_icon:before {
    content: '\f138';
}

/*
/* CKE
*/

body[class*="cke_"]{
    color: #fff;
    margin: 15px 5px;
}

body[class*="cke_"] a {
    color: #82b1ff;
}

.ba-form-text-field p,
.ba-form-text-field ol,
.ba-form-text-field li,
body[class*="cke_"] p,
body[class*="cke_"] ol,
body[class*="cke_"] li {
    line-height: 1.75em;
}

.ba-form-text-field ol,
.ba-form-text-field ul {
    padding-left: 40px;
    margin: 1em 0;
}

/* ========================================================================
    Tooltip
 ========================================================================== */

.ba-alert-tooltip,
.update-available-tooltip,
body > .ba-tooltip {
    background: #2c2c2c;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    box-sizing: content-box;
    font: 500 14px 'Roboto', sans-serif;
    max-width: 200px;
    opacity: 1;
    line-height: 24px;
    padding: 15px;
    pointer-events: none;
    position: fixed;
    text-align: center;
    transition: opacity .25s ease-out;
    visibility: visible;
    z-index: 1090;
}

/* Top Tooltip */

@keyframes ba-tooltip-top {
    from { opacity: 0;}
    to { opacity: 1; }
}

body > .ba-tooltip.ba-top {
    animation: ba-tooltip-top .3s;
}

@keyframes tooltip-hidden {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

body > .ba-tooltip.ba-help.tooltip-hidden,
body > .ba-tooltip.ba-top.tooltip-hidden,
body > .ba-tooltip.ba-right.tooltip-hidden,
body > .ba-tooltip.tooltip-hidden,
body > .ba-tooltip.ba-bottom.tooltip-hidden {
    animation: tooltip-hidden .3s both;
}

.ba-alert-tooltip:before,
body > .ba-tooltip.ba-help:before,
body > .ba-top.ba-tooltip:before {
    border: 5px solid transparent;
    border-top: 5px solid #2c2c2c;
    bottom: -14px;
    box-sizing: content-box;
    content: "";
    height: 5px;
    left: 50% !important;
    margin-left: -5px;
    position: absolute;
}

.ba-alert-tooltip:before {
    border: 5px solid transparent;
    border-bottom: 5px solid #ff735e;
    top: -14px;
    bottom: auto;
}

.ba-alert-tooltip {
    background: #ff735e;
    color: #fff;
    left: calc(50%);
    opacity: 0;
    top: 95px;
    transform: translateX(-50%);
    transition: .3s;
    text-transform: none;
}

.ba-toolbar-element.ba-alert .ba-alert-tooltip {
    opacity: 1;
}

/* Bottom Tooltip */

@keyframes ba-tooltip {
    from { opacity: 0;}
}

body > .ba-tooltip.ba-bottom {
    animation: ba-tooltip .3s;
    text-align: center;
}

.ba-phone-countries-list-wrapper:after,
.settings-panel:before,
body > .ba-tooltip.ba-bottom:before {
    content: "";
    box-sizing: content-box;
    height: 5px;
    position: absolute;
    top: -14px;
    left: 50% !important;
    margin-left: -5px;
    border: 5px solid transparent;
    border-bottom: 5px solid #2c2c2c;
}

.settings-panel:before {
    border-bottom: 5px solid #252736;
}

/* Right Tooltip */

body > .ba-tooltip.ba-right {
    margin-top: 1px;
}

@keyframes ba-tooltip-right  {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

body > .ba-tooltip.ba-right {
    animation: ba-tooltip-right .3s both;
    visibility: visible;
}

body > .ba-tooltip.ba-right:before {
    border: 5px solid transparent;
    border-right: 5px solid #2c2c2c;
    content: "";
    height: 0px;
    left: -10px;
    position: absolute;
    top: 20px;
}

/* Help Tooltip */
body > .ba-tooltip.ba-help {
    color: #999;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
}

.update-available-tooltip {
    color: #fff;
    position: fixed;
    display: inline-flex;
    top: 80px;
    z-index: 1095
}

body.com_baforms[data-joomla-version="4"] .update-available-tooltip {
    top: var(--toolbar-about-bottom);
}

.update-available-tooltip i {
    font-size: 18px;
    margin-right: 10px;
}

.update-available-tooltip:before {
    border: 5px solid transparent;
    border-bottom: 5px solid #2c2c2c;
    box-sizing: content-box;
    content: "";
    height: 5px;
    left: 50% !important;
    margin-left: -5px;
    position: absolute;
    top: -14px;
}

/*
/* Notification
*/

#ba-notification {
    background: #2c2c2c;
    border-radius: 6px;
    bottom: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    box-sizing: content-box;
    padding: 25px;
    position: fixed;
    right: 50px;
    visibility: hidden;
    z-index: 1100;
}

.alert {
    border: none;
    min-width: 250px;
    padding: 40px 25px;
    text-shadow:none;
    z-index: 1000;
}

.alert .close {
    color: transparent;
    opacity: 1;
    padding: 8px;
    position: absolute;
    right: 5px;
    text-shadow: none;
    top: 0;
}

button.close:after {
    content: '\f136';
    font: normal normal normal 18px/1 'Material-Design-Iconic-Font';
    position: absolute;
    right: 10px;
}

#ba-notification.ba-alert {
    background: #f46336;
    padding: 40px 25px;
    width: 250px;
}

.alert-success {
    background: #418cff;
}

#ba-notification i {
    opacity: 1;
    padding: 8px;
    position: absolute;
    right: 5px;
    text-shadow: none;
    top: 0;
}

#ba-notification p {
    color: #fff;
    font: 500 14px/24px 'Roboto';
    margin: 0;
}

#ba-notification p img {
    box-sizing: content-box;
    height: 40px;
    padding-left: 40px;
    vertical-align: middle;
    width: 40px;
}

#ba-notification.ba-alert p {
    opacity: .6;
}

@keyframes notification-in {
    from {bottom: 0; transform: translateY(100%); opacity: 0;}
}

#ba-notification.notification-in {
    animation: notification-in .4s cubic-bezier(.25,.98,.26,.99) both;
    opacity: 1;
    visibility: visible;
}

@keyframes notification-out {
    to { bottom: 0; transform: translateY(100%); opacity: 0;}
}

#ba-notification.animation-out {
    animation: notification-out .4s cubic-bezier(.25,.98,.26,.99) both;
    opacity: 1;
    visibility: visible;
}

.ba-alert h4 {
    color: #fff;
    display: block;
    font: bold 14px/16px 'Roboto', sans-serif;
    letter-spacing: 0;
    margin: 0 0 15px !important;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
}

/* ========================================================================
    Pagination
 ========================================================================== */

.pagination {
    display: block;
    margin: 30px 0 50px !important;
    text-align: center;
}

.view-submissions .ba-main-view .pagination ul {
    box-shadow: none !important;
    display: inline-block;
    padding-right: 0 !important;
    margin: 0 !important;
}

.pagination ul > li {
    display: inline-block !important;
}

.pagination ul > li > a,
.pagination ul > li > span {
    background: transparent !important;
    border: none !important;
    color: #757575 !important;
    display: inline-block !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 2em !important;
    padding: 4px 12px !important;
}

.ba-work-area .pagination ul > li > a,
.ba-work-area .pagination ul > li > span {
    color: #cad3da !important;
}

.pagination ul > .active > a,
.pagination ul > .active > span,
.pagination ul > .active > a:hover,
.pagination ul > .active > span:hover {
    background: #f64231 !important;
    border-radius: 3px;
    color: #fff !important;
}

.modal.ba-modal-md .ba-modal-header i:hover,
#ba-notification i:hover,
.pagination ul > li:not(.active) > a:hover,
.pagination ul > li:not(.active) > span:hover,
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus a {
    opacity: .5;
}

.uploader-nav .ba-breadcrumb a:hover{
    color: #fff;
}

.view-submissions .ba-main-view .pagination {
    box-sizing: border-box;
    margin: 30px auto 50px !important;
    max-width: 1170px;
    padding-right: 650px;
}

.ba-sidebar span.unread-submissions-count {
    background: #f64231;
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    box-sizing: content-box;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    left: 29px;
    line-height: 16px;
    position: absolute;
    text-align: center;
    top: 4px;
    width: 16px;
}

.ba-sidebar a >.zmdi:hover ~ span.unread-submissions-count {
    border: 2px solid #ddd;
}

.submissions-list + .pagination ul > li:last-child:not(.hidden-phone) > a,
.submissions-list + .pagination ul > li:nth-last-child(2):not(.hidden-phone) > a,
.submissions-list + .pagination ul > li:nth-last-child(2):not(.hidden-phone) > span,
.submissions-list + .pagination ul > li:last-child:not(.hidden-phone)  > span,
.submissions-list + .pagination ul > li:first-child:not(.hidden-phone) > a,
.submissions-list + .pagination ul > li:nth-child(2):not(.hidden-phone) > a,
.submissions-list + .pagination ul > li:nth-child(2):not(.hidden-phone) > span,
.submissions-list + .pagination ul > li:first-child:not(.hidden-phone)  > span {
    padding-left: 0px !important;
    padding-right: 0px  !important;
}

/* Create Button*/

@keyframes create-forms {
    0% { transform: scale(.05); opacity: 0;}
    70% { transform: scale(1.01); opacity: 1;}
    100% { transform: scale(1); opacity: 1;}
}

.com_baforms .ba-create-item {
    animation: create-forms .45s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    backface-visibility: hidden;
    background: #f64231;
    border-radius: 50%;
    bottom: 75px;
    cursor: pointer;
    box-shadow:  0 5px 12px rgba(0,0,0,0.23);
    color: #fff;
    font-size: 24px;
    height: 60px;
    margin: -20px 0 0 -20px;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    right: 60px;
    text-align: center;
    width: 60px;
}

@keyframes default-theme-icon {
    0%{opacity: 0;}
    100% {opacity: 1;}
}

.com_baforms .ba-create-item i:before {
    animation: default-theme-icon .3s .5s both;
    opacity: 0;
}

.com_baforms .ba-create-item > i,
.com_baforms .ba-create-item a {
    color: #fff !important;
    display: block;
    line-height: initial;
    padding: 18px;
}

.com_baforms .ba-create-item i:before {
    position: relative;
    z-index: 1;
}

.com_baforms .ba-create-item i:after {
    transform: none;
}

.com_baforms .ba-create-item:hover i:after {
    background: #f64231;
    height: 60px;
    margin: -30px;
    opacity: 1;
    width: 60px;
}

.pdf-print-iframe {
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateY(-110vh);
    width: 100vw;
}

/*
/* Submission attachment
*/

/* Submission image */
.submission-image-type {
    background-position: center;
    background-size: cover;
    border-radius: 3px;
    cursor: zoom-in;
    display: inline-block;
    height: 50px;
    margin-right: 5px;
    width: 75px;
}

.submission-image-wrapper .delete-comment-attachment-file {
    background: #f64231;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    opacity: 0;
    padding: 2px;
    position: absolute;
    right: 8px;
    text-align: center;
    top: 2px;
    transition: all .3s;
    width: 11px;
}

.submission-image-wrapper:hover i.zmdi {
    opacity: 1;
}

.submission-image-wrapper {
    position: relative;
    display: inline-block;
}

.submissions-file-wrapper,
.submissions-image-wrapper {
    margin-bottom: 25px;
}

/* Submission file */
.submission-file-wrapper {
    align-items: center;
    background: #ededed;
    display: flex;
    margin-bottom: 5px;
    width: 100%;
}

.submission-file-wrapper > i.zmdi {
    background: #ddd;
    cursor: default;
    padding: 15px 20px;
}

.submission-file-wrapper > a {
    flex-grow: 1;
    overflow: hidden;
    padding-left: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.submission-file-wrapper .submission-attachment-icons-wrapper {
    float: right;
    white-space: nowrap;
}

.submission-file-wrapper .submission-attachment-icons-wrapper i {
    cursor: pointer;
    padding: 15px;
    width: auto;
}

.submission-file-wrapper .submission-attachment-icons-wrapper i:hover {
    color: var(--main-color);
}

.ba-image-modal.instagram-modal > div {
    cursor: zoom-out;
    left: 0;
    position: fixed;
    top: 0;
    transition: all .5s ease-in-out;
    z-index: 10000;
}

.instagram-modal > div {
    background-position: center;
    background-size: cover;
    height: 100%;
    opacity: 1;
    width: 100%;
}

@keyframes instagram-modal-in {
    from { background-color: transparent; }
}

.ba-image-modal.instagram-modal {
    animation: instagram-modal-in .5s linear both;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translate3d(0, 0, 0);
    z-index: 10000;
}

@keyframes instagram-modal-out {
    to { background-color: transparent; }
}

.ba-image-modal.instagram-modal.image-lightbox-out {
    animation: instagram-modal-out .5s ease-in-out both;
}

.instagram-modal.ba-comments-image-modal {
    background: rgba(0, 0, 0, 0.5);
}

.instagram-modal i:not(.zmdi-close) {
    align-items: center;
    display: flex;
    font-size: 36px;
    justify-content: center;
    top: calc(50vh - 30px);
    z-index: 100;
}

.instagram-modal a.zmdi-download ,
.instagram-modal i {
    animation: search-result .3s linear;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    left: 0;
    padding: 40px;
    position: fixed;
    text-align: center;
    transition: all .3s linear;
    width: 24px;
}

.ba-image-modal.instagram-modal i {
    z-index: 99999 !important;
}

.instagram-modal .zmdi-close,
.instagram-modal a.zmdi-download {
    left: auto;
    padding: 20px;
    right: 55px;
}

.instagram-modal .zmdi-close,
.instagram-modal i + i {
    left: auto;
    right: 0;
}

.instagram-modal i {
    left: 60px;
}

/* ========================================================================
    Forms Editor
 ========================================================================== */

/*
/* Toolbar
*/

.view-form .subhead-collapse {
    display: none !important;
}

.ba-toolbar {
    background: #f5f5f5;
    border-bottom: 1px solid #e3e3e3;
    display: flex;
    font-family: 'Roboto', sans-serif;
    line-height: 18px;
}

.ba-toolbar .ba-toolbar-group {
    border-right: 1px solid #e3e3e3;
    height: 80px;
    line-height: 0;
    padding: 0 25px;
    white-space: nowrap;
    width: auto;
}

.ba-toolbar .ba-toolbar-group:nth-child(3) {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    text-align: center;
}

.ba-toolbar .ba-toolbar-group .ba-toolbar-element {
    background-color: transparent;
    border-radius: 3px;
    border: none;
    color: #1a1a1a;
    cursor: pointer !important;
    display: inline-flex;
    font: 500 14px/40px 'Roboto', sans-serif;
    margin: 15px 0;
    padding: 5px 15px 5px 5px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease;
}

.ba-toolbar .ba-toolbar-group .ba-toolbar-element .ba-form-title{
    background: transparent;
    border: none;
    color: #1a1a1a;
    display: inline-block;
    font: 500 21px/24px 'Roboto', sans-serif;
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: normal;
    width: 100%;
}

.ba-toolbar .ba-toolbar-group .ba-toolbar-element .ba-form-title::-webkit-input-placeholder {
    color: #999;
}

.ba-toolbar .ba-toolbar-group:not(:nth-child(3)) .ba-toolbar-element:hover {
    background: #ddd !important;
}

.ba-toolbar .ba-toolbar-group:nth-child(3) .ba-toolbar-element {
    margin: 0;
    padding: 0;
    width: 100%;
}

.add-new-page i,
.ba-forms-lightbox-row i,
.ba-forms-workspace-lightbox-edit-icons i,
.ba-toolbar .ba-toolbar-group .ba-toolbar-element i:not(.zmdi-caret-down) {
    border-radius: 3px;
    box-sizing: content-box;
    color: #757575;
    font-size: 24px;
    padding: 8px;
    text-align: center;
    vertical-align: sub;
    width: 24px;
}

.ba-toolbar .ba-toolbar-group:nth-child(3) .ba-toolbar-element,
.ba-toolbar-label.ba-form-title {
    cursor: text !important;
    outline: none !important;
}

.view-form .ba-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 0;
    min-height: calc(100vh - 138px);
    padding-top: 0;
}

.view-form .ba-sidebar .top-icons {
    border: none;
    border-bottom: 1px solid #e3e3e3;
}

.view-form .ba-sidebar .top-icons +div {
    flex-grow: 1;
}

.ba-form-fields-list {
    background: transparent;
    border-right: 1px solid #e3e3e3 !important;
    display: inline-block;
    float: left;
    height: calc(100vh - 138px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    width: 232px;
}

.ba-form-field {
    align-items: center;
    border-radius: 0;
    box-sizing: border-box;
    color: #333 !important;
    cursor: move;
    display: flex;
    font: 400 14px/20px 'Roboto', sans-serif;
    letter-spacing: 0px;
    margin: 0;
    max-width: 100%;
    opacity: 1;
    overflow: hidden;
    padding: 17px;
    text-overflow: ellipsis;
    text-transform: initial;
    width: 100%;
}

.ba-form-field.disabled-field-drag {
    opacity: .5;
    cursor: not-allowed;
}

.ba-form-field i {
    box-sizing: content-box;
    color: #757575;
    cursor: move;
    font-size: 24px;
    padding-right: 15px;
    text-align: center;
    vertical-align: sub;
    width: 24px;
}

.ba-form-field:hover {
    background: #ddd;
}

.add-new-page i {
    color: #757575;
    cursor: pointer;
    font-size: 24px;
}

.ba-forms-workspace {
    box-sizing: border-box;
    height: calc(100vh - 138px);
    left: 293px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    padding: 0 50px;
    position: absolute;
    top: 111px;
    width: calc(100vw - 295px);
}

.ba-forms-workspace .ba-forms-workspace-body {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 900px;
    min-height: calc(100vh - 255px);
    padding-top: 80px;
    position: relative;
}

.ba-forms-lightbox-enabled .ba-forms-workspace .ba-forms-workspace-body {
    overflow: hidden;
}

.ba-form-page:not(.sortable-helper) {
    margin-bottom: 50px;
    position: relative;
    min-height: 50px;
}

.ba-form-page-navigation-wrapper,
.ba-form-page-break,
.ba-form-page-break-buttons {
    position: relative;
    width: 100%;
}

.ba-form-page-break-buttons {
    display: block;
    margin-bottom: var(--field-margin-bottom);
    margin-top: var(--field-margin-top);
    overflow: hidden;
    width: 100% !important;
}

.ba-form-page .ba-form-page-break-button {
    background-image: none !important;
    background: var(--field-background-color);
    border-radius: var(--field-border-radius);
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    line-height: var(--field-typography-line-height);
    padding: 15px 60px;
    width: auto !important;
}

.ba-form-page .ba-form-page-break-button:hover {
    background: #212121 !important;
    color: #fff !important;
}

.ba-form-page .ba-form-page-break-button[data-action="next"] {
    background: var(--theme-color);
    color: #fff;
    float: right;
}

.ba-form-page:first-child .ba-form-page-break-button[data-action="back"] ,
.ba-form-page:last-child .ba-form-page-break-button[data-action="next"] {
    display: none;
}

.ba-form-page:last-child {
    margin-bottom: 0;
}

.ba-form-page {
    margin: 0 auto;
    max-width: 100%;
}

.ba-forms-workspace-footer {
    align-items: center;
    display: flex;
    height: 100px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ba-forms-workspace-body:not(.visible-save-progress) .ba-form-save-progress-link {
    display: none;
}

.ba-form-save-progress-link {
    color: var(--label-typography-color);
    cursor: pointer;
    display: inline-block;
    float: right;
    font-family: var(--label-typography-font-family);
    font-size: var(--label-typography-font-size);
    font-style: var(--label-typography-font-style);
    font-weight: var(--label-typography-font-weight);
    letter-spacing: var(--label-typography-letter-spacing);
    line-height: var(--field-typography-line-height);
    padding: 15px;
    text-transform: var(--label-typography-text-transform);
    transition: .3s;
}

.ba-form-save-progress-link:hover {
    color: var(--theme-color);
}

/*
/* Page Navigation
*/

.ba-forms-workspace-body:not(.visible-page-break) .ba-form-page-navigation-wrapper,
.ba-forms-workspace-body:not(.visible-page-break) .ba-form-page-break {
    display: none;
}

.ba-forms-workspace-body .ba-form-page-navigation {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--field-margin-bottom);
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) .ba-form-page-navigation-title {
    align-items: center;
    border-radius: 0 !important;
    border: none !important;
    display: inline-flex;
    flex-grow: 1;
    font-size: 16px;
    justify-content: center;
    margin-left: 3px;
    position: relative;
    text-align: left;
}

.ba-forms-workspace-body.dots-navigation-style .ba-form-page-navigation-title {
    text-align: center;
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) .ba-form-page-navigation-title:first-child {
    border-top-left-radius: var(--field-border-radius)!important;
    border-bottom-left-radius: var(--field-border-radius)!important;
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) .ba-form-page-navigation-title:last-child {
    border-top-right-radius: var(--field-border-radius)!important;
    border-bottom-right-radius: var(--field-border-radius)!important;
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) .ba-form-page-navigation-title.current-page {
    background: var(--theme-color);
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) .ba-form-page-navigation-title.current-page .ba-page-navigation-title {
    color: #fff;
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) span.ba-form-page-navigation-title .ba-form-page-navigation-counter {
    display: none;
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) .ba-form-page-navigation-title:after {
    content: "";
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid rgba(214, 214, 214, 0.4);
    position: absolute;
    right: -10px;
    top: calc( 50% - 10px);
    z-index: 1;
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style) .ba-form-page-navigation-title.current-page:after {
    border-left: 10px solid var(--theme-color);
}

.ba-forms-workspace-body:not(.dots-navigation-style):not(.step-navigation-style):not(.progress-navigation-style) .ba-form-page-navigation-title:before {
    border-bottom: 12px solid transparent;
    border-left: 12px solid var(--form-background-color);
    border-top: 12px solid transparent;
    content: "";
    left: 0px;
    position: absolute;
    top: calc(50% - 12px);
}

/* Steps Navigation */

.step-navigation-style .ba-form-page-navigation-title {
    background: transparent;
    border: none;
    border-bottom: 10px solid var(--theme-color);
    border-radius: 0;
    margin-right: 5px;
    padding: 0;
    min-height: calc( var(--label-typography-font-size) + 15px) !important;
}

.step-navigation-style .ba-form-page-navigation-title.current-page~.ba-form-page-navigation-title {
    border-bottom: 10px solid rgba(214, 214, 214, 0.4);
}

.step-navigation-style .ba-form-page-navigation-title:not(.current-page) *,
.step-navigation-style .ba-form-page-navigation-title.current-page .ba-form-page-navigation-counter {
    display: none;
}

.step-navigation-style .ba-form-page-navigation-title.current-page .ba-page-navigation-title {
    bottom: 15px;
    left: 0;
    line-height: 1em;
    max-width: 100%;
    position: absolute;
}

/* Dots Navigation */

.dots-navigation-style .ba-form-page-navigation-title {
    align-items: center;
    background: transparent;
    border: none;
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0;
    position: relative;
    width: auto !important;
}

.ba-forms-workspace-body.dots-navigation-style .ba-form-page-navigation {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-column-gap: 15px;
}

.step-navigation-style .ba-form-page-navigation-counter,
.dots-navigation-style .ba-form-page-navigation-counter {
    background: var(--theme-color);
    border-radius: 50%;
    color: #fff;
    line-height: var(--label-typography-font-size);
    margin-bottom: 10px;
    padding: 15px;
    text-align: center;
    width: 1em;
    z-index: 1;
}

.step-navigation-style .ba-form-page-navigation-counter {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
    line-height: 0;
}

.dots-navigation-style .current-page ~ .ba-form-page-navigation-title .ba-form-page-navigation-counter {
    background: transparent;
    color: var(--field-typography-color);
    position: relative;
    cursor: default;
}

.dots-navigation-style .current-page ~ .ba-form-page-navigation-title .ba-form-page-navigation-counter:before,
.dots-navigation-style .current-page ~ .ba-form-page-navigation-title .ba-form-page-navigation-counter:after {
    border-radius: 50%;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.dots-navigation-style .current-page ~ .ba-form-page-navigation-title .ba-form-page-navigation-counter:after {
    background: var(--form-background-color);
    z-index: -2;
}

.dots-navigation-style .current-page ~ .ba-form-page-navigation-title .ba-form-page-navigation-counter:before {
    background: rgba(214, 214, 214, 0.4);
    z-index: -1;
}

.dots-navigation-style span.ba-form-page-navigation-title:after {
    background: var(--theme-color);
    content: "";
    height: 10px;
    left: 0px;
    position: absolute;
    right: 0px;
    top: calc(10px + var(--field-typography-font-size)/2);
    transform: translateX(calc(-50% - 8px));
    z-index: 0;
}

.dots-navigation-style .current-page ~ .ba-form-page-navigation-title:after {
    background: rgba(214, 214, 214, 0.4);
}

/* Progress Navigation */
.progress-navigation-style .ba-form-page-navigation {
    background: rgba(214, 214, 214, 0.4);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.progress-navigation-style .ba-form-page-progress-navigation-header {
    display: flex;
    color: var(--label-typography-color);
    font-family: var(--label-typography-font-family);
    font-size: var(--label-typography-font-size);
    font-style: var(--label-typography-font-style);
    font-weight: var(--label-typography-font-weight);
    justify-content: space-between;
    letter-spacing: var(--label-typography-letter-spacing);
    margin-bottom: 5px;
    text-transform: var(--label-typography-text-transform);
    width: 100%;
}

.ba-forms-workspace-body:not(.progress-navigation-style) .ba-form-page-progress-navigation-header,
.progress-navigation-style .ba-form-page-navigation-title > *{
    display: none !important;
}

.progress-navigation-style .ba-form-page-navigation-title {
    border: none;
    opacity: 0;
    padding: 5px !important;
}

.progress-navigation-style .ba-form-page-navigation:before {
    background: var(--theme-color);
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    width: var(--progress-navigation-percentage);
}

/*
/* Submit Button
*/

.ba-form-submit-wrapper .ba-form-submit-recaptcha-wrapper,
.ba-form-submit-wrapper .ba-form-submit-btn-wrapper {
    display: inline-flex;
    font-family: var(--label-typography-font-family);
    justify-content: var(--submit-typography-text-align);
    width: 100%;
}

.ba-form-submit-wrapper .ba-form-submit-recaptcha-wrapper {
    display: flex;
}

.ba-form-submit-wrapper .ba-form-submit-recaptcha-wrapper .forms-recaptcha {
    flex-grow: var(--submit-typography-text-align);
}

.ba-form-submit-wrapper .ba-form-submit-recaptcha-wrapper .forms-recaptcha > div {
    margin: 0 auto;
}

/*
* Submit Button Animation
*/

.ba-form-submit-wrapper[class*="animation"] .ba-form-submit-btn {
    overflow: hidden;
    position: relative;
    transition: background .0s ease-in-out;
}

.ba-form-submit-wrapper[class*="animation"] .ba-form-submit-btn > i,
.ba-form-submit-wrapper[class*="animation"] .ba-form-submit-btn > span {
    z-index: 5
}

.ba-form-submit-wrapper[class*="animation"] .ba-form-submit-btn:after {
    border-radius: inherit;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
}

.ba-form-submit-wrapper[class*="animation"] .ba-form-submit-btn:after {
    background: var(--submit-background-hover);
    z-index: 2;
}

.ba-form-slide-in-diagonal-animation .ba-form-submit-btn ,
.ba-form-slide-in-horizontal-animation .ba-form-submit-btn {
    background-color: var(--submit-background-hover) !important;
}

.ba-form-slide-out-diagonal-animation .ba-form-submit-btn:hover,
.ba-form-slide-in-diagonal-animation .ba-form-submit-btn:after,
.ba-form-slide-in-horizontal-animation .ba-form-submit-btn:after,
.ba-form-slide-out-horizontal-animation .ba-form-submit-btn {
    background-color: var(--submit-background-color) !important;
}

.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn i,
.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn i {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
    width: 100%;
}

/* Tada */
@-webkit-keyframes hover-4 {
    from, 11.1%, to {transform: none;}
    22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}
    33.3% {transform: skewX(6.25deg) skewY(6.25deg);}
    44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}
    55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}
    66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}
    77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}
    88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}

.ba-form-tada-animation .ba-form-submit-btn:hover {
    animation: hover-4 .7s both;
}

.ba-form-tada-animation .ba-form-submit-btn:after {
    opacity: 0;
}

.ba-form-tada-animation .ba-form-submit-btn:hover:after {
    opacity: 1;
}

/* Slide Out Diagonal */
.ba-form-slide-out-diagonal-animation .ba-form-submit-btn:after {
    transform: scale(0);
}

.ba-form-slide-out-diagonal-animation .ba-form-submit-btn:hover:after {
    transform: scale(1);
}

/* Slide In Diagonal */
.ba-form-slide-in-diagonal-animation .ba-form-submit-btn:after {
    transform: scale(1);
    z-index: 2;
}

.ba-form-slide-in-diagonal-animation .ba-form-submit-btn:hover:after {
    transform: scale(0);
}

/* Slide In Horizontal */
.ba-form-slide-in-horizontal-animation .ba-form-submit-btn:after {
    border-radius: 0 !important;
    transform: scaleX(1);
    z-index: 2;
}

.ba-form-slide-in-horizontal-animation .ba-form-submit-btn:hover:after {
    transform: scaleX(0);
}

/* Slide Out Horizontal */
.ba-form-slide-out-horizontal-animation .ba-form-submit-btn:after {
    border-radius: 0 !important;
    transform: scaleX(0);
}

.ba-form-slide-out-horizontal-animation .ba-form-submit-btn:hover:after {
    transform: scaleX(1);
}

/*  Icon Horizontal Slide In  */
.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn:hover {
    background: var(--submit-background-color) !important;
}

.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn:hover i {
    transform: translateX(0);
}

.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn:after {
    transform: translateX(-100%);
    background: var(--submit-background-color) !important;
}

.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn:hover:after {
    transform: translateX(0);
}

.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn span {
    transition: .3s;
}

.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn:hover span {
    transform: translateX(200%);
    z-index:1
}

.ba-form-icon-horizontal-slide-in-animation .ba-form-submit-btn i {
    transform: translateX(-100%);
}

/* Icon Vertical Slide In */
.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn i {
    transform: translateY(-100%);
}

.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn:hover {
    background: var(--submit-background-color) !important;
}

.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn:hover i {
    transform: translateY(0);
}

.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn:after {
    transform: translateY(-100%);
    background: var(--submit-background-color) !important;
}

.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn:hover:after {
    transform: translateY(0);
}

.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn:hover span {
    transform: translateY(200%);
    z-index:1
}

.ba-form-icon-vertical-slide-in-animation .ba-form-submit-btn span {
    transition: .3s;
}

/*
/* Edit Item
*/

.ba-edit-item {
    display: none;
    font-size: initial !important;
    letter-spacing: initial !important;
    line-height: initial !important;
    position: absolute;
    top: -25px;
    z-index: 6;
}

.ba-form-page > .ba-edit-item {
    right: 0;
    top: -25px;
    z-index: 40
}

.ba-form-row {
    position: relative;
}

.ba-form-page-navigation-wrapper:hover > .ba-edit-item,
.ba-form-page-break:hover > .ba-edit-item,
.ba-form-field-item:hover > .ba-edit-item,
.ba-form-row:hover > .ba-edit-item,
.ba-form-page:hover > .ba-edit-item {
    display: inline-flex;
}

.ba-form-page-navigation-wrapper > .ba-edit-item,
.ba-form-page-break > .ba-edit-item,
.ba-form-field-item > .ba-edit-item {
    right: calc(50% - 25px);
    top: calc(50% - 25px);
    left: auto;
}

.ba-form-page-navigation-wrapper > .ba-edit-item > .ba-edit-wrapper i,
.ba-form-page-break > .ba-edit-item > .ba-edit-wrapper i,
.ba-form-page-navigation-wrapper > .ba-edit-item,
.ba-form-page-break > .ba-edit-item {
    cursor: default !important;
}

.ba-form-row:hover {
    z-index: 10;
}

.ba-form-page-navigation-wrapper > .ba-edit-item .edit-settings,
.ba-form-page-break > .ba-edit-item .edit-settings,
.ba-form-field-item >.ba-edit-item .edit-settings {
    background: #2ecc71;
}

.ba-form-row:hover > .ba-edit-item:hover + .ba-form-column-wrapper {
    outline: 1px dashed #246C78 !important;
}

.ba-form-page > .ba-edit-item .edit-settings {
    background: #4f2b4f !important;
}

.ba-form-row >.ba-edit-item .edit-settings {
    background: #3498db !important;
}

.edit-settings {
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(0,0,0,0.23);
    display: inline-block;
}

.edit-settings i {
    box-sizing: content-box;
    color: #fff;
    cursor: move !important;
    font-size: 22px;
    line-height: 24px;
    padding: 13px;
    text-align: center;
    transition: all .3s ease-in-out;
    width: 24px;
}

.ba-buttons-wrapper {
    background: #2d3e50;
    border-radius: 40px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.23);
    display: none;
    font-size: initial !important;
    letter-spacing: initial !important;
    line-height: normal !important;
    padding: 5px 0 5px 0;
    position: absolute;
    top: 3px;
    white-space: nowrap;
    z-index: -1 !important;
}

.ba-form-page > .ba-edit-item .ba-buttons-wrapper {
    right: 5px;
    padding: 5px 50px 5px 10px;
}

.ba-form-page-navigation-wrapper > .ba-edit-item .ba-buttons-wrapper,
.ba-form-page-break > .ba-edit-item .ba-buttons-wrapper,
.ba-form-field-item > .ba-edit-item .ba-buttons-wrapper,
.ba-form-row > .ba-edit-item .ba-buttons-wrapper {
    left: 5px;
    padding: 5px 10px 5px 50px;
}

@keyframes edit-item-show {
    0% {opacity: 0; }
    100% {opacity: 1;}
}

.ba-edit-item:hover .ba-buttons-wrapper {
    animation: edit-item-show .15s ease-in-out both;
    display: inline-flex;
}

.ba-edit-item:hover .edit-settings i {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotate(90deg);
}

.ba-edit-item:hover .ba-buttons-wrapper .ba-edit-wrapper {
    opacity: 1;
}

.ba-buttons-wrapper .ba-edit-wrapper {
    display: inline-block;
    opacity: 0;
    position: relative;
    transition: opacity .2s ease-in-out;
}

.ba-buttons-wrapper i {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    opacity: .5;
    padding: 10px;
}

.ba-buttons-wrapper i:hover {
    opacity: 1;
}

.empty-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
    z-index: 4 !important;
}

.empty-item > span:not(.ba-tooltip) {
    background: rgba(255,255,255,0.65);
    display: block;
    font-size: initial;
    letter-spacing: initial;
    line-height: initial;
    position: relative;
    text-align: center;
    z-index: -1;
}

.empty-item i {
    color: #2d3e50;
    cursor: default;
    font-size: 24px;
    line-height: 50px;
    margin: 0 15px;
}

.ba-page-resizer {
    align-items: center;
    cursor: col-resize !important;
    display: flex;
    height: 100%;
    justify-content: center;
    left: -25px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 25px;
}

.ba-page-resizer i {
    color: #4f2b4f;
    cursor: col-resize !important;
    opacity: .1;
}

.ba-page-resizer:hover i,
.page-resize-started .ba-page-resizer i {
    opacity: 1;
}

.ba-page-resizer[data-position="right"] {
    left: 100%;
}

#ba-apply.active:after {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    content: "";
    height: 3px;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale(0);
    transition: all .35s ease-out;
    width: 3px;
}

@keyframes ba-apply-icon {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

#ba-apply.active:before {
    animation: ba-apply-icon .3s .5s both;
}

#ba-apply.active:hover:after {
    background: #f44236;
    opacity: 1;
    transform: scale(27);
    z-index: -1;
}

.ba-page-items:not(.element-in-sorting) {
    min-height: 20px;
    position: relative;
    width: 100%;
}

.page-resize-started .ba-page-items {
    pointer-events: none;
}

.page-resize-started .ba-edit-item {
    display: none !important;
}

/*
/* Column Resizer
*/

.ba-form-row .ba-column-resizer {
    float: left;
    font-size: initial;
    letter-spacing: initial;
    line-height: initial;
    width: 0;
}

@media not all and (min-resolution:.001dpcm) {
    @media {
        .ba-form-row .ba-column-resizer {
            position: relative;
        }
    }
}

.ba-form-row .ba-column-resizer > span{
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    margin-left: -1.1%;
    position: absolute;
    top: 0;
    width: 5%;
    z-index: 4;
}

.ba-form-row .ba-column-resizer > span,
.ba-form-row .ba-column-resizer > span i {
    cursor: col-resize !important;
    color: #1b1b1d;
    font-size: 16px;
}

.ba-form-column-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.ba-form-column-wrapper .ba-form-column {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 50px;
    position: relative;
}

.ba-form-submit-field .ba-edit-item {
    top: auto;
    bottom: calc(((var(--submit-typography-line-height) + var(--submit-padding-bottom) + var(--submit-padding-top))/2) - 25px);
}

.ba-form-submit-field {
    align-items: flex-end;
    display: flex;
    height: 100%;
}

.ba-form-field-item.ba-form-submit-field ~ .ba-form-submit-field {
    height: auto;
}

.ba-form-submit-wrapper {
    width: 100%;
}

.ba-form-column:not(.ba-column-resize) {
    transition: width .15s ease-in-out;
}

/* Column Info */
.ba-form-row > .ba-form-column-wrapper .ba-form-column:before,
.ba-form-row > .ba-form-column-wrapper .ba-form-column:after,
.ba-form-row > .ba-form-column-wrapper:before,
.ba-form-row > .ba-form-column-wrapper:after {
    clear: both;
    content: "";
    display: table;
    line-height: 0;
}

/*
/* For IOS
*/

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    .ba-form-row > .ba-form-column-wrapper:before {
        display: block;
    }
}

@supports (-webkit-text-size-adjust:none) and (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
    .ba-form-row > .ba-form-column-wrapper:before {
        display: block;
    }
}

@media not all and (min-resolution:.001dpcm) {
    .ba-form-row > .ba-form-column-wrapper:before {
        display: block;
    }
}

.page-info,
.column-info {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    background: #2c2c2c;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: #fff;
    display: flex!important;
    font: 500 14px/24px 'Roboto', sans-serif;
    left: 50%;
    margin-left: -250px;
    max-width: 250px;
    opacity: 0;
    padding: 15px;
    pointer-events: none;
    position: absolute !important;
    top: -70px;
    transform: translateX(calc(250px - 50%));
    transition: all .3s ease-in-out;
    visibility: hidden;
    white-space: nowrap;
    width: auto;
    z-index: 99999 !important;
}

.page-info {
    justify-content: center;
    min-width: 55px;
    transition: opacity .3s ease-in-out;
}

.page-info:before,
.column-info:before {
    border: 5px solid transparent;
    border-top: 5px solid #2c2c2c;
    bottom: -9px;
    content: "";
    height: 0;
    left: 50% !important;
    margin-left: -5px;
    position: absolute;
    top: auto;
}

.page-info.visible-info,
.ba-column-resize > .column-info {
    opacity: 1!important;
    visibility: visible!important;
}

.page-info.left {
    left: 0;
}

.page-info.right {
    left: 100%;
}

.ba-settings-item.ba-settings-textarea-type textarea {
    resize: none;
}

.ba-modal-list-picker ul::-webkit-scrollbar-thumb,
.ba-settings-item.ba-settings-textarea-type textarea::-webkit-scrollbar-thumb,
.ba-settings-item.ba-settings-font-type .default-country-select ul::-webkit-scrollbar-thumb,
ul.ba-phone-countries-list::-webkit-scrollbar-thumb,
#default-value-dialog .modal-body > div:nth-child(2)::-webkit-scrollbar-thumb,
#default-value-dialog .modal-body::-webkit-scrollbar-thumb,
.icons-tabs .tab-pane > div::-webkit-scrollbar-thumb,
.fields-editor-panel.ba-modal-cp .modal-body::-webkit-scrollbar-thumb,
.ba-input-field-options::-webkit-scrollbar-thumb,
.basic-design-settings .modal-body::-webkit-scrollbar-thumb,
.ba-settings-item.ba-settings-font-type .fonts-select ul::-webkit-scrollbar-thumb,
div.ba-modal-cp .tab-content > div::-webkit-scrollbar-thumb,
.code-editor-dialog .CodeMirror-scroll::-webkit-scrollbar-thumb,
#theme-layout-settings::-webkit-scrollbar-thumb,
body[class*="cke_"]::-webkit-scrollbar-thumb,
#languages-dialog .modal-body::-webkit-scrollbar-thumb {
    background: #484c65;
}

.ba-modal-list-picker ul,
.ba-settings-item.ba-settings-textarea-type textarea,
.ba-settings-item.ba-settings-font-type .default-country-select ul,
ul.ba-phone-countries-list,
#default-value-dialog .modal-body > div:nth-child(2),
.icons-tabs .tab-pane > div,
.fields-editor-panel.ba-modal-cp .modal-body,
.basic-design-settings .modal-body,
.ba-settings-item.ba-settings-font-type .fonts-select ul,
div.ba-modal-cp .tab-content > div,
.code-editor-dialog .CodeMirror-scroll,
#theme-layout-settings,
body[class*="cke_"],
#languages-dialog .modal-body {
    scrollbar-width: thin;
    scrollbar-color: #484c65 transparent;
}

#default-value-dialog .modal-body {
    overflow: hidden;
    padding: 0;
}

/* Tab Animation */
.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

.active.left,
.active.right,
.out-left,
.out-right {
    display: inline-block !important;
    box-sizing: border-box;
    overflow: auto;
    position: absolute;
    width: 480px;
}

@keyframes active-tab-left {
    from { transform: translateX(-100%);}
}

.active.left {
    animation: active-tab-left .5s cubic-bezier(.55,.085,.68,.53);
}

@keyframes active-tab-right {
    from { transform: translateX(100%);}
}

.active.right {
    animation: active-tab-right .5s cubic-bezier(.55,.085,.68,.53);
}

@keyframes out-right {
    to { transform: translateX(100%);}
}

.out-right {
    animation: out-right .5s cubic-bezier(.55,.085,.68,.53);
}

@keyframes out-left {
    to { transform: translateX(-100%);}
}

.out-left {
    animation: out-left .5s cubic-bezier(.55,.085,.68,.53) both;
}



/*
/* Color Variables
*/

div.modal {
    box-shadow: 0 25px 50px rgba(0,0,0,.35);
}

.picker-modal-arrow:before {
    border: 5px solid transparent;
    border-left: 5px solid #2f3243;
    bottom: calc(var(--picker-arrow-bottom) - 5px);
    content: "";
    height: 0;
    margin-left: -5px;
    position: absolute;
    right: -9px;
}

.ba-top-position.modal.ba-modal-picker:before {
    border: 5px solid transparent;
    border-bottom: 5px solid #2f3243;
    bottom: 100%;
    right: calc(var(--color-variables-arrow-right) - 5px);
}

.ba-bottom-position.modal.ba-modal-picker:before {
    border: 5px solid transparent;
    border-top: 5px solid #2f3243;
    bottom: -11px;
    right: calc(var(--color-variables-arrow-right) - 5px);
}

#color-variables-dialog {
    z-index: 1080;
    --color-variables-arrow-right: 50%;
}

@keyframes modal-picker {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

div.modal.ba-modal-picker {
    animation: modal-picker .3s cubic-bezier(0.4,0,0.2,1);
    --picker-arrow-bottom: 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #323648;
    border-radius: 6px;
    border: none;
    height: 349px;
    margin-left: 0;
    padding: 0;
    width: 275px;
    z-index: 1060;
}

#default-country-dialog.modal.ba-modal-picker,
#drive-folders-dialog.modal.ba-modal-picker,
#google-fonts-dialog.modal.ba-modal-picker {
    height: 450px;
    width: 340px;
    z-index: 1090;
}

#default-country-dialog.modal.ba-modal-picker .modal-body,
#drive-folders-dialog.modal.ba-modal-picker .modal-body,
#google-fonts-dialog.modal.ba-modal-list-picker .modal-body {
    border-radius: 6px;
}

#custom-color-scheme-dialog {
    height: 335px;
    width: 340px;
}

#calendar-dialog {
    height: 440px;
    width: 450px;
}

#calendar-dialog.ba-modal-picker {
    height: 515px;
}

.ba-modal-list-picker .modal-body,
#disable-week-days-dialog .modal-body,
#calendar-dialog .modal-body,
#custom-color-scheme-dialog .modal-body,
#color-variables-dialog .modal-body {
    background: var(--dark-modal-bg);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-height: 295px;
    min-height: 295px;
    overflow: hidden;
    padding: 0;
}

#calendar-dialog .modal-body {
    max-height: none;
    min-height: auto;
}

#disable-week-days-dialog .modal-body {
    max-height: 360px;
    min-height: 360px;
}

#custom-color-scheme-dialog .modal-body {
    box-sizing: border-box;
    padding: 25px;
    max-height: 280px;
    min-height: 280px;
}

.ba-modal-list-picker .modal-body {
    max-height: 450px;
    min-height: 450px;
}

#disable-week-days-dialog .modal-header,
#calendar-dialog .modal-header,
#custom-color-scheme-dialog .modal-header,
#color-variables-dialog .modal-header {
    background: var(--dark-modal-bg);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border: none;
    border-bottom: 1px solid #393d4e;
    height: auto;
    padding: 0;
}

#disable-week-days-dialog i,
#calendar-dialog .modal-header i,
#custom-color-scheme-dialog .modal-header i,
#color-variables-dialog .modal-header i {
    color: var(--cp-main-color);
    cursor: default;
    font-size: 24px;
    padding: 15px 20px;
}

#color-picker-cell {
    height: 100%;
    top: 0;
    width: 100%;
}

/*
/* Media Manager
*/

body:not(.admin) {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

#ba-media-manager {
    overflow: hidden;
    position: relative;
}

.ba-modal-lg.modal.left-filter-modal {
    z-index: 1070;
}

#uploader-modal {
    z-index: 1090;
}


/* Media Manager Header */
.ba-media-header {
    background: var(--dark-modal-bg);
    border-bottom: 1px solid #34374a;
    color: var(--cp-main-color);
    position: fixed;
    top: 0;
    z-index: 1;
}

.ba-modal-lg.modal.left-filter-modal .modal-header {
    border-bottom: 1px solid #34374a ;
    box-sizing: border-box;
    padding-bottom: 50px;
    width: 100%;
}

.ba-media-header > div {
    margin: 0 !important;
}

.ba-modal-lg.modal.left-filter-modal .modal-header,
.ba-media-header > div:first-child {
    border: none;
    padding: 25px 15px 25px 25px;
    text-align: right;
    line-height: normal;
}

.ba-modal-lg.modal.left-filter-modal .modal-header,
.ba-media-header .ba-dialog-title {
    color: #fff;
    float: left;
    font: 500 18px/20px 'Roboto';
    letter-spacing: 0;
    text-transform: capitalize;
}

.ba-modal-lg.modal.left-filter-modal .ba-dialog-title {
    float: left;
}

.ba-modal-lg.modal.left-filter-modal .modal-header i,
.ba-media-header > div > i {
    color: #fff;
    cursor: pointer;
    line-height: 15px;
    padding: 0 8px;
    transition: .3s;
}

.ba-modal-lg.modal.left-filter-modal .modal-header i:hover,
.ba-media-header > div:first-child i:hover {
    opacity: .5;
}

.uploader-nav {
    align-items: center;
    background: var(--dark-modal-bg);
    display: flex;
    font-size: 16px;
    margin-bottom: 0;
    min-height: 35px;
    padding: 0 25px 10px;
    text-transform: capitalize;
}

.ba-breadcrumb {
    color: #fff;
    display: inline-block;
    font-weight: 500;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 320px);
}

.ba-breadcrumb a {
    font-size: 14px;
}

.uploader-nav a {
    color: var(--cp-main-color) !important;
    line-height: 30px !important;
}

.uploader-nav .ba-breadcrumb a {
    line-height: 35px;
}

.ba-breadcrumb i {
    color: var(--cp-main-color);
    cursor: default !important;
    font-size: 18px;
    padding: 0 10px;
    vertical-align: middle;
}

.control-toolbar {
    float: right;
}

.uploader-nav .control-toolbar label {
    margin-left: 15px;
    margin-bottom: 0;
}

.control-toolbar label {
    display: inline-block;
    position: relative;
}

#ba-apply {
    background: #f64231;
    border-radius: 50%;
    bottom: 50px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.23);
    padding: 18px;
    opacity: 0 !important;
    overflow: hidden;
    visibility: hidden;
    position: fixed;
    right: 75px;
    width: 24px;
}

@keyframes ba-apply {
    0% { transform: scale(.05); opacity: 0;}
    70% { transform: scale(1.01); opacity: 1;}
    100% { transform: scale(1); opacity: 1;}
}

#ba-apply.active {
    animation: ba-apply .45s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    visibility: visible;
    opacity: 1 !important;
    color: #fff;
}

.media-manager-enabled #ba-apply.active {
    display: none !important;
}

.uploader-nav .pagination-limit .ba-custom-select {
    border-radius: 3px;
}

.uploader-nav .pagination-limit .ba-custom-select:hover,
.uploader-nav .control-toolbar i:not(.zmdi-check):hover {
    background: #343749;
    color: #fff;
}

/* Media manager */
#ba-media-manager {
    overflow: hidden;
    position: relative;
}

.ba-modal-lg.modal.left-filter-modal .modal-body,
.ba-media-manager {
    backface-visibility: hidden;
    background: var(--dark-modal-bg);
    height: calc(100vh - 120px);
    margin-top: 120px;
    overflow: hidden;
}

.ba-modal-lg.modal.left-filter-modal .modal-body {
    height: calc(100vh - 167px);
    margin-top: 96px;
}

#ba-media-manager .ba-context-menu span {
    color: #cad3da;
    font-weight: 500;
    padding: 12px;
}

#ba-media-manager .ba-context-menu span i {
    color: var(--cp-main-color);
}

/* Uploader modal left sidebar */
.ba-folder-tree {
    box-sizing: border-box;
    display: inline-block;
    overflow-x: hidden;
    position: relative;
    width: 30%;
}

.availible-folders > ul,
.ba-folder-tree > ul {
    box-sizing: border-box;
    height: calc(100vh - 100px);
    list-style: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    padding: 25px 25px 25px 40px;
    width: calc(100% + 25px);
}

.availible-folders::-webkit-scrollbar-thumb{
    background: #484c65 !important;
    border-radius: 6px;
}

.ba-folder-tree > ul  {
    height: calc(100vh - 120px);
}

.availible-folders > ul ul,
.ba-folder-tree > ul ul {
    padding: 0 0 0 30px;
    margin: 0;
}

.availible-folders li,
.ba-folder-tree li {
    font-size: 14px;
    list-style: none;
    position: relative;
    white-space: nowrap;
}

.availible-folders li label,
.availible-folders li span,
.ba-folder-tree li a {
    color: #cad3da;
    cursor: pointer;
    display: block;
    font-weight: 500;
    overflow: hidden;
    padding: 10px 15px;
    text-overflow: ellipsis;
}

.availible-folders li i,
.ba-folder-tree li i {
    margin-right: 15px;
    color: var(--cp-main-color);
}

.availible-folders li > i:not(.zmdi-folder),
.ba-folder-tree li > i:not(.zmdi-folder) {
    box-sizing: content-box;
    display: block;
    height: 18px;
    left: -30px;
    font-size: 18px;
    line-height: 18px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 3px;
    width: 18px;
}

#ba-media-manager #move-to-modal .availible-folders > ul > li > ul,
.availible-folders > ul > li > ul {
    max-height: none;
    opacity: 1;
    overflow: visible;
    padding: 0;
    visibility: visible;
}

.availible-folders li > ul,
.ba-folder-tree li > ul {
    box-sizing: border-box;
    height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 0 0 30px;
    transition: opacity .35s, height .35s;
}

.availible-folders li.visible-branch > ul,
.ba-folder-tree li.visible-branch > ul {
    height: calc(var(--category-childs) * 45px);
    opacity: 1;
    transition: opacity .35s, height .35s;
}

.availible-folders li.visible-branch >  i.zmdi-chevron-right,
.ba-folder-tree li.visible-branch > i.zmdi-chevron-right {
    transform: rotate(90deg);
}

/* Work Area */
.ba-work-area {
    backface-visibility: hidden;
    background: var(--dark-modal-bg);
    border-left: 1px solid #34374a;
    box-sizing: border-box;
    float: right;
    height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    width: 70%;
}

.ba-modal-lg.modal.left-filter-modal .ba-work-area {
    height: 505px;
}

.ba-modal-lg.modal.left-filter-modal.fullscrean .ba-work-area {
    height: calc(100vh - 120px);
}

#condition-logic-modal.ba-modal-lg.modal.left-filter-modal.fullscrean .ba-work-area {
    height: calc(100vh - 104px);
}

#ba-media-manager .pagination-limit ul::-webkit-scrollbar-thumb,
#condition-logic-modal .ba-folder-tree > ul::-webkit-scrollbar-thumb,
#integration-element-options-modal .modal-body::-webkit-scrollbar-thumb,
.ba-integrations-group-wrapper::-webkit-scrollbar-thumb,
.ba-work-area::-webkit-scrollbar-thumb {
    background: #484c65 !important;
    border-radius: 6px;
}

#ba-media-manager .pagination-limit ul,
#condition-logic-modal .ba-folder-tree > ul,
#integration-element-options-modal .modal-body,
.ba-integrations-group-wrapper,
.ba-work-area{
    scrollbar-width: thin;
    scrollbar-color: #484c65 transparent;
}

.ba-work-area .select-all input {
    opacity: 0;
}

.ba-work-area .select-all i {
    left: 29px;
    position: absolute;
}

table.ba-items-list {
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
}

.table-head + div,
.table-head {
    width: 100%;
    float: left;
}

.table-head + div {
    min-height: calc(100% - 155px);
}

.table-head .files-size,
.table-head .files-name {
    border-bottom: 1px solid #34374a;
    box-sizing: border-box;
    color: #cad3da;
    display: inline-block;
    float: left;
    font: 500 14px/18px 'Roboto', sans-serif;
    padding: 15px 25px;
    text-align: left;
    width: 80%;
}

.table-head .files-size {
    border-left: 1px solid #34374a;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 20%;
}

.select-td .ba-image input:checked +i,
.table-head input:checked + i {
    color: var(--main-color);
}

.ba-work-area .check-all  {
    margin-right: 20px;
}

.table-head .files-name i {
    color: #fff;
    line-height: 0;
    opacity: 0;
    transform: translate(1px, -2px);
    vertical-align: middle;
}

.ba-hide-checkbox input[type="checkbox"]:checked + .check-all-wrapper i {
    opacity: 1;
}

.ba-hide-checkbox input[type="checkbox"]:checked + .check-all-wrapper:before {
    background: var(--main-color);
    border: 2px solid var(--main-color);
    opacity: 1;
}

.ba-work-area table.ba-items-list tbody tr td .ba-image {
    position: relative;
}

table.ba-items-list tbody tr td .ba-image img {
    max-height: 60px;
    max-width: 60px;
}

.ba-work-area table.ba-items-list tbody tr td .ba-image {
    display: block;
    min-width: 60px;
}

table.ba-items-list tbody tr td.select-td {
    box-sizing: border-box;
    height: 70px;
    padding-left: 65px;
    position: relative;
    text-align: left;
    width: 10%;
}

table.ba-items-list tbody tr td.select-td + td {
    max-width: 100px;
    overflow: hidden;
    padding-left: 75px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td.draggable-handler {
    cursor: move;
}

table.ba-items-list tbody tr td:last-child {
    text-align: center;
    width: 20%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ba-work-area table.ba-items-list tbody tr td.select-td:before {
    animation: spin 1s infinite;
    color: #65d9b4;
    content: '\f3ec';
    font: normal normal normal 24px/1 'Material-Design-Iconic-Font';
    left: 80px;
    margin: -12px 0 0 -12px;
    position: absolute;
    top: 35px;
}

.folder-icons {
    display: inline-block;
    position: relative;
    width: 40px;
}

.ba-items-list .select-td a {
    color: var(--cp-main-color);
    font-size: 48px;
    position: static;
}

.ba-items-list a:not(.zmdi-folder),
.ba-items-list,
.ba-modal-sm .ba-footer-content a,
.ba-modal-sm h3,
.modal-footer a {
    font-weight: 500;
}

.ba-items-list a:not(.zmdi-folder),
.ba-items-list {
    color: #cad3da;
}

#ba-media-manager .select-td i.zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr td i.zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr td.select-td i+i {
    left: -65px;
    margin-top: -35px;
    position: absolute;
    top: 35px;
}

#ba-media-manager table.ba-items-list tbody tr td .zmdi-folder + i.zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr td.select-td .zmdi-folder + i+i {
    top: 24px;
}

#ba-media-manager table.ba-items-list tbody tr td i.zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr td.select-td i+i {
    top: 50%;
}

.check-all-wrapper {
    position: relative;
}

.check-all-wrapper:before,
#ba-media-manager .select-td i.zmdi-circle-o:before {
    border-radius: 3px;
    border: 2px solid var(--cp-main-color);
    box-sizing: border-box;
    content: "";
    display: block;
    height: 20px;
    left: calc(50% - 10px);
    position: absolute;
    top: calc(50% - 10px);
    width: 20px;
}

.check-all-wrapper:before {
    left: calc(50% - 20px);
    top: calc(50% - 10px);
    pointer-events: none;
    opacity: .5;
}

.check-all-wrapper:hover:before {
    border: 2px solid var(--main-color);
    opacity: 1;
}

#ba-media-manager table.ba-items-list tbody tr:hover i.zmdi-circle-o:before,
#ba-media-manager .context-active i.zmdi-circle-o:before {
    border: 2px solid #fff;
}

#ba-media-manager table.ba-items-list tbody tr .select-td .ba-image .select-item:checked + input + i + i.zmdi-check:before,
#ba-media-manager table.ba-items-list tbody tr .select-td .select-item:checked + .folder-icons .zmdi-check:before {
    background: var(--main-color);
    color: #fff;
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 15px;
    border-radius: 3px;
    border: 2px solid var(--main-color);
    box-sizing: border-box;
    left: calc(50% - 10px);
    position: absolute;
    top: calc(50% - 10px);
}

#ba-media-manager .select-td i.zmdi-circle-o:hover:before {
    border: 2px solid var(--main-color);
}

#ba-media-manager table.ba-items-list tbody tr td.select-td .folder-icons i.zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr td.select-td i+i,
#ba-media-manager table.ba-items-list tbody tr td .ba-image i:not(.ba-file-icon) {
    height: 70px;
    line-height: 70px;
    opacity: 0;
    text-align: center;
    width: 65px;
}

#ba-media-manager table.ba-items-list tbody tr td .ba-image i.ba-file-icon,
#ba-media-manager .select-item:checked + .folder-icons .zmdi-check,
#ba-media-manager .select-item:checked + input + i + i.zmdi-check {
    opacity: 1 !important;
}

#ba-media-manager table.ba-items-list tbody tr td .ba-image i.ba-file-icon {
    position: static;
}

#ba-media-manager .select-td i.zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr td .ba-image i.zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr td.select-td .folder-icons i.zmdi-circle-o {
    color: #fff;
    opacity: .5;
}

.uploader-nav .pagination-limit .ba-custom-select .zmdi-caret-down {
    color: var(--cp-main-color);
    left: 38px;
    padding: 0;
    right: auto;
    top: 9px;
}

.uploader-nav .pagination-limit .ba-custom-select input {
    border-radius: 3px;
    color: var(--cp-main-color);
    height: 40px !important;
    line-height: 40px;
    max-width: 65px;
    transition: none;
    width: auto;
}

.uploader-nav .pagination-limit .ba-custom-select:hover > input +i,
.uploader-nav .pagination-limit .ba-custom-select:hover > input {
    color: #fff;
    background: transparent;
}

.uploader-nav .control-toolbar label {
    margin-bottom: 0;
    margin-left: 15px;
}

.uploader-nav .pagination-limit {
    display: inline-block;
    vertical-align: top;
}

.uploader-nav a:hover,
table.ba-items-list a:hover {
    text-decoration: none;
}

.uploader-nav i {
    padding: 0 10px;
    color: var(--cp-main-color);
}

#delete-items:not(.active),
#move-to:not(.active) {
    opacity: .3;
    cursor: not-allowed;
}

.uploader-nav .control-toolbar #delete-items:not(.active):hover,
.uploader-nav .control-toolbar #move-to:not(.active):hover {
    background: transparent;
    color: var(--cp-main-color);
}

.availible-folders li.active > label,
.availible-folders li.active > label i,
.availible-folders li label:hover i,
.availible-folders li label:hover,
.availible-folders li.active > span i,
.availible-folders li.active > span,
.availible-folders li span:hover i,
.availible-folders li span:hover,
.ba-folder-tree li.active > a,
.ba-folder-tree li.active > a i,
.ba-folder-tree li > a.context-active,
.ba-folder-tree li > a.context-active i,
.ba-folder-tree a:hover,
.ba-folder-tree a:hover i {
    background: transparent !important;
    color: #fff !important;
    text-decoration: none!important;
}

#ba-media-manager .ba-work-area .context-active,
#ba-media-manager table.ba-items-list tbody tr.context-active a,
#ba-media-manager table.ba-items-list tbody tr:hover {
    background:  #343749 !important;
}

.ba-items-list .select-td i.zmdi-check {
    color: #000;
}

#ba-media-manager table.ba-items-list tbody tr .select-td .select-item:checked + .folder-icons .zmdi-check,
#ba-media-manager table.ba-items-list tbody tr .select-td .ba-image .select-item:checked + input + i + i.zmdi-check {
    opacity: 1;
}

#ba-media-manager table.ba-items-list tbody tr .select-td .select-item:checked + .folder-icons .zmdi-circle-o,
#ba-media-manager table.ba-items-list tbody tr .select-td .ba-image .select-item:checked + input + i {
    opacity: 0;
}

.ba-work-area .pagination ul li.active a {
    background: var(--main-color) !important;
    color: #fff!important;
}

.ba-work-area .pagination ul > li > a .zmdi {
    font-size: 16px !important;
}

/*
/* Integration Modal
*/

.ba-modal-lg.modal.left-filter-modal {
    background: var(--dark-modal-bg);
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element i {
    color: var(--main-color);
    font-size: 28px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 10px;
}

.ba-integrations-group-wrapper .integrations-group .ba-work-area-element.active i {
    opacity: 1;
}

#integration-element-options-modal {
    top: calc(51% - 275px);
    left: 50%;
    margin-left: -225px;
    z-index: 1080;
    backface-visibility: hidden;
    will-change: transform;
}

/* Drive Folders Dialog */

.ba-modal-list-picker {
    height: 450px;
    left: calc(50% - 360px);
    position: fixed;
    top: calc(50% - 210px);
    z-index: 99999;
}

.ba-modal-list-picker .modal-body input:focus,
.ba-modal-list-picker .modal-body input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #34374a !important;
    cursor: text;
    color: #fff;
    font: 500 14px/14px 'Roboto';
    max-width: 100%;
    min-width: auto;
    margin: 0;
    padding-left: 25px;
    width: 100%;
}

.ba-modal-list-picker .ba-settings-input-type {
    margin: 0;
}

.ba-modal-list-picker ul {
    color: var(--cp-main-color);
    list-style: none;
    margin: 0;
    max-height: 395px;
    overflow: auto;
    padding: 0 !important;
    width: 100%;
}

.ba-modal-list-picker ul li {
    cursor: pointer;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.ba-modal-list-picker .ba-settings-list-type {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
}

#phone-field-settings-dialog .default-country-select input,
.trigger-picker-modal[data-modal="drive-folders-dialog"] input {
    cursor: pointer !important;
}

.ba-modal-list-picker .modal-body input::-webkit-input-placeholder,
.trigger-picker-modal[data-modal="drive-folders-dialog"] input::-webkit-input-placeholder {
    color: var(--cp-main-color);
    font: 500 14px/14px 'Roboto';
}

.ba-modal-list-picker .modal-list-type-wrapper .zmdi-search {
    bottom: calc(50% - 12px);
    color: var(--cp-main-color);
    content: '\f1c3';
    cursor: text;
    font-family: 'Material-Design-Iconic-Font';
    font-size: 24px;
    position: absolute;
    right: 25px;
}

/* ========================================================================
    Condition Logic
 ========================================================================== */

#condition-logic-modal .ba-folder-tree > ul {
    height: calc(100vh - 245px);
    width: 100% !important;
}

#condition-logic-modal:not(.fullscrean) .ba-folder-tree > ul {
    height: 365px;
    width: 100% !important;
}

#condition-logic-modal .ba-folder-tree li a {
    align-items: center;
    display: flex;
}

#condition-logic-modal .ba-folder-tree li a > span {
    flex-grow: 1;
}

#condition-logic-modal .ba-work-area .ba-settings-group {
    border: none;
    padding: 0 100px 25px 25px;
}

#condition-logic-modal .ba-work-area .ba-settings-group .ba-settings-group-title {
    padding-top: 0;
}

#condition-logic-modal .ba-work-area input[type="number"],
#condition-logic-modal .ba-work-area input[type="text"],
#condition-logic-modal .ba-work-area select {
    height: 45px;
    width: 100%;
    min-width: auto;
}

#condition-logic-modal .ba-work-area input[type="number"],
#condition-logic-modal .ba-work-area input[type="text"] {
    cursor: text;
}

.condition-logic-horizontal-fields-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.condition-logic-do-group .ba-settings-group-title + .condition-logic-horizontal-fields-wrapper,
.condition-logic-when-group .ba-settings-group-title + .condition-logic-horizontal-fields-wrapper {
    margin-top: 0;
}

.condition-logic-do-group .ba-settings-group-title + .condition-logic-horizontal-fields-wrapper:nth-last-child(2) .ba-settings-icon-type, 
.condition-logic-when-group .ba-settings-group-title + .condition-logic-horizontal-fields-wrapper:nth-last-child(3) .ba-settings-icon-type {
    opacity: 0 !important;
    pointer-events: none !important;
}

#condition-logic-modal .add-new-select-item-wrapper {
    justify-content: flex-start;
    margin: 10px 0 0;
}

.condition-logic-horizontal-fields-wrapper .ba-settings-item:not(:last-child) {
    width: 100%;
    margin: 0 10px 0 0;
}

#condition-logic-modal input::-webkit-input-placeholder {
    color: var(--cp-main-color);
}

#condition-logic-modal .condition-logic-do-group {
    border: none;
}

#condition-logic-modal .ba-settings-toolbar {
    padding: 0 25px;
}

#condition-logic-modal .ba-folder-tree > ul {
    padding: 25px;
}

.condition-logic-horizontal-fields-wrapper .ba-settings-icon-type,
.conditional-logic-icons {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 50px;
    margin: 0;
}

.condition-logic-horizontal-fields-wrapper .ba-settings-icon-type i {
    padding: 10px;
}

.condition-logic-horizontal-fields-wrapper .ba-settings-icon-type i:hover {
    color: #fff;
}

.conditional-logic-icons i {
    margin-right: 0 !important;
    padding: 10px;
    pointer-events: none;
}

 #condition-logic-modal .conditions-matches-wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

 #condition-logic-modal .conditions-matches-wrapper span {
    white-space: nowrap;
}

 #condition-logic-modal .conditions-matches-wrapper select {
    width: auto;
    margin: 0 10px;
}

/*
/* Drag & Drop
*/
@keyframes item-dragging {
    from { max-width: 50vw; }
    to { max-width: 200px; }
}

.ui-draggable-dragging {
    animation: item-dragging .3s both;
    background: #2c2c2c !important;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: #fff;
    cursor: move;
    margin-left: 75px;
    margin-top: -10px;
    max-width: 200px;
}

.ba-media-manager .ui-draggable-dragging {
    background: #343749 !important;
}

.ui-draggable-dragging .ba-image img {
    max-height: 50px !important;
}

.ui-draggable-dragging * {
    cursor: move !important;
}

.ui-draggable-dragging a {
    color: #fff !important;
}

.ui-draggable-dragging td {
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px 20px !important;
    border: none !important;
}

.ui-draggable-dragging td.select-td {
    max-width: 100% !important;
}

.ui-draggable-dragging td.select-td .zmdi-check {
    display: none;
}

.ui-draggable-dragging td:last-child {
    color: transparent;
}

.ui-draggable-dragging.ba-dropping td:nth-child(2),
.ui-draggable-dragging td:nth-child(2) {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ba-media-manager table.ba-items-list tbody tr.ui-draggable-dragging td:first-child {
    padding-right: 0 !important;
}

.sortable-backdrop,
#library-backdrop {
    bottom: 0;
    cursor: move;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
}

#library-backdrop.visible-backdrop {
    display: block;
}

.sortable-helper,
#library-item-handle {
    margin: -17px !important;
    pointer-events: none;
    position: fixed !important;
    text-align: left !important;
    z-index: 99999;
}

.sortable-helper i,
#library-item-handle i {
    background: #4f2b4f;
    border-radius: 50%;
    box-sizing: content-box;
    box-shadow: 0 5px 12px rgba(0,0,0,0.23);
    color: #fff;
    cursor: move !important;
    font-size: 20px;
    line-height: 20px;
    padding: 10px;
    text-align: center;
    width: 20px;
}

.sortable-helper i {
    font-size: 22px;
    line-height: 24px;
    padding: 13px;
    width: 24px;
}

/* Sortable Placeholder */
.sortable-helper,
.sortable-placeholder {
    display: none;
    pointer-events: none;
}

.sortable-placeholder:after,
#library-placeholder:before {
    left: auto !important;
    right: -14px;
}

#library-placeholder,
.sortable-placeholder {
    box-shadow: 0 0 0 3px #617d89 !important;
    height: 0;
    margin: 0;
    position: fixed;
    transition: none;
    z-index: 1040 !important;
}

.select-sortable-started .sortable-placeholder{
    z-index: 1080!important;
}

.items-sortable-started *,
.select-sortable-started *{
    cursor: move!important;
}

.items-sortable-started .ba-edit-item,
.select-sortable-started .ba-edit-item {
    display: none !important;
}

#library-placeholder:before,
#library-placeholder:after,
.sortable-placeholder:before,
.sortable-placeholder:after{
    background: #617d89;
    border-radius: 50%;
    content: '';
    height: 20px;
    left: -15px;
    position: absolute;
    top: -10px;
    width: 20px;
}

.sortable-placeholder > div {
    bottom: 0;
    cursor: move;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
}

.ba-form-field-item {
    position: relative;
    width: 100%;
}

/*
/* Preloader
*/

.preloader.ba-hide {
    opacity: 0;
    top: 30px;
    transition: all .3s ease-in-out;
}

.preloader {
    height: 10px;
    left: 0;
    position: fixed;
    top: 30px;
    width: 100%;
}

@keyframes preloader {
    0% {width: 0;}
    100% { width: 70%;}
}

.ba-preloader-slide {
    animation: preloader 2s both ease-in-out;
}

.preloader .preloader-left-section {
    background: var(--main-color);
    height: 5px;
    left: 0;
    position:absolute;
    top: 0px;
    width: 100%;
}

.preloader .preloader-left-section:before {
    background: #e3e3e3;
    content: "";
    display: block;
    height: 5px;
    position: fixed;
    top: 30px;
    width: 100%;
    z-index: -1;
}

/* ========================================================================
    Products Cart
 ========================================================================== */

.ba-form-products-cart {
    margin-top: 5px;
}

.ba-form-total-field .ba-form-products-cart .ba-form-product-row {
    align-items: center;
    border: 1px solid rgba(214, 214, 214, 0.4);
    display: flex;
    margin-bottom: 10px;
    padding: 25px;
}

.ba-cart-total-wrapper .ba-cart-total-container .ba-cart-total-container-row.ba-cart-shipping-row {
    flex-direction: column;
}

.ba-form-total-field .ba-form-products-cart .ba-form-product-row:last-child {
    margin-bottom: 25px;
}

.submission-info-wrapper .ba-form-product-row {
    align-items: center;
    border-bottom: 1px solid #f3f3f3;
    display: flex;
    padding: 10px 0;
}

.ba-form-products-cart .ba-form-product-title-cell {
    flex-grow: 1;
}

.ba-form-products-cart .ba-form-product-quantity-cell {
    align-items: center;
    display: flex;
    margin: 0 50px;
}

.submission-data-message .ba-form-products-cart .ba-form-product-quantity-cell {
    margin: 0 100px 0 50px;
}

.ba-form-products-cart .ba-form-product-remove-cell {
    margin-left: 50px;
}

.ba-form-product-quantity-cell i:hover,
.ba-form-products-cart .ba-form-product-remove-cell i:hover {
    opacity: .65;
}

.ba-form-products-cart.disabled-cart-products {
    display: none;
}

.ba-cart-shipping-item,
.ba-cart-total-wrapper .ba-cart-total-container .ba-cart-total-container-row,
.ba-cart-promo-code-container,
.ba-form-total-field .ba-field-container {
    display: flex;
}

.ba-cart-total-wrapper .ba-cart-total-container .ba-cart-total-container-row:not(.ba-cart-shipping-row) {
    align-items: center;
}

.ba-cart-total-container-row.ba-cart-shipping-row .ba-cart-row-title {
    line-height: 30px;
    margin-bottom: 25px;
}

.ba-form-total-field .ba-cart-total-wrapper .ba-cart-total-container .ba-cart-total-container-row.ba-cart-subtotal-row {
    padding-top: 25px;
    border-top: 1px solid rgba(214, 214, 214, 0.4);
}

.ba-form-total-field .ba-field-container {
    justify-content: flex-end;
}

.ba-cart-total-container-row {
    padding: 0 25px;
    margin-bottom: 15px;
}

.submission-data-message .ba-cart-total-container-row {
    padding: 10px 0;
    margin-bottom: 0;
}

.submission-data-message .ba-cart-total-container-row.ba-cart-total-row {
    border: none;
}

.submission-data-message .ba-cart-total-container-row + .ba-cart-total-container-row.ba-cart-total-row {
    border-top: 1px solid rgba(214, 214, 214, 0.4);
}

.ba-cart-total-container-row .ba-form-calculation-price-wrapper{
    margin: 0;
    white-space: nowrap;
}

.ba-cart-row-content {
    flex-grow: 1;
    text-align: right;
}

.submission-data-message .ba-cart-row-content {
    flex-grow: 0;
}

.ba-cart-row-content span.ba-shipping-title {
    flex-grow: 1;
    text-align: left;
}

.submission-data-message .ba-cart-row-content span.ba-shipping-title {
    margin-right: 25px;
}

.ba-cart-shipping-item,
.ba-cart-promo-code-container {
    align-items: center;
}

.ba-cart-promo-code-btn {
    align-self: stretch;
    display: flex;
    align-items: center;
    background: var(--theme-color);
    border-radius: var(--field-border-radius);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: var(--field-typography-font-size);
    font-family: var(--field-typography-font-family);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    height: auto;
    letter-spacing: var(--field-typography-letter-spacing);
    line-height: var(--field-typography-line-height);
    margin-left: 10px;
    padding-bottom: var(--field-padding-bottom);
    padding-left: 30px;
    padding-right: 30px;
    padding-top: var(--field-padding-top);
}

.ba-cart-promo-code-btn:hover {
    background: #212121 !important;
    color: #fff !important;
}

.ba-cart-promo-code-wrapper {
    margin-right: 20px;
    width: 50%;
}

.ba-cart-total-wrapper .ba-cart-total-container {
    border: 1px solid rgba(214, 214, 214, 0.4);
    border-top: none;
    flex-grow: 1;
    padding: 0 0 25px 0;
}

.submission-data-message .ba-cart-total-wrapper .ba-cart-total-container {
    padding: 0;
    border: none;
     margin-top: var(--label-typography-line-height);
}

.ba-form-total-field .ba-cart-promo-code-wrapper:not([style="display: none;"]) + .ba-cart-total-wrapper  {
    margin-top: var(--label-typography-line-height);
}

.ba-cart-row-title {
    min-width: 25%;
    text-align: left;
}

.ba-cart-total-row {
    border-top: 1px solid rgba(214, 214, 214, 0.4);
    padding-top: 20px;
}

.ba-cart-total-row {
    margin-bottom: 0;
}

.ba-cart-total-wrapper {
    width: 100%;
}

.ba-cart-promo-code-wrapper:not([style="display: none;"]) + .ba-cart-total-wrapper {
    width: 50%;
}

.submission-data-message .ba-cart-total-wrapper {
    width: 100%;
}

.submission-data-message .ba-cart-total-wrapper {
    margin-top: 20px;
}

.submission-data-message .ba-cart-total-wrapper .ba-cart-row-title {
    flex-grow: 1;
}

.ba-cart-shipping-item {
    margin-bottom: 20px;
}

.submission-data-message .ba-cart-shipping-item {
    margin-bottom: 0;
}

.ba-form-total-field .ba-field-container .ba-form-calculation-price-wrapper {
    align-items: center;
}

.right-currency-position .field-price-value {
    text-align: right;
}

.ba-form-field-item .ba-form-products-cart .ba-form-product-quantity-cell input {
    border-radius: 0;
    margin: 0 10px;
    padding: 10px 0 10px 10px;
    width: 50px !important;
}

.ba-form-product-quantity-cell i,
.ba-form-products-cart .ba-form-product-remove-cell i {
    color: var(--field-typography-color);
}

.ba-form-products-cart .ba-form-calculation-price-wrapper {
    margin-left: 30px;
}

/* ========================================================================
    Calculator
 ========================================================================== */

.ba-form-calculator {
    display: flex;
    margin-bottom: 25px;
}

.ba-form-calculator-body,
.ba-form-calculator-header {
    width: 50%;
}

.ba-form-calculator-screen {
    border: none !important;
    color: #fff;
    font: 14px/1.75em 'Roboto', sans-serif;
    height: 240px;
    outline: none !important;
    padding: 15px;
    resize: none;
    width: 100%;
}

.ba-form-calculator-row {
    display: flex;
    justify-content: space-between;
}

.ba-form-calculator-row .ba-form-calculator-btn {
    background: #343749;
    border-radius: 3px;
    box-sizing: content-box;
    cursor: pointer;
    display: inline-block;
    flex-grow: 1;
    font-size: 18px;
    font-weight: 500;
    height: 24px !important;
    line-height: 24px !important;
    margin: 5px 0 0 5px;
}

.ba-form-calculator-row:first-child .ba-form-calculator-btn {
    margin-top: 0;
}

#default-value-dialog.calculator-data-tags .default-value-searchbar,
#default-value-dialog.calculator-data-tags .ba-settings-group:not(.fields-data-tags),
#default-value-dialog.calculator-data-tags .all-fields-tag {
    display: none;
}

#default-value-dialog.calculator-data-tags .ba-settings-group.fields-data-tags {
    display: block !important;
}

.ba-form-calculator-btn[data-code="0"] {
    min-width: 71px;
}

.ba-form-calculator-btn[data-fields] {
    color: #fff;
}

.ba-form-calculation-field .ba-input-wrapper {
    background-color: var(--calculation-background-color);
    padding-top: var(--calculation-padding-top);
    padding-right: var(--calculation-padding-right);
    padding-bottom: var(--calculation-padding-bottom);
    padding-left: var(--calculation-padding-left);
}

/* ========================================================================
    Form Style
 ========================================================================== */

.ba-form-page:not(.sortable-helper) {
    background: var(--form-background-color);
    border-bottom: calc(var(--form-border-bottom)*var(--form-border-width)) solid var(--form-border-color);
    border-left: calc(var(--form-border-left)*var(--form-border-width)) solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    border-right: calc(var(--form-border-right)*var(--form-border-width)) solid var(--form-border-color);
    border-top: calc(var(--form-border-top)*var(--form-border-width)) solid var(--form-border-color);
    box-shadow: 0 calc(var(--form-shadow-value)*10px) calc(var(--form-shadow-value)*20px) 0 var(--form-shadow-color);
    box-sizing: border-box;
    min-width: var(--form-width-fullwidth);
    padding-bottom: var(--form-padding-bottom);
    padding-left: var(--form-padding-left);
    padding-right: var(--form-padding-right);
    padding-top: var(--form-padding-top);
    width: var(--form-width-value);
}

.ba-form-field-item {
    margin-top: var(--field-margin-top);
    margin-bottom: var(--field-margin-bottom);
}

.ba-form-field-item .confirm-password-wrapper,
.ba-form-field-item .confirm-email-wrapper {
    margin-top: var(--field-margin-top);
}

.ba-form-submit-recaptcha-wrapper .forms-recaptcha {
    margin-bottom: var(--field-margin-bottom);
}

.ba-form-field-item.hidden-condition-field:not(.sortable-helper) > *:not(.ba-edit-item),
.ba-form-field-item.hidden-condition-field .confirm-email-wrapper,
.ba-form-field-item.hidden-condition-field .ba-input-wrapper,
.ba-form-field-item[data-hidden="true"] .ba-input-wrapper,
.ba-form-field-item[data-hidden="true"] .confirm-email-wrapper{
    opacity: .5;
}

.ba-form-calendar-field[data-hidden="true"] .ba-input-wrapper .ba-field-container:not(.calendar-range-type):before,
.ba-form-input-field[data-hidden="true"] .ba-input-wrapper .ba-field-container:before,
.ba-form-input-field[data-hidden="true"] .confirm-email-wrapper .ba-field-container:before {
    content: '\f15b';
}

.ba-form-address-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-dropdown-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-calendar-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-phone-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-input-field.hidden-condition-field .confirm-email-wrapper .ba-field-container:before,
.ba-form-input-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before {
    content: '\f152';
}

.ba-form-address-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-dropdown-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-calendar-field[data-hidden="true"] .ba-input-wrapper .ba-field-container:before,
.ba-form-calendar-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-phone-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before,
.ba-form-input-field[data-hidden="true"] .ba-input-wrapper .ba-field-container:before,
.ba-form-input-field[data-hidden="true"] .confirm-email-wrapper .ba-field-container:before,
.ba-form-input-field.hidden-condition-field .confirm-email-wrapper .ba-field-container:before,
.ba-form-input-field.hidden-condition-field .ba-input-wrapper .ba-field-container:before {
    align-items: center;
    bottom: calc(var(--field-padding-bottom) + var(--field-border-width)*var(--field-border-bottom));
    color: var(--field-icon-color);
    display: flex;
    font-family: 'Material-Design-Iconic-Font';
    font-size: var(--field-icon-size);
    justify-content: center;
    left: 50%;
    line-height: var(--field-typography-line-height);
    pointer-events: none;
    position: absolute;
    top: calc(var(--field-padding-top) + var(--field-border-width)*var(--field-border-top) );
    transform: translateX(-50%);
    z-index: 10;
}

.ba-form-field-item .ba-field-label-wrapper {
    overflow: hidden;
    position: relative;
    text-align: var(--label-typography-text-align);
    line-height: var(--label-typography-line-height);
}

.required-star {
    margin: 0 5px;
}

.characters-wrapper,
.ba-form-field-item .ba-input-help {
    float: right;
    margin-left: 10px;
}

.characters-wrapper .current-characters {
    margin-right: 5px;
}

.ba-form-field-item .ba-input-help i {
    opacity: .5;
    margin-right: 1px;
}

.ba-form-field-item .ba-input-help i:hover {
    opacity: 1;
}


.ba-form-field-item .ba-input-help i {
    cursor: help;
}

.ba-form-page-break-button,
.ba-cart-container-title,
.ba-form-page-navigation .ba-form-page-navigation-title,
.ba-form-page-navigation-counter,
.ba-form-page-navigation-title .ba-page-navigation-title,
.ba-cart-row-title,
.ba-form-products-cart .ba-form-product-title-cell,
.characters-wrapper *,
.ba-form-field-item .ba-field-label-wrapper > * {
    color: var(--label-typography-color);
    font-size: var(--label-typography-font-size);
    font-style: var(--label-typography-font-style);
    font-weight: var(--label-typography-font-weight);
    letter-spacing: var(--label-typography-letter-spacing);
    font-family: var(--label-typography-font-family);
    line-height: var(--label-typography-line-height);
    text-transform: var(--label-typography-text-transform);
}

.ba-form-calendar-field .ba-field-container input[readonly],
.custom-html-wrapper,
.ba-form-acceptance-html,
.ba-cart-total-container span,
.ba-form-products-cart .ba-form-product-remove-cell i,
.ba-form-products-cart .ba-form-calculation-price-wrapper *,
.ba-form-products-cart .ba-form-product-quantity-cell i,
.ba-form-products-cart .ba-form-product-title-cell,
.ba-cart-promo-code-wrapper .ba-cart-container-title {
    cursor: default !important;
}

body > .ba-tooltip.ba-input-help-tooltip {
    font: 400 14px/24px  'Roboto', sans-serif;
}

.characters-wrapper * {
    font-size: calc(var(--label-typography-font-size) *.7);
    line-height: calc(var(--label-typography-line-height) *.7);
}

.ba-field-container {
    position: relative;
}

.ba-form-calculation-field .ba-field-container {
    text-align: var(--field-typography-text-align);
    line-height: 0;
}

.ba-form-product-total-cell,
.ba-form-calculation-price-wrapper,
.ba-form-calculation-field .ba-field-container .ba-form-calculation-price-wrapper {
    display: inline-flex;
}

.ba-form-product-total-cell {
    min-width: 4em;
}

.submission-data-message .ba-form-calculation-price-wrapper,
.submission-data-message .ba-form-product-total-cell {
    color: #333;
    font-weight: bold;
}

.ba-form-products-cart .field-price-currency,
.ba-field-container .field-price-currency {
    order: 0;
}

.ba-form-products-cart.right-currency-position .field-price-currency,
.ba-field-container.right-currency-position .field-price-currency {
    order: 1;
}

.ba-form-products-cart.right-currency-position .field-price-currency:not(:empty),
.ba-field-container.right-currency-position .field-price-currency:not(:empty) {
    margin-left: 5px;
}

.ba-form-products-cart:not(.right-currency-position) .field-price-currency:not(:empty),
.ba-field-container:not(.right-currency-position) .field-price-currency:not(:empty) {
    margin-right: 5px;
}

.ba-form-checkbox-group-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.empty-content {
    display: none !important;
}

.ba-field-container i {
    align-items: baseline;
    bottom: calc(var(--field-padding-bottom) + var(--field-border-width)*var(--field-border-bottom));
    box-sizing: border-box;
    color: var(--field-icon-color);
    display: flex;
    font-size: var(--field-icon-size);
    line-height: var(--field-typography-line-height);
    justify-content: var(--field-icon-text-align);
    left: calc(var(--field-padding-left) + var(--field-border-width)*var(--field-border-left));
    pointer-events: none;
    position: absolute;
    right: calc(var(--field-padding-right) + var(--field-border-width)*var(--field-border-right));
    top: calc(var(--field-padding-top) + var(--field-border-width)*var(--field-border-top) );
}

.fields-icons-flex-start .ba-field-container i + textarea,
.fields-icons-flex-start .ba-field-container i + input {
    padding-left: calc(var(--field-padding-left) + var(--field-icon-size) + 15px) !important;
}

.fields-icons-flex-end .ba-field-container i + textarea,
.fields-icons-flex-end .ba-field-container i + input {
    padding-right: calc(var(--field-padding-right) + var(--field-icon-size) + 15px) !important;
}

.ba-form-calendar-field .ba-field-container.ba-readonly-calendar input[readonly] {
    cursor: not-allowed;
}

.ba-cart-row-content span.ba-shipping-title,
.ba-form-products-cart .ba-form-product-quantity-cell input,
.ba-form-calculation-price-wrapper .field-price-currency,
.ba-form-calculation-price-wrapper .field-price-value,
.ba-form-calculation-field .field-price-currency,
.ba-form-calculation-field .field-price-value,
.ba-field-container textarea::-webkit-input-placeholder,
.ba-field-container input[type="text"]::-webkit-input-placeholder,
.ba-field-container input[type="number"]::-webkit-input-placeholder,
.ba-field-container input[type="email"]::-webkit-input-placeholder {
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    letter-spacing: var(--field-typography-letter-spacing);
    line-height: var(--field-typography-line-height);
}

.ba-field-container textarea::-moz-placeholder,
.ba-field-container input[type="text"]::-moz-placeholder,
.ba-field-container input[type="number"]::-moz-placeholder,
.ba-field-container input[type="email"]::-moz-placeholder {
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    letter-spacing: var(--field-typography-letter-spacing);
    line-height: var(--field-typography-line-height);
}

.ba-form-signature-field .ba-signature-canvas,
.ba-form-products-cart .ba-form-product-quantity-cell input,
.ba-form-page-navigation-title,
.upload-file-btn,
.upload-file-input,
.ba-field-container select,
.ba-field-container textarea,
.ba-field-container input[type="text"],
.ba-field-container input[type="password"],
.ba-field-container input[type="number"],
.ba-field-container input[type="email"] {
    background: var(--field-background-color);
    background-image: none !important;
    border-bottom: calc(var(--field-border-bottom)*var(--field-border-width)) solid var(--field-border-color);
    border-left: calc(var(--field-border-left)*var(--field-border-width)) solid var(--field-border-color);
    border-radius: var(--field-border-radius);
    border-right: calc(var(--field-border-right)*var(--field-border-width)) solid var(--field-border-color);
    border-top: calc(var(--field-border-top)*var(--field-border-width)) solid var(--field-border-color);
    box-sizing: border-box;
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    height: auto;
    letter-spacing: var(--field-typography-letter-spacing);
    line-height: var(--field-typography-line-height);
    margin: 0;
    padding-bottom: var(--field-padding-bottom);
    padding-left: var(--field-padding-left);
    padding-right: var(--field-padding-right);
    padding-top: var(--field-padding-top);
    text-align: var(--field-typography-text-align);
    text-transform: var(--field-typography-text-transform);
    transition: none;
    width: 100% !important;
}

.ba-form-page-navigation-title {
    background: rgba(214, 214, 214, 0.4);
}

.ba-field-container select:not([multiple]) {
    height: calc(var(--field-typography-line-height) + var(--field-padding-top) + var(--field-padding-bottom) + (var(--field-border-top)*var(--field-border-width)) + (var(--field-border-bottom)*var(--field-border-width)));
    text-align-last: var(--field-typography-text-align);
}

@supports (-webkit-overflow-scrolling: touch) {
        .ba-form-page-navigation-title,
        .ba-form-page-break-button,
        .upload-file-btn,
        .upload-file-input,
        .ba-field-container select,
        .ba-field-container textarea,
        .ba-field-container input[type="text"],
        .ba-field-container input[type="number"],
        .ba-field-container input[type="password"],
        .ba-field-container input[type="email"]{
            -webkit-appearance: none;
        }
}

 .ba-field-container input[type="text"].set-slider-range {
    background: transparent;
    border-radius: 0!important;
    border: none !important;
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    height: var(--field-typography-font-size);
    opacity: .5;
    padding: 0;
    text-align: left;
    width: 50px !important;
}

.ba-form-submit-btn {
    align-items: center;
    background-color: var(--submit-background-color);
    border-bottom: calc(var(--submit-border-bottom)*var(--submit-border-width)) solid var(--submit-border-color);
    border-left: calc(var(--submit-border-left)*var(--submit-border-width)) solid var(--submit-border-color);
    border-radius: var(--submit-border-radius);
    border-right: calc(var(--submit-border-right)*var(--submit-border-width)) solid var(--submit-border-color);
    border-top: calc(var(--submit-border-top)*var(--submit-border-width)) solid var(--submit-border-color);
    box-shadow: 0 calc(var(--submit-shadow-value)*10px) calc(var(--submit-shadow-value)*20px) 0 var(--submit-shadow-color);
    color: var(--submit-typography-color);
    cursor: pointer;
    display: flex;
    flex-direction: var(--submit-icon-text-align);
    flex-grow: var(--submit-typography-text-align);
    font-family: var(--submit-typography-font-family);
    font-size: var(--submit-typography-font-size);
    font-style: var(--submit-typography-font-style);
    font-weight: var(--submit-typography-font-weight);
    justify-content: center;
    letter-spacing: var(--submit-typography-letter-spacing);
    line-height: var(--submit-typography-line-height);
    padding-bottom: var(--submit-padding-bottom);
    padding-left: var(--submit-padding-left);
    padding-right: var(--submit-padding-right);
    padding-top: var(--submit-padding-top);
    text-align: var(--submit-typography-text-align);
    text-transform: var(--submit-typography-text-transform);
    transition: background-color .3s ease-in-out, border-right .3s ease-in-out, color .3s ease-in-out, border-left .3s ease-in-out, border-top .3s ease-in-out, border-bottom .3s ease-in-out, box-shadow .3s ease-in-out;
}

.ba-form-submit-btn:hover {
    background-color: var(--submit-background-hover);
    border-bottom: calc(var(--submit-border-bottom)*var(--submit-border-width)) solid var(--submit-border-hover);
    border-left: calc(var(--submit-border-left)*var(--submit-border-width)) solid var(--submit-border-hover);
    border-right: calc(var(--submit-border-right)*var(--submit-border-width)) solid var(--submit-border-hover);
    border-top: calc(var(--submit-border-top)*var(--submit-border-width)) solid var(--submit-border-hover);
    box-shadow: 0 calc(var(--submit-shadow-value)*10px) calc(var(--submit-shadow-value)*20px) 0 var(--submit-shadow-hover);
    color: var(--submit-typography-hover);
}

.ba-form-submit-btn i {
    font-size: var(--submit-icon-size);
    color: var(--submit-icon-color);
    margin: 0 10px;
}

.ba-form-submit-btn:hover i {
    color: var(--submit-icon-hover);
}

.set-slider-range + input + .set-slider-range {
    text-align: right !important;
}

.upload-file-input {
    padding: 0 !important;
}

.upload-file-btn {
    background: var(--theme-color);
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding-left: 30px;
    padding-right: 30px;
    transition: background .3s ease-in-out, color .3s ease-in-out !important;
    width: auto !important;
}

.upload-file-btn:hover {
    background: #212121;
}

.ba-field-container select option {
    font-weight: var(--field-typography-font-weight);
}

.ba-field-container textarea {
    min-height: 150px;
}

.ba-form-field-item .ba-form-products-cart .ba-form-product-quantity-cell input:focus,
.ba-field-container select:focus,
.ba-field-container textarea:focus,
.ba-field-container input[type="text"]:focus,
.ba-field-container input[type="number"]:focus,
.ba-field-container input[type="email"]:focus {
    border-color: var(--theme-color) !important;
}

.popular-fonts + li:not(.popular-fonts) {
    border-top: 1px solid #34374a
}

.popular-fonts:not(:first-child):before {
    border: none !important;
    color: var(--cp-main-color);
    content: '\f336' !important;
    font-family: 'Material-Design-Iconic-Font';
    font-size: 24px;
    margin-left: -3px;
}

.ba-field-container textarea::-webkit-input-placeholder,
.ba-field-container input[type="text"]::-webkit-input-placeholder,
.ba-field-container input[type="number"]::-webkit-input-placeholder,
.ba-field-container input[type="email"]::-webkit-input-placeholder{
    color: var(--field-typography-color);
    opacity: .5;
}

.ba-form-field-item .ba-image-wrapper {
    text-align: var(--image-field-align);
}

.ba-form-field-item .ba-image-wrapper img {
    width: var(--image-field-width);
    max-width: 100%;
}

.upload-file-input:not(.drag-drop-upload-file) .upload-file-drag-drop-title,
.upload-file-input:not(.drag-drop-upload-file) i {
    display: none;
}

.upload-file-input.drag-drop-upload-file {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 300px;
    justify-content: center;
}

.upload-file-input.drag-drop-upload-file .upload-file-empty-text {
    display: none;
}

.ba-form-signature-field .ba-field-container i,
.upload-file-input.drag-drop-upload-file i {
    font-size: 90px;
    line-height: 90px;
    opacity: .1;
    position: static;
}

.upload-file-input.drag-drop-upload-file .upload-file-btn {
    margin-top: 40px;
}

.ba-field-container input[data-type="password"] {
    padding-right: calc(var(--field-padding-right) + 30px);
}

.ba-field-container input[data-type="password"] ~ .ba-input-password-icons i {
    bottom: 0;
    cursor: pointer;
    left: auto;
    padding-bottom: var(--field-padding-bottom);
    padding-left: var(--field-padding-left);
    padding-right: var(--field-padding-right);
    padding-top: var(--field-padding-top);
    pointer-events: all;
    right: 0;
    top: 0;
}

.ba-field-container input[type="text"][data-type="password"] ~ .ba-input-password-icons .zmdi-eye-off,
.ba-field-container input[type="password"][data-type="password"] ~ .ba-input-password-icons .zmdi-eye,
.ba-field-container textarea ~ .ba-input-password-icons,
.ba-field-container input:not([data-type="password"]) ~ .ba-input-password-icons {
    display: none;
}

/* ========================================================================
    Phone Countries
 ========================================================================== */
.ba-phone-countries-list-wrapper {
    background: var(--input-background);
    border-radius: 6px;
    box-shadow: 0 50px 40px rgba(0,0,0,.15);
    box-sizing: border-box;
    color: #cad3da;
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: normal;
    line-height: 18px;
    list-style: none;
    margin-top: calc(var(--field-typography-line-height) + var(--field-padding-bottom) + var(--field-padding-top));
    padding: 0;
    position: absolute;
    top: 10px;
    width: 350px;
    z-index: 100;
}

.ba-phone-countries-list-wrapper:after {
    left: 25px !important;
    border-bottom: 5px solid #34374a;
}

.ba-phone-countries-list-wrapper ul {
    box-shadow: inset 0 2px 0 -1px #404458;
    margin: 0;
    padding: 0;
    max-height: 230px;
    overflow: auto;
}

.ba-field-container .ba-phone-countries-list-wrapper input[type="text"]:focus,
.ba-field-container .ba-phone-countries-list-wrapper input[type="text"] {
    background: transparent !important;
    border-radius: 0;
    border: none !important;
    color: #cad3da!important;
    padding: 20px 25px !important;
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: normal !important;
    line-height: 18px;
}

.ba-field-container .ba-phone-countries-list-wrapper input[type="text"]::-webkit-input-placeholder {
    color: #cad3da!important;
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: normal;
    line-height: 18px; 
}

.ba-field-container .ba-phone-countries-list-wrapper input[type="text"]::-moz-placeholder {
    color: #cad3da!important;
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    line-height: 18px;
}

.top-countries-list .ba-phone-countries-list-wrapper {
    transform: translateY(-100%);
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: calc(var(--field-typography-line-height) + var(--field-padding-bottom) + var(--field-padding-top));
    margin-top: 0;
    top: -10px;
}

.top-countries-list .ba-phone-countries-list-wrapper:after {
    bottom: -14px;
    top: auto;
    border: 5px solid transparent;
    border-top: 5px solid #34374a;
}

.ba-field-container .top-countries-list .ba-phone-countries-list-wrapper ul.ba-phone-countries-list {
    box-shadow: inset 0 -2px 0 -1px #404458 !important;
}

.top-countries-list .ba-phone-countries-list-wrapper:before {
    top: auto;
    bottom: 20px;
}

ul.ba-phone-countries-list li {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 0 25px;
}

.ba-phone-country-title {
    margin-right: 10px;
    padding: 20px 0;
}

.ba-phone-flag {
    background-image: url(../../../../../components/com_baforms/assets/images/flags.png);
    background-repeat: no-repeat;
    background-size: 8740px 25px;
    display: inline-flex;
    height: 25px;
    margin-right: 10px;
    width: 33px;
}

.ba-phone-selected-country {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    height: calc(var(--field-typography-line-height) + var(--field-padding-top) + var(--field-padding-bottom) + var(--field-border-width)*2);
    padding-left: var(--field-padding-left);
    padding-right: 35px;
    position: absolute;
    top: 0;
}

.ba-phone-selected-country:before {
    content: "";
    border: 5px solid transparent;
    border-top: 5px solid var(--field-typography-color);
    margin-top: 3px;
    position: absolute;
    right: 10px;
    top: (var(--field-typography-line-height) + var(--field-padding-bottom) + var(--field-padding-top));
}

.ba-phone-countries-wrapper {
    position: relative;
}

.ba-form-phone-field .ba-field-container > input {
    padding-left: calc( var(--field-padding-left) + 75px + 3em ) !important;
}

.ba-phone-countries-list-wrapper:before {
    color: var(--cp-main-color);
    content: '\f1c3';
    font-family: 'Material-Design-Iconic-Font';
    font-size: 24px;
    position: absolute;
    right: 25px;
    top: 20px;
}

.ba-phone-countries-wrapper:not(.visible-countries-list) .ba-phone-countries-list-wrapper {
    display: none;
}

.ba-phone-prefix {
    color: var(--field-typography-color);
    font-family: var(--field-typography-font-family);
    font-size: var(--field-typography-font-size);
    font-style: var(--field-typography-font-style);
    font-weight: var(--field-typography-font-weight);
    line-height: var(--field-typography-line-height);
}

.ba-phone-flag-be {
    width:28px !important;
}

.ba-phone-flag-ch {
    width: 25px !important;
}

.ba-phone-flag-mc {
    width: 31px !important;
}

.ba-phone-flag-ne {
    width: 28px !important;
}

.ba-phone-flag-np {
    width: 20px !important;
}

.ba-phone-flag-va {
    width: 25px !important;
}

.ba-phone-flag-ac {
    background-position:0px 0px;
}

.ba-phone-flag-ad {
    background-position: -35px 0px;
    height: 22px !important;
}

.ba-phone-flag-ae {
    background-position: -69px 0px;
    height: 17px !important;
}

.ba-phone-flag-af{
    height: 22px !important;
    background-position:-103px 0px;
}

.ba-phone-flag-ag {
    background-position: -137px 0px;
    height: 22px !important;
}

.ba-phone-flag-ai {
    background-position: -171px 0px;
    height: 17px !important;
}

.ba-phone-flag-al{
    background-position:-206px 0px;
}

.ba-phone-flag-am {
    background-position: -240px 0px;
    height: 16px !important;
}

.ba-phone-flag-ao {
    background-position: -274px 0px;
    height: 23px !important;
}

.ba-phone-flag-aq {
    background-position:-308px 0px;
}

.ba-phone-flag-ar {
    background-position: -342px 0px;
    height: 21px !important;
}

.ba-phone-flag-as {
    background-position: -376px 0px;
    height: 17px !important;
}

.ba-phone-flag-at {
    background-position:-411px 0px;
}

.ba-phone-flag-au {
    background-position: -445px 0px;
    height: 17px !important;
}

.ba-phone-flag-aw {
    background-position: -479px 0px;
    height: 23px !important;
}

.ba-phone-flag-ax {
    background-position:-513px 0px;
}

.ba-phone-flag-az {
    background-position: -547px 0px;
    height: 17px !important;
}

.ba-phone-flag-ba {
    background-position: -581px 0px;
    height: 17px !important;
}

.ba-phone-flag-bb {
    background-position: -616px 0px;
    height: 23px !important;
}

.ba-phone-flag-bd {
    background-position: -650px 0px;
    height: 20px !important;
}

.ba-phone-flag-be {
    background-position:-684px 0px;
}

.ba-phone-flag-bf {
    background-position:-713px 0px;
}

.ba-phone-flag-bg {
    background-position: -748px 0px;
    height: 20px !important;
}

.ba-phone-flag-bh {
    background-position: -782px 0px;
    height: 20px !important;
}

.ba-phone-flag-bi {
    background-position: -816px 0px;
    height: 20px !important;
}

.ba-phone-flag-bj {
    background-position:-850px 0px

}

.ba-phone-flag-bl {
    background-position:-884px 0px;
} 

.ba-phone-flag-bm {
    background-position: -918px 0px;
    height: 17px !important;
}

.ba-phone-flag-bn {
    background-position: -953px 0px;
    height: 17px !important;
}

.ba-phone-flag-bo {
    background-position:-987px 0px;
} 

.ba-phone-flag-bq {
    background-position:-1021px 0px;
} 

.ba-phone-flag-br {
    background-position:-1055px 0px;
} 

.ba-phone-flag-bs {
    background-position: -1089px 0px;
    height: 17px !important;
}

.ba-phone-flag-bt {
    background-position:-1124px 0px;
} 

.ba-phone-flag-bv {
    background-position:-1158px 0px;
} 

.ba-phone-flag-bw {
    background-position: -1192px 0px;
    height: 23px !important;
}

.ba-phone-flag-by {
    background-position: -1226px 0px;
    height: 17px !important;
}

.ba-phone-flag-bz {
    background-position:-1260px 0px;
} 

.ba-phone-flag-ca {
    background-position: -1294px 0px;
    height: 17px !important;
}

.ba-phone-flag-cc {
    background-position: -1329px 0px;
    height: 17px !important;
}

.ba-phone-flag-cd {
    background-position:-1363px 0px;
} 

.ba-phone-flag-cf {
    background-position:-1397px 0px;
} 

.ba-phone-flag-cg {
    background-position:-1431px 0px;
} 

.ba-phone-flag-ch {
    background-position:-1465px 0px;
} 

.ba-phone-flag-ci {
    background-position:-1491px 0px;
} 

.ba-phone-flag-ck {
    background-position: -1525px 0px;
    height: 17px !important;
}

.ba-phone-flag-cl {
    background-position:-1559px 0px;
} 

.ba-phone-flag-cm {
    background-position:-1594px 0px;
} 

.ba-phone-flag-cn {
    background-position:-1628px 0px;
} 

.ba-phone-flag-co {
    background-position:-1662px 0px;
} 

.ba-phone-flag-cp {
    background-position:-1696px 0px;
} 

.ba-phone-flag-cr {
    background-position: -1730px 0px;
    height: 21px !important;
}

.ba-phone-flag-cu {
    background-position: -1764px 0px;
    height: 17px !important;
}

.ba-phone-flag-cv {
    background-position: -1799px 0px;
    height: 20px !important;
}

.ba-phone-flag-cw {
    background-position:-1833px 0px;
}

.ba-phone-flag-cx {
    background-position: -1867px 0px;
    height: 17px !important;
}

.ba-phone-flag-cy {
    background-position:-1901px 0px;
}

.ba-phone-flag-cz {
    background-position:-1935px 0px;
}

.ba-phone-flag-de {
    background-position:-1969px 0px;
}

.ba-phone-flag-dg {
    background-position:-2004px 0px;
}

.ba-phone-flag-dj {
    background-position:-2038px 0px;
}

.ba-phone-flag-dk {
    background-position:-2072px 0px;
}

.ba-phone-flag-dm {
    background-position: -2106px 0px;
    height: 17px !important;
}

.ba-phone-flag-do {
    background-position: -2140px 0px;
    height: 21px !important;
}

.ba-phone-flag-dz {
    background-position:-2174px 0px;
    height: 22px !important;
}

.ba-phone-flag-ea {
    background-position:-2209px 0px;
}

.ba-phone-flag-ec {
    background-position:-2243px 0px;
}

.ba-phone-flag-ee {
    background-position: -2277px 0px;
    height: 21px !important;
}

.ba-phone-flag-eg {
    background-position:-2311px 0px;
}

.ba-phone-flag-eh {
    background-position: -2345px 0px;
    height: 17px !important;
}

.ba-phone-flag-er {
    background-position: -2379px 0px;
    height: 17px !important;
}

.ba-phone-flag-es {
    background-position:-2414px 0px;
}

.ba-phone-flag-et {
    background-position: -2448px 0px;
    height: 17px !important;
}

.ba-phone-flag-eu {
    background-position:-2482px 0px;
}

.ba-phone-flag-fi {
    background-position: -2516px 0px;
    height: 20px !important;
}

.ba-phone-flag-fj {
    background-position: -2550px 0px;
    height: 17px !important;
}

.ba-phone-flag-fk {
    background-position: -2584px 0px;
    height: 17px !important;
}

.ba-phone-flag-fm {
    background-position: -2619px 0px;
    height: 17px !important;
}

.ba-phone-flag-fo {
    background-position:-2653px 0px;
}

.ba-phone-flag-fr {
    background-position:-2687px 0px;
}

.ba-phone-flag-ga {
    background-position:-2721px 0px;
}

.ba-phone-flag-gb {
    background-position: -2755px 0px;
    height: 17px !important;
}

.ba-phone-flag-gd {
    background-position: -2789px 0px;
    height: 20px !important;
}

.ba-phone-flag-ge {
    background-position:-2824px 0px;
}

.ba-phone-flag-gf {
    background-position:-2858px 0px;
}

.ba-phone-flag-gg {
    background-position:-2892px 0px;
}

.ba-phone-flag-gh {
    background-position:-2926px 0px;
}

.ba-phone-flag-gi {
    background-position: -2960px 0px;
    height: 17px !important;
}

.ba-phone-flag-gl {
    background-position:-2994px 0px;
}

.ba-phone-flag-gm {
    background-position:-3029px 0px;
}

.ba-phone-flag-gn {
    background-position:-3063px 0px;
}

.ba-phone-flag-gp {
    background-position:-3097px 0px;
}

.ba-phone-flag-gq {
    background-position:-3131px 0px;
}

.ba-phone-flag-gr {
    background-position:-3165px 0px;
}

.ba-phone-flag-gs {
    background-position:-3200px 0px;
}

.ba-phone-flag-gt {
    background-position:-3234px 0px;
}

.ba-phone-flag-gu {
    background-position: -3267px 0px;
    height: 18px !important;
    width: 34px;
}

.ba-phone-flag-gw {
    background-position: -3302px 0px;
    height: 17px !important;
}

.ba-phone-flag-gy {
    background-position:-3336px 0px;
}

.ba-phone-flag-hk {
    background-position:-3370px 0px;
}

.ba-phone-flag-hm {
    background-position:-3405px 0px;
}

.ba-phone-flag-hn {
    background-position: -3551px 0px;
    height: 17px !important;
}

.ba-phone-flag-hr {
    background-position: -3473px 0px;
    height: 17px !important;
}

.ba-phone-flag-ht {
    background-position:-3507px 0px;
}

.ba-phone-flag-hu {
    background-position: -3541px 0px;
    height: 17px !important;
}

.ba-phone-flag-ic {
    background-position:-3575px 0px;
}

.ba-phone-flag-id {
    background-position:-3610px 0px;
}

.ba-phone-flag-ie {
    background-position: -3644px 0px;
    height: 17px !important;
}

.ba-phone-flag-il {
    background-position:-3678px 0px;
}

.ba-phone-flag-im {
    background-position: -3712px 0px;
    height: 17px !important;
}

.ba-phone-flag-in {
    background-position:-3746px 0px;
}

.ba-phone-flag-io {
    background-position: -3780px 0px;
    height: 17px !important;
}

.ba-phone-flag-iq {
    background-position:-3815px 0px;
}

.ba-phone-flag-ir {
    background-position: -3849px 0px;
    height: 19px !important;
}

.ba-phone-flag-is {
    background-position:-3883px 0px;
}

.ba-phone-flag-it {
    background-position:-3917px 0px;
}

.ba-phone-flag-je {
    background-position: -3951px 0px;
    height: 20px !important;
}

.ba-phone-flag-jm {
    background-position: -3985px 0px;
    height: 17px !important;
}

.ba-phone-flag-jo {
    background-position: -4020px 0px;
    height: 17px !important;
}

.ba-phone-flag-jp {
    background-position:-4054px 0px;
}

.ba-phone-flag-ke {
    background-position:-4088px 0px;
}

.ba-phone-flag-kg {
    background-position: -4122px 0px;
    height: 20px !important;
}

.ba-phone-flag-kh {
    background-position: -4156px 0px;
    height: 22px !important;
}

.ba-phone-flag-ki {
    background-position: -4190px 0px;
    height: 17px !important;
}

.ba-phone-flag-km {
    background-position: -4225px 0px;
    height: 20px !important;
}

.ba-phone-flag-kn {
    background-position:-4259px 0px;
}

.ba-phone-flag-kp {
    background-position: -4293px 0px;
    height: 17px!important;
}

.ba-phone-flag-kr {
    background-position:-4327px 0px;
}

.ba-phone-flag-kw {
    background-position: -4361px 0px;
    height: 17px !important;
}

.ba-phone-flag-ky {
    background-position: -4395px 0px;
    height: 17px !important;
}

.ba-phone-flag-kz {
    background-position: -4430px 0px;
    height: 17px !important;
}

.ba-phone-flag-la {
    background-position:-4464px 0px;
}

.ba-phone-flag-lb {
    background-position:-4498px 0px;
}

.ba-phone-flag-lc {
    background-position: -4532px 0px;
    height: 17px !important;
}

.ba-phone-flag-li {
    background-position:-4566px 0px;
}

.ba-phone-flag-lk {
    background-position: -4600px 0px;
    height: 17px !important;
}

.ba-phone-flag-lr {
    background-position: -4635px 0px;
    height: 19px !important;
}

.ba-phone-flag-ls {
    background-position:-4669px 0px;
}

.ba-phone-flag-lt {
    background-position:-4703px 0px;
}

.ba-phone-flag-lu {
    background-position:-4737px 0px;
}

.ba-phone-flag-lv {
    background-position: -4771px 0px;
    height: 17px !important;
}

.ba-phone-flag-ly {
    background-position: -4805px 0px;
    height: 18px !important;
}

.ba-phone-flag-ma {
    background-position:-4840px 0px;
}

.ba-phone-flag-mc {
    background-position:-4874px 0px;
}

.ba-phone-flag-md {
    background-position: -4906px 0px;
    height: 17px !important;
}

.ba-phone-flag-me {
    background-position: -4940px 0px;
    height: 17px !important;
}

.ba-phone-flag-mf {
    background-position:-4974px 0px;
}

.ba-phone-flag-mg {
    background-position:-5008px 0px;
}

.ba-phone-flag-mh {
    background-position: -5043px 0px;
    height: 17px !important;
}

.ba-phone-flag-mk {
    background-position: -5077px 0px;
    height: 17px !important;
}

.ba-phone-flag-ml {
    background-position:-5111px 0px;
}

.ba-phone-flag-mm {
    background-position:-5145px 0px;
}

.ba-phone-flag-mn {
    background-position: -5179px 0px;
    height: 17px !important;
}

.ba-phone-flag-mo {
    background-position:-5213px 0px;
}

.ba-phone-flag-mp {
    background-position: -5248px 0px;
    height: 17px !important;
}

.ba-phone-flag-mq {
    background-position:-5282px 0px;
}

.ba-phone-flag-mr {
    background-position:-5316px 0px;
}

.ba-phone-flag-ms {
    background-position: -5350px 0px;
    height: 17px !important;
}

.ba-phone-flag-mt {
    background-position:-5384px 0px;
}

.ba-phone-flag-mu {
    background-position:-5418px 0px;
}

.ba-phone-flag-mv {
    background-position:-5453px 0px;
}

.ba-phone-flag-mw {
    background-position:-5487px 0px;
}

.ba-phone-flag-mx {
    background-position: -5521px 0px;
    height: 19px !important;
}

.ba-phone-flag-my {
    background-position: -5555px 0px;
    height: 17px !important;
}

.ba-phone-flag-mz {
    background-position:-5589px 0px;
}

.ba-phone-flag-na {
    background-position:-5623px 0px;
}

.ba-phone-flag-nc {
    background-position: -5658px 0px;
    height: 18px !important;
}

.ba-phone-flag-ne {
    background-position:-5692px 0px;
}

.ba-phone-flag-nf {
    background-position: -5722px 0px;
    height: 17px !important;
}

.ba-phone-flag-ng {
    background-position: -5756px 0px;
    height: 16px !important;
}

.ba-phone-flag-ni {
    background-position:-5790px 0px;
}

.ba-phone-flag-nl {
    background-position:-5824px 0px;
}

.ba-phone-flag-no {
    background-position:-5858px 0px;
}

.ba-phone-flag-np {
    background-position:-5893px 0px;
}

.ba-phone-flag-nr {
    background-position: -5914px 0px;
    height: 17px !important;
}

.ba-phone-flag-nu {
    background-position: -5948px 0px;
    height: 17px !important;
}

.ba-phone-flag-nz {
    background-position: -5982px 0px;
    height: 17px !important;
}

.ba-phone-flag-om {
    background-position: -6016px 0px;
    height: 18px !important;
}

.ba-phone-flag-pa {
    background-position:-6051px 0px;
}

.ba-phone-flag-pe {
    background-position:-6085px 0px;
}

.ba-phone-flag-pf {
    background-position:-6119px 0px;
}

.ba-phone-flag-pg {
    background-position: -6152px 0px;
}

.ba-phone-flag-ph {
    background-position: -6187px 0px;
    height: 17px !important;
}

.ba-phone-flag-pk {
    background-position:-6221px 0px;
}

.ba-phone-flag-pl {
    background-position:-6256px 0px;
}

.ba-phone-flag-pm {
    background-position:-6290px 0px;
}

.ba-phone-flag-pn {
    background-position:-6324px 0px;
}

.ba-phone-flag-pr {
    background-position:-6358px 0px;
}

.ba-phone-flag-ps {
    background-position: -6392px 0px;
    height: 17px !important;
}

.ba-phone-flag-pt {
    background-position:-6426px 0px;
}

.ba-phone-flag-pw {
    background-position:-6461px 0px;
}

.ba-phone-flag-py {
    background-position: -6494px 0px;
    height: 18px !important;
}

.ba-phone-flag-qa {
    background-position: -6529px 0px;
    height: 13px !important;
}

.ba-phone-flag-re {
    background-position:-6563px 0px;
}

.ba-phone-flag-ro {
    background-position:-6597px 0px;
}

.ba-phone-flag-rs {
    background-position:-6631px 0px;
}

.ba-phone-flag-ru {
    background-position:-6666px 0px;
}

.ba-phone-flag-rw {
    background-position:-6700px 0px;
}

.ba-phone-flag-sa {
    background-position:-6734px 0px;
}

.ba-phone-flag-sb {
    background-position: -6768px 0px;
    height: 17px !important;
}

.ba-phone-flag-sc {
    background-position: -6802px 0px;
    height: 17px !important;
}

.ba-phone-flag-sd {
    background-position: -6836px 0px;
    height: 17px !important;
}

.ba-phone-flag-se {
    background-position:-6870px 0px;
}

.ba-phone-flag-sg {
    background-position:-6905px 0px;
}

.ba-phone-flag-sh {
    background-position: -6939px 0px;
    height: 17px !important;
}

.ba-phone-flag-si {
    background-position: -6973px 0px;
    height: 17px !important;
}

.ba-phone-flag-sj {
    background-position:-7007px 0px;
}

.ba-phone-flag-sk {
    background-position:-7042px 0px;
}

.ba-phone-flag-sl {
    background-position:-7076px 0px;
}

.ba-phone-flag-sm {
    background-position:-7110px 0px;
}

.ba-phone-flag-sn {
    background-position:-7144px 0px;
}

.ba-phone-flag-so {
    background-position:-7178px 0px;
}

.ba-phone-flag-sr {
    background-position:-7212px 0px;
}

.ba-phone-flag-ss {
    background-position: -7247px 0px;
    height: 17px !important;
}

.ba-phone-flag-st {
    background-position: -7281px 0px;
    height: 17px !important;
}

.ba-phone-flag-sv {
    background-position: -7315px 0px;
    height: 19px !important;
}

.ba-phone-flag-sx {
    background-position:-7349px 0px;
}

.ba-phone-flag-sy {
    background-position:-7383px 0px;
}

.ba-phone-flag-sz {
    background-position:-7417px 0px;
}

.ba-phone-flag-ta {
    background-position:-7452px 0px;
}

.ba-phone-flag-tc {
    background-position: -7486px 0px;
    height: 17px !important;
}

.ba-phone-flag-td {
    background-position:-7520px 0px;
}

.ba-phone-flag-tf {
    background-position:-7554px 0px;
}

.ba-phone-flag-tg {
    background-position:-7588px 0px;
}

.ba-phone-flag-th {
    background-position:-7622px 0px;
}

.ba-phone-flag-tj {
    background-position: -7657px 0px;
    height: 17px !important;
}

.ba-phone-flag-tk {
    background-position: -7691px 0px;
    height: 17px !important;
}

.ba-phone-flag-tl {
    background-position: -7725px 0px;
    height: 17px !important;
}

.ba-phone-flag-tm {
    background-position:-7759px 0px;
}

.ba-phone-flag-tn {
    background-position:-7793px 0px;
}

.ba-phone-flag-to {
    background-position: -7827px 0px;
    height: 17px !important;
}

.ba-phone-flag-tr {
    background-position:-7862px 0px;
}

.ba-phone-flag-tt {
    background-position:-7896px 0px;
}

.ba-phone-flag-tv {
    background-position: -7930px 0px;
    height: 17px !important;
}

.ba-phone-flag-tw {
    background-position:-7964px 0px;
}

.ba-phone-flag-tz {
    background-position:-7998px 0px;
}

.ba-phone-flag-ua {
    background-position:-8032px 0px;
}

.ba-phone-flag-ug {
    background-position:-8067px 0px;
}

.ba-phone-flag-um {
    background-position:-8101px 0px;
}

.ba-phone-flag-us {
    background-position: -8135px 0px;
    height: 17px !important;
}

.ba-phone-flag-uy {
    background-position:-8169px 0px;
}

.ba-phone-flag-uz {
    background-position: -8203px 0px;
    height: 17px !important;
}

.ba-phone-flag-va {
    background-position:-8237px 0px;
}

.ba-phone-flag-vc {
    background-position:-8263px 0px;
}

.ba-phone-flag-ve {
    background-position:-8297px 0px;
}

.ba-phone-flag-vg {
    background-position: -8332px 0px;
    height: 17px !important;
}

.ba-phone-flag-vi {
    background-position:-8366px 0px;
}

.ba-phone-flag-vn {
    background-position:-8400px 0px;
}

.ba-phone-flag-vu {
    background-position:-8434px 0px;
}

.ba-phone-flag-wf {
    background-position:-8468px 0px;
}

.ba-phone-flag-ws {
    background-position: -8502px 0px;
    height: 17px !important;
}

.ba-phone-flag-xk {
    background-position:-8537px 0px;
}

.ba-phone-flag-ye {
    background-position:-8571px 0px;
}

.ba-phone-flag-yt {
    background-position:-8605px 0px;
}

.ba-phone-flag-za {
    background-position:-8639px 0px;
}

.ba-phone-flag-zm {
    background-position:-8673px 0px;
}

.ba-phone-flag-zw {
    background-position: -8707px 0px;
    height: 17px !important;
}

/* ========================================================================
    Map
 ========================================================================== */

.ba-map-wrapper {
    height: var(--map-field-height);
}

.ba-address-map-wrapper {
    height: 300px;
    width: 100%;
}

.pac-container {
    z-index: 1050;
}

.ba-settings-item.ba-settings-button-type >span {
    max-width: calc(100% - 280px);
    word-break: break-word;
}

#condition-logic-modal .ba-settings-button-type a,
.integration-options .ba-settings-button-type a.default-action {
    background: var(--main-color);
    border-radius: 3px;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font: 500 14px/normal 'Roboto', sans-serif;
    padding: 15px;
    text-align: center;
    transition: all .3s ease-in-out;
    width: 265px;
}

#condition-logic-modal .ba-settings-button-type a {
    margin: 0 25px;
    width: 100%;
}

#condition-logic-modal .ba-settings-button-type a:hover,
.integration-options .ba-settings-button-type a.default-action:hover {
    background: #3c3f52 !important;
}

/* ========================================================================
    Calendar
 ========================================================================== */

.week-days-wrapper,
.ba-calendar-wrapper {
    padding: 25px;
}

.week-days-wrapper > div {
    cursor: pointer;
}

.ba-calendar-footer .ba-forms-today-btn,
.ba-calendar-title-wrapper {
    color: #fff;
    display: flex;
    font: 500 18px/18px "Roboto", sans-serif;
    margin-bottom: 25px;
}

.ba-calendar-footer .ba-forms-today-btn,
.ba-calendar-title-wrapper i {
    background: #343749;
    border-radius: 3px;
    box-sizing: content-box;
    color: var(--cp-main-color);
    display: block;
    padding: 10px;
    text-align: center;
    transition: .3s;
    width: 24px;
}

.ba-calendar-footer .ba-forms-today-btn {
    box-sizing: border-box;
    cursor: pointer;
    margin-bottom: 0;
    margin-top: 5px;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
}

.ba-calendar-footer .ba-forms-today-btn:hover,
.ba-calendar-title-wrapper i:hover {
    background: var(--main-color);
    color: #fff;
}

span.ba-calendar-title {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: center;
}

.ba-calendar-header {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
}

.ba-calendar-header > div {
    color: var(--cp-main-color);
    font: 500 14px/18px "Roboto", sans-serif;
    text-align: center;
    width: 32px;
}

#disable-week-days-dialog .week-days-wrapper > div {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 45px;
    padding-left: 40px;
    position: relative;
    transition: .3s;
    width: 100%;
}

#disable-week-days-dialog .week-days-wrapper > div.disable-week-day {
    cursor: not-allowed;
    color: var(--cp-main-color) !important;
}

#disable-week-days-dialog .week-days-wrapper > div:before {
    background: #3e495a;
    border-width: 4px;
    border-color: #3e495a;
    height: 25px;
    transition: .3s;
    width: 25px;
}

#disable-week-days-dialog .week-days-wrapper > div:hover {
    color: #fff;
}

#disable-week-days-dialog .week-days-wrapper > div:not(.disable-week-day):hover:before {
    background: var(--main-color);
}

.ba-calendar-header > div {
    text-transform: uppercase;
    font-weight: 700;
}

.ba-calendar-row {
    display: flex;
    justify-content: space-between;
}

.ba-calendar-row > div {
    align-items: center;
    background: transparent;
    border-radius: 3px;
    box-sizing: border-box;
    color: #cad3da;
    cursor: pointer;
    display: inline-flex;
    font: 700 14px/12px "Roboto", sans-serif;
    height: 44px;
    justify-content: center;
    padding: 10px !important;
    text-transform: uppercase;
    transition: .3s;
    width: 44px;
}

.ba-calendar-row > div.ba-empty-date-cell {
    cursor: default;
}

.ba-calendar-row > div.ba-curent-date {
    background: var(--main-color);
    color: #fff;
}

.selected-date-tag {
    align-items: center;
    background: var(--main-color);
    border-radius: 50px;
    display: inline-flex;
    margin: 0 5px 5px 0;
    padding: 0 8px 0 15px;
    max-width: 265px;
}

.selected-date-tag:first-child {
    margin-top: 5px;
}

.selected-date-tag > span {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-date-tag i {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-sizing: content-box;
    color: #fff;
    font-size: 16px;
    line-height: 14px;
    margin: 5px 0 5px 10px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    transition: .3s;
    min-width: 14px;
}

.selected-date-tag i:hover {
    opacity: .5;
}

.selected-dates-tags {
    width: 265px;
    min-width: 265px;
}

.selected-dates-wrapper > div {
    position: relative;
    margin-bottom: 5px;
}

.ba-calendar-wrapper .disabled-date {
    background: transparent;
    color: #566e78;
    cursor: not-allowed !important;
}

.calendar-field-wrapper {
    position: relative;
    flex-grow: 1;
}

.ba-field-container:not(.calendar-range-type) .calendar-range-delimiter + .calendar-field-wrapper,
.ba-field-container:not(.calendar-range-type) .calendar-range-delimiter {
    display: none;
}

.ba-field-container .calendar-range-delimiter {
    color: var(--field-typography-color);
    font-size: var(--field-typography-font-size);
    margin: 0 10px;
}

.ba-field-container .calendar-range-delimiter i {
    position: static;
}

.ba-field-container.calendar-range-type {
    align-items: center;
    display: flex;
}

/*
/* Responsive Grid
*/

.row-fluid {
    width: 100%;
}

[class*="span"]{
    flex-grow: 1;
    box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.127659574468085%;
}

[class*="span"]:first-child {
    margin-left: 0;
}

.span12 {
    width: 100%;
}

.span11 {
    width: 91.48936170212765%;
}

.span10 {
    width: 82.97872340425532%;
}

.span9 {
    width: 74.46808510638297%;
}

.span8 {
    width: 65.95744680851064%;
}

.span7 {
    width: 57.44680851063829%;
}

.span6 {
    width: 48.93617021276595%;
}

.span5 {
    width: 40.42553191489362%;
}

.span4 {
    width: 31.914893617021278%;
}

.span3 {
    width: 23.404255319148934%;
}

.span2 {
    width: 14.893617021276595%;
}

.span1 {
    width: 6.382978723404255%;
}

.com_baforms[data-joomla-version="4"] .content .col-md-12 {
    padding: 0 !important;
}

.com_baforms[data-joomla-version="4"] .subhead,
.com_baforms[data-joomla-version="4"] .subhead-collapse.collapse {
    height: auto !important;
    min-height: auto;
    padding: 0;
}

.com_baforms[data-joomla-version="4"] #wrapper.d-flex:not(.closed) .subhead{
    max-width: calc(100vw - 18rem);
}

.com_baforms[data-joomla-version="4"] #toolbar-language {
    order: 10;
    margin-left: .75rem !important;
}

.com_baforms[data-joomla-version="4"] #toolbar-about {
    order: 9;
    margin-left: auto;
}

body[data-joomla-version="4"] .icon-bookmark:not([data-notification="0"]) {
    border-radius: 50%;
    box-sizing: content-box;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    padding: 2px;
    width: 16px;
}

.com_baforms[data-joomla-version="4"] #toolbar-language .btn span,
.com_baforms[data-joomla-version="4"] #toolbar-about .btn span {
    margin-inline-end: .5rem;
}

.com_baforms[data-joomla-version="4"] #wrapper.d-flex {
    align-items: normal;
    flex-grow: 1;
}

.com_baforms[data-joomla-version="4"] .subhead + .content {
    padding: 0;
}

.com_baforms[data-joomla-version="4"] #wrapper.d-flex:not(.closed) .ba-main-view {
    min-height: calc(100vh - 73px);
    max-width: calc(100vw - 18rem - 60px);
}

.com_baforms[data-joomla-version="4"] .modal.ba-modal-sm.in,
.com_baforms[data-joomla-version="4"] .com_baforms .modal.ba-modal-sm.in {
    display: block;
}

.com_baforms[data-joomla-version="4"] .table thead td,
.com_baforms[data-joomla-version="4"] .table thead th {
    color: #333;
}

.com_baforms[data-joomla-version="4"] .ba-context-menu.options-context-menu {
    top: 426px;
    left: 60px !important;
}

.com_baforms[data-joomla-version="4"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.com_baforms[data-joomla-version="4"] #content {
    background: #f5f5f5;
}

.com_baforms[data-joomla-version="4"] .table tbody a:not(.badge) {
    text-decoration: none;
}

.com_baforms[data-joomla-version="4"] label {
    display: block;
    width: auto;
}

.com_baforms[data-joomla-version="4"] .modal-body .accordion-body.collapse:not(.in){
    height: 0;
}

.view-form.com_baforms[data-joomla-version="4"] #subhead,
.com_baforms[data-joomla-version="4"] a[target=_blank]:before {
    display: none;
}

.com_baforms[data-joomla-version="4"] #add-columns-dialog .modal-body {
    padding: 0;
}

.com_baforms[data-joomla-version="4"] .modal-footer > * {
    margin: 0;
}

.com_baforms[data-joomla-version="4"] .modal.ba-modal-picker {
    overflow: visible;
}

.com_baforms[data-joomla-version="4"] .preloader .preloader-left-section:before,
.com_baforms[data-joomla-version="4"] .preloader {
    top: 0;
}

.com_baforms[data-joomla-version="4"] .ba-forms-workspace {
    top: 81px;
}

.com_baforms[data-joomla-version="4"] .ba-forms-workspace,
.com_baforms[data-joomla-version="4"] .ba-form-fields-list {
    height: calc(100vh - 152px);
}

.com_baforms[data-joomla-version="4"] .ba-modal-lg.modal.left-filter-modal .modal-header,
.com_baforms[data-joomla-version="4"] .ba-media-header .ba-dialog-title {
    display: block;
}

.com_baforms[data-joomla-version="4"] .icons-tabs .code-nav,
.com_baforms[data-joomla-version="4"] .ba-modal-cp .code-nav {
    margin: 0;
}

.com_baforms[data-joomla-version="4"] .ba-modal-cp div > .nav-tabs a:before,
.com_baforms[data-joomla-version="4"] .ba-modal-lg div > .nav-tabs a:before {
    bottom: 0px;
}

.com_baforms[data-joomla-version="4"] .ba-sidebar {
    min-height: calc(100vh - 23px);
}

.com_baforms[data-joomla-version="4"].view-form .ba-sidebar {
    min-height: calc(100vh - 152px);
}

.com_baforms[data-joomla-version="4"] .content {
    border-radius: 0;
}

.com_baforms[data-joomla-version="4"] a:hover {
    text-decoration: none;
}

body.com_baforms[data-joomla-version="4"]  {
    line-height: 18px;
}

body.com_baforms[data-joomla-version="4"].layout-default header.header {
    display: block;
}

body.com_baforms[data-joomla-version="4"] .modal-body .accordion-body {
    padding: 0;
}

body.com_baforms[data-joomla-version="4"] .row {
    margin: 0 !important;
}

body.com_baforms[data-joomla-version="4"] .icon-bookmark:not([data-notification="0"]):before {
    vertical-align: text-bottom;
}

body.com_baforms[data-joomla-version="4"] .main-table .zmdi.zmdi-check, 
body.com_baforms[data-joomla-version="4"] .main-table > .table td, 
body.com_baforms[data-joomla-version="4"] .main-table > .table a {
    box-shadow: none;
}

body.com_baforms[data-joomla-version="4"] .main-table thead th, 
body.com_baforms[data-joomla-version="4"] .main-table .table-striped tbody > tr:not(:last-child) > td {
    border-bottom-color: #f3f3f3;
}

body.com_baforms[data-joomla-version="4"].layout-create .modal.ba-modal-sm .ba-footer-content {
    margin-top: 18px;
}