@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-regular.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-900.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-900.woff2') format('woff2');
    font-weight: 900;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-700.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-700.woff2') format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-800.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-800.woff2') format('woff2');
    font-weight: 800;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-200.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-200.woff2') format('woff2');
    font-weight: 200;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-300.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-300.woff2') format('woff2');
    font-weight: 300;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-500.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-500.woff2') format('woff2');
    font-weight: 500;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-100.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-100.woff2') format('woff2');
    font-weight: 100;
}
@font-face {
    font-family: 'Poppins';
    src: url('../../../fonts/Poppins/poppins-v20-latin-600.woff') format('woff'),
         url('../../../fonts/Poppins/poppins-v20-latin-600.woff2') format('woff2');
    font-weight: 600;
}

/********************************************************/
/***************** COLORS AND ATTRIBUTES ****************/
/********************************************************/

.af2_wrapper a {
    color: var(--af2-primary-color);
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

.af2_wrapper {
    --af2-background-color: #F0F0F1;

    --af2-primary-color: #6A30F5;
    --af2-primary-color-background: #F4F0FC;
    --af2-support-color-blue: #5EBCE6;
    --af2-support-color-blue-background: #EFFAFF;
    --af2-support-color-orange: #FFA412;
    --af2-support-color-orange-background: #FFFAF1;
    --af2-support-color-green: #3CD856;
    --af2-support-color-green-background: #F1FFF9;
    --af2-support-color-pink: #FF74C4;
    --af2-support-color-pink-background: #FFF1FE;
    --af2-support-color-red: #D9274C;
    --af2-support-color-red-background: #FFDED9;

    --af2-primary-text-color: #151D48;
    --af2-secondary-text-color: #737791;
    --af2-tertiary-text-color: #A1A5B6;

    --af2-primary-light-color: #f6f4ff;

    --af2-secondary-color: #ffffff;

    --af2-invisible: rgba(0,0,0,0);

    --af2-shadow-background-color: #D0D2DA;

    --af2-primary-highlight-color: #EFE8FF;
    --af2-secondary-highlight-color: #A686F2;

    --af2-grey-color: #E8E8ED;
    --af2-white-color: #FCFDFF;

    --af2-fix-white-color: #fff;


    --af2-border-radius-big: 8px;
    --af2-border-radius-small: 4px;
    --af2-border-size: 2px;

    --af2-font-size-big: 24px;
    --af2-font-size-medium: 16px;
    --af2-font-size-small: 14px;

    --af2-font-weight-bold: 700;
    --af2-font-weight-medium: 600;
    --af2-font-weight-thin: 400;

    --af2-font-line-height-big: 32px;
    --af2-font-line-height-medium: 24px;
    --af2-font-line-height-small: 20px;

    --af2-font-line-height-button: 18px;

    --af2-control-field-size: 40px;


    --af2-fontawesome-icon-size-big: 25px;
    --af2-fontawesome-icon-size: 20px;
    --af2-fontawesome-icon-size-small: 20px;

    --af2-transition-property: 300ms ease-out;

    --af2-builder-header-height: 100px;

    --af2-gap-value: 30px;

    --box-shadow-value: 0px 0px 9px 0px;

    --af2-sidebar-width: 320px;

    --af2-extra-color: #3c434a;

    --af2-input-background-color: rgba(255,255,255,.95);

    --af2-select-padding: 0px 25px 0 10px;
}


.af2_wrapper.af2_darkmode{
    --af2-background-color: #1C1C1D;
    
    --af2-primary-color: #6A30F5;
    --af2-primary-color-background: #F4F0FC;
    --af2-support-color-blue: #5EBCE6;
    --af2-support-color-blue-background: #EFFAFF;
    --af2-support-color-orange: #FFA412;
    --af2-support-color-orange-background: #FFFAF1;
    --af2-support-color-green: #3CD856;
    --af2-support-color-green-background: #F1FFF9;
    --af2-support-color-pink: #FF74C4;
    --af2-support-color-pink-background: #FFF1FE;

    --af2-primary-text-color: #fff;
    --af2-secondary-text-color: #b0b8bc;

    --af2-primary-light-color: rgba(98, 100, 109, 0.2);

    --af2-secondary-color: rgba(98, 100, 109, 0.2);

    --af2-invisible: rgba(0,0,0,0);

    --af2-shadow-background-color: rgba(98, 100, 109, 0.2);

    --af2-primary-highlight-color: rgba(98, 100, 109, 0.2);
    --af2-secondary-highlight-color: #A686F2;

    --af2-grey-color: #E8E8ED;
    --af2-white-color: rgba(98, 100, 109, 0.2);

    --af2-extra-color: rgba(255, 255, 255, 0.904);
}

.af2_background_color_dark {
    background-color: #1C1C1D;
}

#wpbody.af2_background_color_dark {
    min-height: calc(100VH - 32px);
}

.af2_wrapper {
    background-color: var(--af2-background-color);
    overflow: hidden;
}

.af2_wrapper input[type="text"]:not(.af2_form input[type="text"]), .af2_wrapper input[type="number"]:not(.af2_form input[type="number"]), .af2_wrapper input[type="password"]:not(.af2_form input[type="password"]), .af2_wrapper select:not(.af2_form select), .af2_wrapper textarea:not(.af2_form textarea) {
    border-radius: var(--af2-border-radius-small);
    margin: 0;
    border: var(--af2-border-size) solid var(--af2-secondary-color);
    box-shadow: none !important;
    transition: all var(--af2-transition-property);
    padding: 8px;
}
.af2_wrapper input[type="text"]:not(.af2_form input[type="text"]), .af2_wrapper select, .af2_wrapper input[type="number"]:not(.af2_form input[type="number"]), .af2_wrapper input[type="password"] {
    height: var(--af2-control-field-size);
}

.af2_wrapper input:focus, .af2_wrapper textarea:focus, .af2_wrapper select:focus {
    border-color: var(--af2-primary-color);
    outline: none !important;
}

.af2_wrapper select {
    line-height: unset !important;
}

.af2_wrapper select:hover {
    color: unset !important;
}


.af2_darkmode .af2_wrapper select:hover {
    color: #2c3338;
}

/********************************************************/
/******************* DARK MODE SPECIALS *****************/
/********************************************************/

.af2_wrapper.af2_darkmode::before {
    content: '';
    background: -moz-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: 600px;
    height: 600px;
    position: absolute;
    top: -185px;
    left: -190px;
    z-index: 0;
}

.af2_wrapper.af2_darkmode::after {
    content: '';
    background: -moz-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.25) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: 800px;
     height: 800px;
     position: absolute;
     bottom: -120px;
     right: 0px;
     z-index: 0;
}

.af2_darkmode .af2_wrapper_darkmode_support::before {
    content: '';
     background: -moz-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* FF3.6-15 */
     background: -webkit-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* Chrome10-25,Safari5.1-6 */
     background: radial-gradient(ellipse at center, rgba(65, 29, 59, 0.4) 0%, rgba(65, 29, 59, 0.2) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     width: 460px;
     height: 460px;
     position: absolute;
     top: 0;
     right: 0;
     z-index: 0;
     
 }
 .af2_darkmode .af2_wrapper_darkmode_support::after {
    content: '';
     background: -moz-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* FF3.6-15 */
     background: -webkit-radial-gradient(center, ellipse cover, rgba(65, 29, 59, 0.5) 0%, rgba(65, 29, 59, 0.5) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* Chrome10-25,Safari5.1-6 */
     background: radial-gradient(ellipse at center, rgba(65, 29, 59, 0.4) 0%, rgba(65, 29, 59, 0.2) 25%, rgba(65, 29, 59, 0.0) 50%, rgba(65, 29, 59, 0.0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     width: 850px;
     height: 850px;
     position: absolute;
     bottom: -140px;
     left: -150px;
     z-index: 0;
     
 }

.af2_wrapper * {
    z-index: 1;
}


.af2_wrapper.af2_darkmode .af2_menu_headline_search_component_icon {
    color: var(--af2-primary-text-color);
}
.af2_wrapper.af2_darkmode .af2_btn_secondary:hover {
    color: var(--af2-primary-text-color);
}
.af2_wrapper.af2_darkmode .af2_btn_secondary {
    color: var(--af2-primary-text-color);
}

.af2_wrapper.af2_darkmode .af2_highlight {
    color: var(--af2-primary-text-color) !important;
}


/********************************************************/
/********************** MENU ITEMS **********************/
/********************************************************/

.af2_menu_wrapper {
    position: relative;
    width: 100%;

    font-family: 'Poppins';

    /*height: calc(100VH - 32px);*/
}

.af2_menu_header {
    position: relative;
    height: 35px;
    padding: 15px 50px;
    margin-bottom: 35px;
}

.af2_menu_headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.af2_menu_headline_components {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 30px;
}

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

.af2_menu_headline_search_component input {
    width: 250px;
}

.af2_menu_headline_search_component_icon {
    background: var(--af2-primary-color);
    color: var(--af2-secondary-color);
    border-radius: 0 var(--af2-border-radius-big) var(--af2-border-radius-big) 0;
    width: var(--af2-control-field-size);
    height: var(--af2-control-field-size);

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: var(--af2-border-size) solid var(--af2-primary-color);
}

.af2_menu_headline_search_component_icon {
    font-size: var(--af2-fontawesome-icon-size-small);
}

.af2_menu_header_image_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.af2_menu_header_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.af2_bg_primary {
    background-color: var(--af2-primary-color);
}

.af2_bg_secondary {
    background-color: var(--af2-white-color);
}

.af2_menu_wrapper h3 {
    margin: 0 0 var(--af2-gap-value) 0;
    font-size: var(--af2-font-size-big);
    font-weight: var(--af2-font-weight-bold);
    line-height: var(--af2-font-line-height-big);
    color: var(--af2-primary-text-color);
}
.af2_menu_wrapper h4 {
    margin: 0;
    font-size: var(--af2-font-size-medium);
    font-weight: var(--af2-font-weight-bold);
    line-height: var(--af2-font-line-height-medium);
    color: var(--af2-primary-text-color);
}
.af2_menu_wrapper h5 {
    margin: 0;
    font-size: var(--af2-font-size-medium);
    font-weight: var(--af2-font-weight-medium);
    line-height: var(--af2-font-line-height-medium);
    color: var(--af2-primary-text-color);
}
.af2_menu_wrapper p {
    margin: 0;
    font-size: var(--af2-font-size-small);
    font-weight: var(--af2-font-weight-small);
    line-height: var(--af2-font-line-height-small);
    color: var(--af2-secondary-text-color);
}
.af2_menu_wrapper p.table_content {
    margin: 0;
    font-size: var(--af2-font-size-small);
    font-weight: var(--af2-font-weight-small);
    line-height: var(--af2-font-line-height-small);
    color: var(--af2-secondary-text-color);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
input, textarea {
    font-size: var(--af2-font-size-small);
}
.af2_menu_wrapper .af2_error_row {
    border: 2px solid #F56D49;
    box-shadow: var(--box-shadow-value) #F56D49;
}
.af2_menu_wrapper p.table_content a{
    width: 100%;
    height: 100%;
    display: flex;
    color: unset;
    align-items: center;
    text-decoration: unset;
    outline: none !important;
    box-shadow: none !important;
}
.af2_menu_wrapper p.table_content.af2_highlight {
    color: var(--af2-primary-color);
}

.af2_menu_content {
    padding: 0 40px;
}
.af2_menu_content * {
    box-sizing: border-box;
}

.af2_menu_sheet {
    display: flex;
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 30px;
}

.af2_menu_sheet_content {
    flex: 1;
    margin-right: 40px;
    width: 100%;
}
.af2_menu_sheet_content.no_sidebar {
    margin-right: 0;
}

.af2_menu_sheet_sidebar {
    display: flex;
    width: 100%;
}

.af2_menu_sheet_sidebar h4 {
    margin-bottom: 10px;
}


/********************************************************/
/************************* CARDS ************************/
/********************************************************/

.af2_card_table {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.af2_card_table > .af2_card {
    flex: 40%;

    background-color: var(--af2-secondary-color);
}
.af2_card_table > .af2_card.inactive {
    background-color: var(--af2-grey-color);
}

.af2_card {
    border-radius: var(--af2-border-radius-big);
    border: var(--af2-border-size) solid var(--af2-secondary-color);
    background-color: var(--af2-primary-light-color);
}

.af2_card.invisible {
    border: var(--af2-border-size) solid rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
}

.af2_card_divider {
    width: var(--af2-border-size);
    height: 100%;
    background-color: var(--af2-secondary-color);
}

.af2_card_block {
    padding: var(--af2-gap-value);
    width: 100%;
}

.af2_card_block .af2_card_heading {
    margin-bottom: var(--af2-gap-value);
    display: flex;
    align-items: center;
}


/********************************************************/
/************************ TABLES ************************/
/********************************************************/

.af2_post_table {
    width: 100%;
    position: relative;
}

.af2_post_table_head {
    border-bottom: 1px solid var(--af2-shadow-background-color);
}

.af2_post_table_body .af2_post_table_row{
    margin: 10px 0;
    background-color: var(--af2-secondary-color);
    border-radius: var(--af2-border-radius-small);
    height: fit-content;
    min-height: 60px;
}

.af2_post_table_body .af2_post_table_row.af2_hide{
    display: none;
}

.af2_post_table_row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 0;
}

.af2_post_table_checkbox {
    text-align: center;
    justify-content: center;
}

.af2_post_table_content {
    display: flex;
    text-align: left;
    justify-content: left;
    align-items: center;
    padding: 0 20px;
    height: 100%;
    position: relative;
}



/********************************************************/
/************************ BUTTONS ***********************/
/********************************************************/

a.af2_btn_link {
    color: unset;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

.af2_btn {
    border-radius: var(--af2-border-radius-small);
    border: var(--af2-border-size) solid;
    transition: all 300ms ease-out;
    display: flex;
    align-items: center;
    font-size: var(--af2-font-size-medium);
    font-weight: var(--af2-font-weight-medium);
    line-height: var(--af2-font-line-height-button);
    padding: 5px 20px;
    cursor: pointer;
    width: fit-content;
    height: var(--af2-control-field-size);
}

.af2_btn.af2_control_button {
    padding: 0;
    width: var(--af2-control-field-size);
    height: var(--af2-control-field-size);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
}

.af2_btn.af2_control_button i{
    margin: 0;
}

.af2_btn i {
    margin-right: 10px;
    font-size: var(--af2-fontawesome-icon-size);
}

.af2_darkmode .af2_btn.af2_btn_disabled {
    color: var(--af2-primary-text-color) !important;
}

.af2_btn.af2_btn_disabled {
    background-color: grey !important;
    border-color: grey !important;
    color: var(--af2-secondary-color) !important;
}

.af2_darkmode .af2_btn_primary {
    color: var(--af2-primary-text-color);
}
.af2_btn_primary {
    background-color: var(--af2-primary-color);
    color: var(--af2-secondary-color);
    border-color: var(--af2-primary-color);
}
.af2_btn_primary:hover {
    background-color: var(--af2-secondary-color);
    color: var(--af2-primary-color);
}
.af2_darkmode .af2_btn_primary:hover {
    background-color: var(--af2-invisible);
    border-color: var(--af2-primary-text-color);
    color: var(--af2-primary-text-color);
}

.af2_btn_secondary {
    background-color:  var(--af2-secondary-color);
    color: var(--af2-primary-color);
    border-color: var(--af2-secondary-color);
}
.af2_btn_secondary:hover {
    background-color:  var(--af2-primary-color);
    color: var(--af2-secondary-color);
    border-color: var(--af2-primary-color);
}

.af2_btn_secondary_outline {
    background-color:  var(--af2-secondary-color);
    color: var(--af2-primary-color);
    border-color: var(--af2-primary-color);
}
.af2_btn_secondary_outline:hover {
    background-color:  var(--af2-primary-color);
    color: var(--af2-secondary-color);
    border-color: var(--af2-primary-color);
}

.af2_darkmode .af2_btn_secondary_outline {
    background-color:  var(--af2-secondary-color);
    color: var(--af2-primary-text-color);
    border-color: var(--af2-primary-text-color);
}
.af2_darkmode .af2_btn_secondary_outline:hover {
    background-color:  var(--af2-primary-color);
    color: var(--af2-primary-text-color);
    border-color: var(--af2-primary-color);
}


/********************************************************/
/************************ TOGGLE ************************/
/********************************************************/

.af2_wrapper input[type=checkbox] {
    margin: 0;
}

.af2_toggle_wrapper {
    display: flex;
    align-items: center;
}

.af2_toggle_wrapper h3, .af2_toggle_wrapper h4, .af2_toggle_wrapper h5{
    margin-bottom: 0 !important;
}

input[type="checkbox"].af2_toggle {
    visibility: hidden;
    display: none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

input[type="checkbox"].af2_toggle + label.af2_toggle_btn {
    cursor: pointer;
    width: 50px;
    height: 25px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

.af2_wrapper input[type="checkbox"].af2_toggle + label.af2_toggle_btn::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 19px;
    height: 19px;
    background: var(--af2-secondary-color);
    border-radius: 100px;
    transition: 300ms ease-out;
}
.af2_darkmode input[type="checkbox"].af2_toggle + label.af2_toggle_btn::after {
    background: var(--af2-primary-text-color)
}

.af2_wrapper input[type="checkbox"].af2_toggle:checked + label.af2_toggle_btn {
    /*background: var(--af2-secondary-highlight-color);*/
}

.af2_wrapper input[type="checkbox"].af2_toggle:checked + label.af2_toggle_btn::after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
    background: var(--af2-primary-color);
}

.af2_wrapper input[type="checkbox"].af2_toggle + label.af2_toggle_btn:active::after {
    width: 25px;
}


/********************************************************/
/*********************** Margins ************************/
/********************************************************/


.af2_wrapper .mt20 {
    margin-top: 20px !important;
}

.af2_wrapper .mt30 {
    margin-top: 30px !important;
}
.af2_wrapper .mt50 {
    margin-top: 50px !important;
}

.af2_wrapper .mb10 {
    margin-bottom: 10px !important;
}
.af2_wrapper .mb50 {
    margin-bottom: 50px !important;
}
.af2_wrapper .mb15 {
    margin-bottom: 15px;
}

.af2_wrapper .mb30 {
    margin-bottom: 30px;
}

.af2_wrapper .ml5 {
    margin-left: 5px !important;
}
.af2_wrapper .ml10 {
    margin-left: 10px !important;
}
.af2_wrapper .ml15 {
    margin-left: 15px !important;
}


/********************************************************/
/******************* Action Buttons *********************/
/********************************************************/

.af2_action_buttons_wrapper {
    position: fixed;
    left: 185px;
    bottom: 20px;
    z-index: 1;
    display: flex;
    gap: 15px;
}

.af2_action_button {
    background: #6A30F5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    font-size: 20px;
    border: 2px solid #6A30F5;
    cursor: pointer;
    transition: all 300ms ease-out;
}

.af2_action_button:hover {
    background: #fff;
    color: #6A30F5;
}



/********************************************************/
/************************ BUILDER ***********************/
/********************************************************/

.af2_builder * {
    box-sizing: border-box;
}

.af2_builder_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    height: calc(100VH - 32px);
}

.af2_builder_sidebar {
    width: var(--af2-sidebar-width);
    position: relative;
    max-height: 100%;
    transition: all var(--af2-transition-property);
}

.af2_builder_sidebar.hide {
    margin-right: calc(-1 * var(--af2-sidebar-width));
}

.af2_builder_sidebar.leftSidebar {
    margin-right: var(--af2-gap-value);
}
.af2_builder_sidebar.rightSidebar {
    margin-left: var(--af2-gap-value);
}
.af2_builder_sidebar.rightSidebar.hide {
    margin-left: 0;
}

.af2_builder_sidebar_content_wrapper {
    width: 100%;
    position: relative;
    height: calc(100VH - 132px);
}

.af2_builder_overflow-scroll {
    overflow: scroll;
}

.af2_select_filter .af2_builder_sidebar_content_wrapper {
    height: calc(100VH - 203px);
}

.af2_builder_sidebar_content {
    width: 100%;
    background: var(--af2-primary-light-color);
    border-radius: var(--af2-border-radius-small);
    border: var(--af2-border-size) solid var(--af2-white-color);
    padding: 10px 20px;
    transition: border var(--af2-transition-property);
    cursor: pointer !important;
    text-align: left;
}
.af2_builder_sidebar_content:hover {
    border-color: var(--af2-primary-color);
    background-color: var(--af2-primary-highlight-color);
}
.af2_builder_sidebar_content.selected {
    border-color: var(--af2-primary-color);
    background-color: var(--af2-primary-highlight-color);
}

.af2_builder_sidebar_content_heading_wrapper {
    margin-bottom: 15px;
    display: flex;
    justify-content: start;
    align-items: center;
    color: var(--af2-primary-text-color);
}

.af2_builder_sidebar_content_heading_wrapper i {
    margin-right: 7px;
    color: var(--af2-primary-text-color);
}

.af2_builder_sidebar_content_operator label {
    font-size: var(--af2-font-size-small);
    line-height: var(--af2-font-line-height-small);
    font-weight: var(--af2-font-weight-medium);
}

h5.af2_builder_sidebar_content_heading {
    font-size: var(--af2-font-size-small);
    line-height: var(--af2-font-line-height-small);
    font-weight: var(--af2-font-weight-medium);
}

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

.af2_builder_sidebar_header {
    height: var(--af2-builder-header-height);
}

.af2_builder_sidebar_image {
    position: relative;
    height: 70px;
    padding: 3px 0;
}

.af2_builder_sidebar_image img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: left;
}

.af2_builder_content {
    color: var(--af2-extra-color);
}

.af2_builder_content_wrapper {
    flex: 1;
    position: relative;
    height: 100%;
}

.af2_wrapper input:not(.af2_form input), .af2_wrapper textarea:not(.af2_form textarea) {
    background: var(--af2-input-background-color) !important;
}

.af2_builder_content.af2_card {
    overflow-y: scroll;
    max-height: calc(100% - var(--af2-gap-value) - var(--af2-builder-header-height));
    margin: 0 var(--af2-gap-value) 0 0;
}

.af2_builder_content.no_margin {
    margin: 0;
}

.af2_builder_content.af2_card.margin-lr {
    margin: 0 var(--af2-gap-value);
}
.af2_builder_content.af2_card.margin-lr.no_margin {
    margin: 0 0 0 var(--af2-gap-value);
}

.af2_builder_element {
    padding: var(--af2-gap-value);
    background: var(--af2-white-color);
    overflow: visible;
}

.af2_builder_element.af2_no_padding {
    padding: 1px;
}

.af2_builder_header {
    height: var(--af2-builder-header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--af2-border-radius-big);
    margin-bottom: var(--af2-gap-value);
    gap: var(--af2-gap-value);
}

.af2_builder_header_heading {
    width: 25%;
    display: flex;
    justify-content: left;
}

.colorPrimary.af2_icon_wrapper {
    color: var(--af2-primary-color);
    background-color: var(--af2-primary-color-background);
}
.colorBlue.af2_icon_wrapper {
    color: var(--af2-support-color-blue);
    background-color: var(--af2-support-color-blue-background);
}
.colorOrange.af2_icon_wrapper {
    color: var(--af2-support-color-orange);
    background-color: var(--af2-support-color-orange-background);
}
.colorGreen.af2_icon_wrapper {
    color: var(--af2-support-color-green);
    background-color: var(--af2-support-color-green-background);
}
.colorPink.af2_icon_wrapper {
    color: var(--af2-support-color-pink);
    background-color: var(--af2-support-color-pink-background);
}

.af2_icon_wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--af2-fontawesome-icon-size);
    margin-right: 15px;
    border-radius: var(--af2-border-radius-small);
}

.af2_builder_header_components {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    gap: 15px;
}

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

.custom_builder_content {
    width: 100%;
}

.custom_builder_content.split {
    display: flex;
    justify-content: space-between;
    gap: var(--af2-gap-value);
}

.custom_builder_content_split_section {
    flex: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--af2-gap-value);
}


.af2_wrapper .custom_builder_content_card {
    background: var(--af2-primary-highlight-color);
    border-radius: var(--af2-border-radius-big);
    padding: var(--af2-gap-value);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.af2_wrapper .custom_builder_content_card_box_wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.af2_wrapper .custom_builder_content_card_box {
    width: 100%;
}

.af2_wrapper .custom_builder_content_card_box_heading {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.af2_wrapper .custom_builder_content_card_box_heading i {
    color: var(--af2-secondary-text-color);
    margin-right: 10px;
}

.af2_wrapper .custom_builder_content_card_box_content input:not(input[type=checkbox]),.af2_wrapper  .custom_builder_content_card_box_content textarea, .af2_wrapper .custom_builder_content_card_box_content select {
    width: 100%;
}

.af2_wrapper .custom_builder_content_card_box_content.icon_image {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 5px;
}

.af2_builder_editable_object {
    border: var(--af2-border-size) solid rgba(0,0,0,0);
    border-radius: var(--af2-border-radius-small);
    padding: 5px 10px;
    transition: background-color, border-color, box-shadow var(--af2-transition-property);
    cursor: pointer;
}

.af2_builder_editable_object:hover, .af2_builder_editable_object.selected {
    background-color: var(--af2-primary-highlight-color);
    border-color: var(--af2-primary-color);
    box-shadow: var(--box-shadow-value) var(--af2-primary-color);
}

textarea.af2_sidebar_builder_content_textarea_edit, textarea.af2_sidebar_builder_content_textarea_edit_ {
    height: 140px;
}

.af2_sidebar_checkbox_operator,  .af2_sidebar_radio_operator{
    display: flex;
    align-items: center;
}

.af2_sidebar_checkbox_operator input[type="checkbox"], input[type="checkbox"].af2_sidebar_builder_content_restriction_option {
    margin: 0 15px 0 0 !important;
}

.af2_edit_content_radio {
    margin-right: 10px !important;
    width: fit-content !important;
}

.af2_icon_image_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.af2_builder_sidebar_content_operator_radio_type {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

span.af2_delete_object {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 15px;
    display: none;
    z-index: 10;
    transition: all var(--af2-transition-property);
}

span.af2_delete_object:hover {
    color: var(--af2-primary-color);
    cursor: pointer;
}

span.af2_edit_object {
    position: absolute;
    top: 5px;
    right: 30px;
    font-size: 15px;
    display: none;
    z-index: 10;
    transition: all var(--af2-transition-property);
}

span.af2_edit_object:hover {
    color: var(--af2-primary-color);
    cursor: pointer;
}

.af2_builder_deletable_object {
    position: relative;
}

.af2_builder_deletable_object:hover span.af2_delete_object, .af2_builder_deletable_object:hover span.af2_edit_object {
    display: block;
}

.af2_array_draggable {
    cursor: pointer !important;
}

.af2_dragging {
    z-index: 50;
    position: absolute !important;
    top: 0;
    left: 0;
}

.af2_array_dropzone_in {
    border: var(--af2-border-size) dotted rgba(0,0,0,0);
}

.af2_array_dropzone_droppable {
    border-color: var(--af2-primary-color);
    background-color: var(--af2-primary-highlight-color);
}

.af2_gap {
    width: 10px;
    height: 10px;
}

.custom_builder_content_card_heading {
    margin-bottom: var(--af2-gap-value);
}

.custom_builder_content_card_heading.no_margin {
    margin-bottom: 0;
}

.af2_hide {
    display: none !important;
}

.af2_edit_content_checkbox, .af2_edit_content_checkbox_array_list {
    margin-right: 10px !important;
}

.af2_edit_content_textarea {
    height: 140px;
}

.af2_builder_sidebar_element {
    color: var(--af2-primary-text-color);
}

.af2_show_media_preview {
    position: relative;
    max-width: 60%;
    margin-bottom: 10px;
}

.af2_show_media_preview_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.af2_sidebar_builder_content_colorizer {
    position: relative;
}

.af2_sidebar_builder_content_color_preview { 
    width: calc(var(--af2-control-field-size) - 10px);
    height: calc(var(--af2-control-field-size) - 10px);
    background: blue;
    position: absolute;
    bottom: 5px;
    right: 5px;
    border-radius: 100%;
    border: 1px solid;
}


.af2_connection_path {
    stroke-width: var(--af2-border-size);
    stroke: var(--af2-primary-color);
    fill-opacity: 0;
}

.af2_builder_pre_heading_buttons {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.af2_builder_pre_heading_buttons i {
    margin-right: 0 !important;
}

.af2_builder_pre_heading_buttons .af2_btn {
    padding: 5px 10px;
}


.af2_zoom_container {
    transform-origin: left top;
}



.af2_flex_sidebar_heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.af2_wrapper .dragscroll {
    cursor: pointer;
}

.af2_restriction_buttons {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.af2_restriction_options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

#af2_save_modal_ .af2_modal_content .af2_card_block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.af2_error_object {
    transition: all 0.5s ease-out;
    border-color: var(--af2-support-color-red) !important;
    box-shadow: var(--box-shadow-value) var(--af2-support-color-red) !important;
}

.af2_checkbox_flex {
    display: flex;
    width: 100%;
    justify-content: left;
    align-items: center;
}
.af2_checkbox_flex_container {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.af2_edit_content_remove {
    width: var(--af2-control-field-size);
    min-width: var(--af2-control-field-size);
    height: var(--af2-control-field-size);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--af2-primary-color);
    color: var(--af2-secondary-color);
    border-radius: var(--af2-border-radius-small);
    font-size: 16px;
    margin-left: 30px;
}

.af2_edit_content_remove i {
    margin-right: 0 !important;
}
.af2_edit_content_add {
    margin-top: 20px !important;
}

.af2_menu_functions_select_label {
    margin-right: 15px !important;
}

.af2_menu_functions_select {
    padding: 0px 25px 0 10px !important;
}

.af2_wrapper span.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 15px;
}

.af2_wrapper span.loading i {
    margin-right: 0 !important;
}

.af2_menu_hooks_wrapper {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 30px;
}

.af2_radio_chooser {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--af2-gap-value);
    margin-bottom: var(--af2-gap-value);
}

.af2_table_highlight {
    background: var(--af2-support-color-red-background) !important;
}


.textarea_copy_field {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

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

.af2_builder_sidebar_select_filter {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--af2-white-color);
    padding: 0 var(--af2-gap-value) var(--af2-gap-value);
}

.af2_builder_sidebar_select_filter select {
    padding: 0px 25px 0 10px !important;
    background-color: var(--af2-primary-light-color);
    width: 100%;
}


.af2_helpcenter_button_wrapper {
    position: fixed;
    right: 25px;
    bottom: 20px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 10px;
}

#af2_helpcenter_frame {
    border: 2px solid #6A30F5;
    border-radius: 8px;
    box-shadow: 0px 0px 9px 0px #6a30f5;
}
