// Pina Styles for Editmode

@import 'variables';
@import 'typography_default.css';


/* Wrap flex/slot content into 'pina-wrapper' in order  to apply max-width */
.pina-wrapper {
    padding: 30px 0;
    max-width: 800px;
    // margin: auto; 
}
@media screen and (max-width: 800px) {
    .pina-wrapper {
        margin: 0 20px;
    }
}
/* Wrap subsections of the flex/slot content in 'pina-section' to add additioonal indent */
.pina-section {
    padding: 10px 30px;
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
}
.lorem-ipsum-text {
    font-family: 'BLOKKNeue-Regular';
    font-size: 16px;
    line-height: 15px;
    color: $gray-light;
}

// pina styles
#imperia .pina, 
.pina {
    color: $pina-text-color;
    
    h1, h2, h3, h4, h5, h6, label, .form-text, .pina-label, .form-hint, .maxlength_counter {
        font-family: 'Roboto Regular';
    }
    h1 {
        font-size: 24px;
        font-size: 26px;
        margin: 30px 0;
    }
    h2 {
        font-size: 20px;
        font-size: 23px;
        margin: 30px 0;
    }
    h3 {
        font-size: 18px;
        font-size: 21px;
        margin: 30px 0;
    }
    h4 {
        font-size: 16px;
        font-size: 19px;
        margin: 30px 0;
    }
    h5 {
        font-size: 14px;
        font-size: 17px;
        margin: 1em 0;
    }
    .i-calendar-icon {
        color: $blue;
        &:hover {
            color: $hover_blue;
        }
    }
    .pina-calendar-input-group {
        position: relative;
        input[type=text] {
            padding-right: 35px;
        }
        .calendar-icon {
            position: absolute;
            right: 10px;
            top: 6px;
        }
    }
    .pina-section {
        h1,h2,h3,h4,h5 {
            margin-top: 0;
        }
    }
    label, .pina-label {
        font-size: 14px;
        line-height: 18px;
    }
    .pina-label {
        margin-bottom: 7px;
    }
    hr {
        width: 100%;
        height: 1px;
        background: $gray-light;
        padding: 0;
        margin: 30px 0;
        border: none;
    }
    .form-text {
        font-size: 12px;
        color: $gray;
    }
    .form-control {
        border-color: $pina-border-color;
        border-radius: $pina-border-radius;
        &::placeholder {
            color: #737373;
            font-family: 'Roboto Regular';
            font-size: 14px;
        }
        &:focus {
            color: #495057;
            background-color: #fff;
            outline: 0;
            border-color: $pina-material-primary-rgb;
            box-shadow: 0 0 0 0.2rem rgba($pina-material-primary-rgb, 0.5);
        }
    }
    .custom-select:focus {
        color: #495057;
        background-color: #fff;
        outline: 0;
        border-color: $pina-material-primary-rgb;
        box-shadow: 0 0 0 0.2rem rgba($pina-material-primary-rgb, 0.5);
    }
    
    select.form-control option,
    select.custom-select option {
        background: #fff;
    }
    select.form-control option:checked:hover,
    select.form-control option:checked,
    select.form-control option:checked,
    select.custom-select option:checked:hover,
    select.custom-select option:checked,
    select.custom-select option:checked {
        background: rgba($orange, 0.5) !important;
    }

    select.form-control, select.custom-select {
        -webkit-appearance: none; /* Webkit */
        -moz-appearance: none; /* FF */
        -ms-appearance: none; /* Edge */
        appearance: none; /* Future */
        border: 1px solid $pina-border-color;
        -webkit-border-radius: $pina-border-radius;
        border-radius: $pina-border-radius;
        font-family: 'Roboto Regular', Arial, sans-serif;
        background: url(/imperia/images/editmode/select_arrow_down.gif) no-repeat #fff;
        background-position: right 5px bottom 50%;
        padding-right: 15px;
    }
    select.pina-toolbar-select {
        background: #fff;
        border: 1px solid #fff;
        border-radius: 0;
        font-size: 11px;
        line-height: 26px;
        font-family: 'Roboto Regular', serif;
        margin: 0 5px 0 0;
        display: inline-block;
        color: $blue;
        padding: 0 20px 0 10px;
        -webkit-appearance: none; /* Webkit */
        -moz-appearance: none; /* FF */
        -ms-appearance: none; /* Edge */
        appearance: none; /* Future */
        background: url(/imperia/images/editmode/select_arrow_down.gif) no-repeat;
        background-size: 5px;
        background-position: right 5px bottom 50%;
        &:hover, &:active, &:focus {
            /* iwe styles */
            outline: none;
            background-color: $hover_blue_light;
            border: 1px solid $hover_blue_light;
        }  
        & > * {
            font-size: 16px !important;
            padding: 10px;
        }      
    }
    
    /* IE10+ */
    select::-ms-expand.form-control,
    select::-ms-expand.custom-select {
        display: none;
    }

    select.form-control[multiple],
    select.custom-select[multiple] {
        background-image: none;
    }


    label.i-material-checkbox {
        z-index: 0;
        position: relative;
        display: inline-block;
        color: #333;
        font-weight: normal;
        font-family: "Roboto Regular", Arial;
        font-size: 14px;
        line-height: 1.85;
    }
    
    // Input 
    label.i-material-checkbox > input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -10px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba($pina-material-onsurface-rgb, 0.6);
        box-shadow: none;
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        transition: opacity 0.3s, transform 0.2s;
    }
    
    // Span 
    label.i-material-checkbox > span {
        display: inline-block;
        width: 100%;
        color: #333;
        cursor: pointer;
    }
    
    // Box 
    .i-material-checkbox > span::before {
        content: "";
        display: inline-block;
        box-sizing: border-box;
        margin: 3px 11px 3px 1px;
        border: solid 2px; // Safari
        border-color: rgba($pina-material-onsurface-rgb, 0.6);
        border-radius: 2px;
        width: 18px;
        height: 18px;
        vertical-align: top;
        transition: border-color 0.2s, background-color 0.2s;
    }
    
    // Checkmark 
    .i-material-checkbox > span::after {
        content: "";
        display: block;
        position: absolute;
        top: 4px;
        left: 2px;
        width: 10px;
        height: 5px;
        border: solid 2px transparent;
        border-right: none;
        border-top: none;
        transform: translate(3px, 4px) rotate(-45deg);
    }
    
    // Checked, Indeterminate 
    .i-material-checkbox > input:checked,
    .i-material-checkbox > input:indeterminate {
        background-color: rgba($pina-material-primary-rgb, 1);
    }
    
    .i-material-checkbox > input:checked ~ span::before,
    .i-material-checkbox > input:indeterminate ~ span::before {
        border-color: rgba($pina-material-primary-rgb, 1);
        background-color: rgba($pina-material-primary-rgb, 1);
    }
    
    .i-material-checkbox > input:checked ~ span::after,
    .i-material-checkbox > input:indeterminate ~ span::after {
        border-color: rgba($pina-material-onprimary-rgb, 1);
    }
    
    .i-material-checkbox > input:indeterminate ~ span::after {
        border-left: none;
        transform: translate(4px, 3px);
    }
    
    // Hover, Focus 
    .i-material-checkbox:hover > input {
        opacity: 0.04;
    }
    
    .i-material-checkbox > input:focus {
        // opacity: 0.12;
        outline: 0 !important;
    }
    
    .i-material-checkbox:hover > input:focus {
        opacity: 0.16;
        outline: 0 !important;
    }
    
    // Active 
    .i-material-checkbox > input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
        outline: 0;
    }
    
    .i-material-checkbox > input:active ~ span::before {
        border-color: rgba($pina-material-primary-rgb, 1);
    }
    
    .i-material-checkbox > input:checked:active ~ span::before {
        border-color: transparent;
        background-color: rgba($pina-material-onsurface-rgb, 0.6);
    }
    // IE10+ fixes 
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .i-material-checkbox:hover > input,
        .i-material-checkbox > input:focus,
        .i-material-checkbox:hover > input:focus,
        .i-material-checkbox > input:active  {
            opacity: 0;
        }
    }
    // Disabled 
    .i-material-checkbox > input:disabled {
        opacity: 0;
    }
    
    .i-material-checkbox > input:disabled ~ span {
        color: rgba($pina-material-onsurface-rgb, 0.38);
        cursor: initial;
    }
    
    .i-material-checkbox > input:disabled ~ span::before {
        border-color: currentColor;
    }
    
    .i-material-checkbox > input:checked:disabled ~ span::before,
    .i-material-checkbox > input:indeterminate:disabled ~ span::before {
        border-color: transparent;
        background-color: currentColor;
    }
    
    // Radio Button
    label.i-material-radio {
        z-index: 0;
        position: relative;
        display: inline-block;
        color: rgba($pina-material-onsurface-rgb, 0.87);
        font-family: "Roboto Regular", Arial;    
        font-size: 14px;
        line-height: 1.85;
        margin-right: 10px;
    }
    
    // Input 
    label.i-material-radio > input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -10px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba($pina-material-onsurface-rgb, 0.6);
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        transition: opacity 0.3s, transform 0.2s;
    }
    
    // Span 
    label.i-material-radio > span {
        display: inline-block;
        width: 100%;
        color: #333;
        cursor: pointer;
    }
    
    // Circle 
    .i-material-radio > span::before {
        content: "";
        display: inline-block;
        box-sizing: border-box;
        margin: 2px 10px 2px 0;
        border: solid 2px; // Safari 
        border-color: rgba($pina-material-onsurface-rgb, 0.6);
        border-radius: 50%;
        width: 20px;
        height: 20px;
        vertical-align: top;
        transition: border-color 0.2s;
    }
    
    // Check 
    .i-material-radio > span::after {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        left: 0;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: rgba($pina-material-primary-rgb, 1);
        transform: translate(5px, 5px) scale(0);
        transition: transform 0.2s;
    }
    
    // Checked 
    .i-material-radio > input:checked {
        background-color: rgba($pina-material-primary-rgb, 1);
    }
    
    .i-material-radio > input:checked ~ span::before {
        border-color: rgba($pina-material-primary-rgb, 1);
    }
    
    .i-material-radio > input:checked ~ span::after {
        transform: translate(5px, 5px) scale(1);
    }
    
    // Hover, Focus 
    .i-material-radio:hover > input {
        opacity: 0.04;
    }
    
    .i-material-radio > input:focus {
        // opacity: 0.12;
        outline: 0 !important;
    }
    
    .i-material-radio:hover > input:focus {
        opacity: 0.16;
        outline: 0 !important;
    }
    
    // Active 
    .i-material-radio > input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
    }
    
    .i-material-radio > input:active ~ span::before {
        border-color: rgba($pina-material-primary-rgb, 1);
    }
    // IE10+ fixes
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .i-material-radio:hover > input,
        .i-material-radio > input:focus,
        .i-material-radio:hover > input:focus,
        .i-material-radio > input:active  {
            opacity: 0;
        }
    }
    // Disabled
    .i-material-radio > input:disabled {
        opacity: 0;
    }
    
    .i-material-radio > input:disabled ~ span {
        color: rgba($pina-material-onsurface-rgb, 0.38);
        cursor: initial;
    }
    
    .i-material-radio > input:disabled ~ span::before {
        border-color: currentColor;
    }
    
    .i-material-radio > input:disabled ~ span::after {
        background-color: currentColor;
    }
    
    // *******************************
    // Switch
    // *******************************
    
    .i-material-switch {
        z-index: 0;
        position: relative;
        display: inline-block;
        font-size: 16px;
        color: #333;
        font-family: "Roboto Regular", Arial;    
        font-size: 14px;
        line-height: 1.5;
    }
    
    // Input
    .i-material-switch > input {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        z-index: -1;
        position: absolute;
        left: -10px;
        top: -8px;
        display: block;
        margin: 0;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: rgba($pina-material-onsurface-rgb, 0.38);
        outline: none;
        opacity: 0;
        transform: scale(1);
        pointer-events: none;
        margin: 0;
        transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
    }
    .i-material-switch > input[type='checkbox'] {
        margin: 0;
    }
    // Span
    .i-material-switch > span {
        display: inline-block;
        width: 100%;
        cursor: pointer;
    }
    
    // Track
    .i-material-switch > span::before {
        content: "";
        float: left;
        display: inline-block;
        margin: 5px 10px 5px 0px;
        border-radius: 7px;
        width: 36px;
        height: 14px;
        background-color: rgba($pina-material-onsurface-rgb, 0.38);
        vertical-align: top;
        transition: background-color 0.2s, opacity 0.2s;
    }
    
    // Thumb
    .i-material-switch > span::after {
        content: "";
        position: absolute;
        top: 2px;
        // right: 16px;
        left: 0px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        background-color: $pina-material-onprimary-rgb;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
        transition: background-color 0.2s, transform 0.2s;
    }
    
    // Checked
    .i-material-switch > input:checked {
        // right: -10px;
        left: 7px;
        background-color: $pina-material-primary-rgb;
    }
    
    .i-material-switch > input:checked ~ span::before {
        background-color: rgba($pina-material-primary-rgb, 0.6);
    }
    
    .i-material-switch > input:checked ~ span::after {
        background-color: $pina-material-primary-rgb;
        transform: translateX(16px);
    }
    
    // Hover, Focus
    .i-material-switch:hover > input {
        opacity: 0.04;
    }
    
    .i-material-switch > input:focus {
        opacity: 0.12;
        outline: none;
    }
    
    .i-material-switch:hover > input:focus {
        opacity: 0.16;
    }
    
    // Active
    .i-material-switch > input:active {
        opacity: 1;
        transform: scale(0);
        transition: transform 0s, opacity 0s;
        outline: none;
    }
    
    .i-material-switch > input:active ~ span::before {
        background-color: rgba($pina-material-primary-rgb, 0.6);
    }
    
    .i-material-switch > input:checked:active ~ span::before {
        background-color: rgba($pina-material-onsurface-rgb, 0.38);
    }
    
    // Disabled
    .i-material-switch > input:disabled {
        opacity: 0;
    }
    
    .i-material-switch > input:disabled ~ span {
        color: $pina-material-onsurface-rgb;
        opacity: 0.38;
        cursor: default;
    }
    
    .i-material-switch > input:disabled ~ span::before {
        background-color: rgba($pina-material-onsurface-rgb, 0.38);
    }
    
    .i-material-switch > input:checked:disabled ~ span::before {
        background-color: rgba($pina-material-primary-rgb, 0.6);
    }
    div.i-material-switch-hint.form-hint {
        margin-top: 0;
    }
    .i-material-radio-form-group div.form-hint,
    .i-material-checkbox-form-group div.form-hint {
        margin-top: -5px;
        margin-bottom: 10px;
    }
    .i-material-checkbox-form-group {
        .form-group {
            margin-bottom: 15px;
        }
        .form-group:not(:first-child) {
            margin-top: 0;
        }
        .form-group:last-child {
            margin-bottom: 30px;
        }
    }
    .maxlength_counter {
        // color: $gray;
        color: #929292;
        font-size: 12px;
        line-height: 16px;
        font-weight: normal;
        text-align: right;
        display: block;
        padding: 3px;
        float: right;
    }
    .form-hint {
        margin: 5px 0 0 1px;
        color: $gray;
        font-size: 12px;
        line-height: 16px;
        font-weight: normal;
    }
    
    .maxlength_counter ~ .form-hint {
        margin-right: 60px;
    }
    .form-group:after {
        content: '';
        display: table;
        height: 1px;
        clear: both;
    }
    .form-hint-error {
        @extend .form-hint;
        color: $red;
        display: none;
        &:before {
            width: 10px;
            height: 10px;
            display: inline-block;
            margin-right: 5px;
            color: $red;
            font-family: "Font Awesome 5 Pro";
            font-weight: 900;
            content: '\f05a';
        }
    }
    // *******************************
    // Icon radios
    // *******************************
    .pina-icon-radio {
        display: inline-block;
        width: 30px;
        height: 27px;
        vertical-align: middle;
        margin-bottom: 0;
        position: relative;
        cursor: pointer;
        &:focus {
            outline: none;
        }

        input {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            position: absolute;
            display: block;
            margin: 0;
            padding: 0;
            width: 30px;
            height: 27px;
            border: 0 none;

            &:before {
                content: '';
                display: inline-block;
                width: 30px;
                height: 27px;
                vertical-align: middle;
                margin-bottom: 0;
                margin-right: 5px;
                outline: 1px solid $white;
                // sample image (to be overwritten)
                background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSIxNSIgeT0iMTAiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iMTUiIHk9IjYiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iNyIgeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
            }
            &:focus {
                outline: none !important;
                border: 0 !important;
                box-shadow: 0 0 0 rgb(255, 255, 255);
            }
            &:focus:before {
                box-shadow: 0 0 0 rgb(255, 255, 255);
                outline: 1px solid $blue !important;
                background-color: $hover_blue_light;
            }
            &:checked:before {
                border: 0 !important;
                box-shadow: 0 0 0 rgb(255, 255, 255);
                outline: 1px solid $blue;
            }
            &:not([checked]):hover {
                border: 0 !important;
                box-shadow: 0 0 0 rgb(255, 255, 255);
                background-color: $hover_blue_light;
                outline: 1px solid $hover_blue_light;
            }
        }
    }

    // *******************************
    // Pina button group
    // *******************************

    .pina-btn-group {
        display: inline-block;
        height: 26px;
        vertical-align: middle;
        margin-right: 5px;
        .pina-btn-radio {
            position: relative;
            padding: 0 10px;
            margin: -6px 0 0 -4px;
            height: 24px;
            line-height: 23px;
            color: #1c385f;
            display: inline-block;
            font-size: 12px;
            font-family: 'Roboto Regular';
            vertical-align: middle;
            &:hover {
                background-color: #E8EBEF;
            }
            input {
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                display: block;
                margin: 0;
                padding: 0;
                cursor: pointer;
            }
            input:before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                display: inline-block;
                background-color: transparent;
                border: 1px solid #1c385f;
                height: 24px;
                z-index: 8;
            }
            input ~ span {
                color: #1c385f;
                z-index: 10;
            }

            input:checked:before {
                background: #49607F;
            }
            input:disabled:before {
                background: rgba(#adacac, 0.5);
            }
            input:checked ~ span {
                color: #fff;
                opacity: 1;
                position: relative;
            }
            input:disabled ~ span {
                color: gray;
            }
            input:disabled:before {
                cursor: default;
            }
        }
    }

    // *******************************
    // Flex Toolbar
    // *******************************
    
    .pina-flex-toolbar {
        margin: 0 -8px 0 -8px;
        text-align: left;
        height: 44px;
        padding: 0 10px;
        line-height: 30px;
        border-bottom: 1px solid $gray-light;
        color: $blue;
        button {
            border: none;
            background: #fff;
            color: $blue;
            outline: none;
            box-shadow: none;
            height: 20px;
            padding: 0;
            line-height: 20px;
            &:hover {
                background-color: $hover_blue_light;
            }
        }
    }
    // Toolbar above form controls
    .pina-form-toolbar {
        text-align: left;
        height: 35px;
        padding: 0 10px;
        line-height: 30px;
        border: 1px solid $gray-light;
        border-bottom: none 0;
        color: $blue;
        button {
            border: none;
            background: #fff;
            color: $blue;
            outline: none;
            box-shadow: none;
            height: 20px;
            padding: 0;
            line-height: 20px;
            &:hover {
                background-color: $hover_blue_light;
            }
        }
    }
    
    // imperia Link Input
    .pina-input-group {
        position: relative;
        .pina-link-btn {
            border: none;
            display: inline-block;
            line-height: 35px;
            font-family: 'Roboto Regular';
            font-size: 14px;
            outline: none;
            color: $blue;
            position: absolute;
            top: 1px;
            right: 1px;
            bottom: 1px;
            padding-left: 12px;
            padding-right: 12px;
            border-left: 1px solid $pina-border-color;
            background: #fff;
            span.i-button {display: none;}
            &:hover {
                background: $hover_blue_light;
            }
        }
        .pina-open-link-btn {
            right: 41px;
        }
    }
    .pina-clear-icon {
        cursor: pointer;
        color: #666;
        font-size: 20px;
        text-align: center;
        display: inline-block;
        position: absolute;
        top: 9px;
        padding: 0 7px;
        left: calc( 100% - 80px);
        cursor: pointer;
        background: #fff;
        &:hover {
            color: $blue;
        }
    }

    .pina-internal-link {
        padding-right: 80px;
    }
    .pina-internal-link-wrapper:not(.show-clear-icon) .pina-clear-icon {
        visibility: hidden;
        pointer-events: none;
    }
    .pina-internal-link-wrapper.show-clear-icon {
        visibility: visible;
    }

    // PDF Link List
    .pina_pdf_img_preview {
        max-width: 100%; // prevent img preview exceed container
    }
    // Call-to-Action Flex
    .jumbotron-radio  {
        &.jumbotron-radio-left-one input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgOS41QzYgOS4yMjM4NiA2LjIyMzg2IDkgNi41IDlIMTMuNUMxMy43NzYxIDkgMTQgOS4yMjM4NiAxNCA5LjVWMTAuNUMxNCAxMC43NzYxIDEzLjc3NjEgMTEgMTMuNSAxMUg2LjVDNi4yMjM4NiAxMSA2IDEwLjc3NjEgNiAxMC41VjkuNVoiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iNiIgeT0iMTciIHdpZHRoPSI0IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiM3Nzg4OUYiLz4KPHBhdGggZD0iTTYgNS41QzYgNS4yMjM4NiA2LjIyMzg2IDUgNi41IDVIMjEuNUMyMS43NzYxIDUgMjIgNS4yMjM4NiAyMiA1LjVWNi41QzIyIDYuNzc2MTQgMjEuNzc2MSA3IDIxLjUgN0g2LjVDNi4yMjM4NiA3IDYgNi43NzYxNCA2IDYuNVY1LjVaIiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjYiIHk9IjEzIiB3aWR0aD0iMTYiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
        }
        &.jumbotron-radio-center-one input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDkuNUMxMCA5LjIyMzg2IDEwLjIyMzkgOSAxMC41IDlIMTcuNUMxNy43NzYxIDkgMTggOS4yMjM4NiAxOCA5LjVWMTAuNUMxOCAxMC43NzYxIDE3Ljc3NjEgMTEgMTcuNSAxMUgxMC41QzEwLjIyMzkgMTEgMTAgMTAuNzc2MSAxMCAxMC41VjkuNVoiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iMTIiIHk9IjE3IiB3aWR0aD0iNCIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjNzc4ODlGIi8+CjxwYXRoIGQ9Ik02IDUuNUM2IDUuMjIzODYgNi4yMjM4NiA1IDYuNSA1SDIxLjVDMjEuNzc2MSA1IDIyIDUuMjIzODYgMjIgNS41VjYuNUMyMiA2Ljc3NjE0IDIxLjc3NjEgNyAyMS41IDdINi41QzYuMjIzODYgNyA2IDYuNzc2MTQgNiA2LjVWNS41WiIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI2IiB5PSIxMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPC9zdmc+Cg==");
        }
        &.jumbotron-radio-left-two input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgOS41QzYgOS4yMjM4NiA2LjIyMzg2IDkgNi41IDlIMTMuNUMxMy43NzYxIDkgMTQgOS4yMjM4NiAxNCA5LjVWMTAuNUMxNCAxMC43NzYxIDEzLjc3NjEgMTEgMTMuNSAxMUg2LjVDNi4yMjM4NiAxMSA2IDEwLjc3NjEgNiAxMC41VjkuNVoiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iNiIgeT0iMTciIHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiM3Nzg4OUYiLz4KPHJlY3QgeD0iMTEiIHk9IjE3IiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjNzc4ODlGIi8+CjxwYXRoIGQ9Ik02IDUuNUM2IDUuMjIzODYgNi4yMjM4NiA1IDYuNSA1SDIxLjVDMjEuNzc2MSA1IDIyIDUuMjIzODYgMjIgNS41VjYuNUMyMiA2Ljc3NjE0IDIxLjc3NjEgNyAyMS41IDdINi41QzYuMjIzODYgNyA2IDYuNzc2MTQgNiA2LjVWNS41WiIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI2IiB5PSIxMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPC9zdmc+Cg==");
        }
        &.jumbotron-radio-center-two input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOCAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDkuNUMxMCA5LjIyMzg2IDEwLjIyMzkgOSAxMC41IDlIMTcuNUMxNy43NzYxIDkgMTggOS4yMjM4NiAxOCA5LjVWMTAuNUMxOCAxMC43NzYxIDE3Ljc3NjEgMTEgMTcuNSAxMUgxMC41QzEwLjIyMzkgMTEgMTAgMTAuNzc2MSAxMCAxMC41VjkuNVoiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iMTAiIHk9IjE3IiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjNzc4ODlGIi8+CjxyZWN0IHg9IjE1IiB5PSIxNyIgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzc3ODg5RiIvPgo8cGF0aCBkPSJNNiA1LjVDNiA1LjIyMzg2IDYuMjIzODYgNSA2LjUgNUgyMS41QzIxLjc3NjEgNSAyMiA1LjIyMzg2IDIyIDUuNVY2LjVDMjIgNi43NzYxNCAyMS43NzYxIDcgMjEuNSA3SDYuNUM2LjIyMzg2IDcgNiA2Ljc3NjE0IDYgNi41VjUuNVoiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iNiIgeT0iMTMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+Cjwvc3ZnPgo=");
        }
    }
    .pina-jumbotron-wrapper-centerOne,
    .pina-jumbotron-wrapper-centerTwo {
        .heading_control, textarea {
            text-align: center;
        }
    }
    .pina-jumbotron-wrapper-leftOne,
    .pina-jumbotron-wrapper-centerOne {
        .jumbotron-button-wrapper {
            width: 100%;
            float: none;
        }
        .jumbotron-button-right-wrapper {
            display: none;
        }
    }
    .pina-jumbotron-wrapper-leftTwo,
    .pina-jumbotron-wrapper-centerTwo {
        .jumbotron-button-wrapper {
            width: 49%;
            float: left;
        }
        .jumbotron-button-right-wrapper {
            padding-left: 1%;
        }
    }
    .form-control.c-a-btn {
        height: 30px;
        width: auto;
        min-width: 150px;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }
    .form-control.c-a-btn.button_one_input {
        background: #030303;
        border: 1px solid #030303;
        color: #fff;
        &::placeholder {
            color: #878787 !important;
        }
    }
    // 2-col-Flex
    .pina-col-justification-radio-left input::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSIxNSIgeT0iMTAiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iMTUiIHk9IjYiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iNyIgeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
    }
    .pina-col-justification-radio-right input::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSIxMCIgd2lkdGg9IjciIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSI2IiB3aWR0aD0iNyIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjE2IiB5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+Cjwvc3ZnPgo=");
    }
    .pina-col-justification-radio-center input::before {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSI2IiB3aWR0aD0iMTUiIGhlaWdodD0iNiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
    }
    .pina-2-col-row {
        display: flex;
        flex-flow: row nowrap;
        gap: 0px 10px;  // row-gap column gap
    }
    .pina-2-col-row-reverse {
        flex-direction: row-reverse;
    }
    .pina-2-col-row-disable, .pina-force-one-col-content .pina-2-col-row {
        flex-flow: column wrap;
    }
    .pina-col-a {
        width: 33%;
    }
    .pina-col-b {
        width: 66%;
    }
    .pina-2-col-row-disable, .pina-force-one-col-content {
        .pina-col-a, .pina-col-b {
            width: 100%;
        }
    }


    // Absatz Flex
    .pina-col-content {
        display: flex;
        flex-flow: row nowrap;
        gap: 0px 10px;  // row-gap column gap
        label {
            display: block;
            text-align: left;
        }
    }
    
    
    
    // centered
    :not(.pina-force-one-col-content) .pina-2-col-row.pina-2-col-row-disable {
        .pina-col-content {
            flex-flow: row nowrap;
            .pina-main-col {
                width: 800px;
                // outline: 2px solid lightseagreen;
            }
            .pina-secondary-col {
                width: calc(100% - 840px);
                // outline: 2px solid blue;
            }
        } 
    }

    .pina-force-one-col-content .pina-2-col-row.pina-2-col-row-disable {
        .pina-col-content {
            flex-flow: column wrap;
            .pina-main-col {
                width: 100%;
                // outline: 2px solid crimson;
            }
            .pina-secondary-col {
                width: 100%;
                max-width: 800px;
                // outline: 2px solid purple;
            }

        }
        
    }

    // left, right, special case: one column
    .pina-2-col-row:not(.pina-2-col-row-disable), .pina-2-col-row-reverse,
    .pina-force-one-col-content {
        .pina-col-content {
            flex-flow: row wrap;
            .pina-main-col {
                width: 100%;
                // outline: 2px solid violet;
            }
            .pina-secondary-col {
                width: 100%;
                max-width: 800px;
                // outline: 2px solid greenyellow;
            }
        }
        
    }
    
    // Position of the image 
    .pina-2-col-row .pina-main-col table.ce_table_container {
        align-self: flex-start;
        text-align: left;
    }
    .pina-force-one-col-content .pina-2-col-row-disable table.ce_table_container,
    .pina-2-col-row-disable table.ce_table_container {
        align-self: center;
        margin: auto;
    }
    
    .pina-2-col-row-reverse .pina-main-col table.ce_table_container {
        float: right;
    }
    


    // Article-Image Flex
    .image-justification-radio {
        
        &.image-justification-radio-left input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSIxNSIgeT0iMTAiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iMTUiIHk9IjYiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iNyIgeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
        }
        &.image-justification-radio-right input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSIxMCIgd2lkdGg9IjciIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSI2IiB3aWR0aD0iNyIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjE2IiB5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+Cjwvc3ZnPgo=");
        }
        &.image-justification-radio-center input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSI2IiB3aWR0aD0iMTUiIGhlaWdodD0iNiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
        }  
    }
    .pina-image-wrapper {
        // lorem ipsum background
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODY3IiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDg2NyAyMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjI2OSIgeT0iMzAiIHdpZHRoPSI2NSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB5PSIzMCIgd2lkdGg9IjM3IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQyIiB5PSIzMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjEwNyIgeT0iMzAiIHdpZHRoPSI3OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxOTEiIHk9IjMwIiB3aWR0aD0iNzMiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMzM5IiB5PSIzMCIgd2lkdGg9IjY3IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQxMSIgeT0iMzAiIHdpZHRoPSI5OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1MTQiIHk9IjMwIiB3aWR0aD0iMTkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTM4IiB5PSIzMCIgd2lkdGg9Ijg1IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjYyOCIgeT0iMzAiIHdpZHRoPSI0OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI2ODIiIHk9IjMwIiB3aWR0aD0iNDciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzM0IiB5PSIzMCIgd2lkdGg9IjMzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijc3MiIgeT0iMzAiIHdpZHRoPSI2NyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIyNjkiIHdpZHRoPSI0NCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzMTgiIHdpZHRoPSIyOCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0MDYiIHdpZHRoPSI4NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0OTciIHdpZHRoPSIxMjYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNjI4IiB3aWR0aD0iNDQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNjc3IiB3aWR0aD0iOTciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzc5IiB3aWR0aD0iNDkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3Qgd2lkdGg9IjkzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijk4IiB3aWR0aD0iNzMiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMTc2IiB3aWR0aD0iNDQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMjI2IiB3aWR0aD0iMzgiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeT0iMTUwIiB3aWR0aD0iNTIiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTciIHk9IjE1MCIgd2lkdGg9IjczIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjEzNSIgeT0iMTUwIiB3aWR0aD0iOTYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMjM2IiB5PSIxNTAiIHdpZHRoPSI2NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzMDciIHk9IjE1MCIgd2lkdGg9IjEzOCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0NTAiIHk9IjE1MCIgd2lkdGg9IjMxIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ4NiIgeT0iMTUwIiB3aWR0aD0iMjciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTE4IiB5PSIxNTAiIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1NzkiIHk9IjE1MCIgd2lkdGg9Ijc4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjY2MiIgeT0iMTUwIiB3aWR0aD0iOTQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzYxIiB5PSIxNTAiIHdpZHRoPSI1OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI4MjUiIHk9IjE1MCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjMxOCIgeT0iNjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNzMiIHk9IjYwIiB3aWR0aD0iNzciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNDU1IiB5PSI2MCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ3OCIgeT0iNjAiIHdpZHRoPSI3OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1NjIiIHk9IjYwIiB3aWR0aD0iNzMiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNjQwIiB5PSI2MCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijc0MSIgeT0iNjAiIHdpZHRoPSI0NSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI3OTEiIHk9IjYwIiB3aWR0aD0iMjkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeT0iNjAiIHdpZHRoPSI1OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI2MyIgeT0iNjAiIHdpZHRoPSI2NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxMzQiIHk9IjYwIiB3aWR0aD0iMzQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMTczIiB5PSI2MCIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIyNjkiIHk9IjE4MCIgd2lkdGg9IjkzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjY4IiB5PSIxODAiIHdpZHRoPSIxOTYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMzY3IiB5PSIxODAiIHdpZHRoPSI3MyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0NDUiIHk9IjE4MCIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ5NSIgeT0iMTgwIiB3aWR0aD0iMzgiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTM4IiB5PSIxODAiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1NjIiIHk9IjE4MCIgd2lkdGg9IjY2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHk9IjE4MCIgd2lkdGg9IjYzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjMwMiIgeT0iOTAiIHdpZHRoPSIzNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNDQiIHk9IjkwIiB3aWR0aD0iMTA5IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ1OCIgeT0iOTAiIHdpZHRoPSIzNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1MDAiIHk9IjkwIiB3aWR0aD0iNzciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTgyIiB5PSI5MCIgd2lkdGg9IjIzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjYxMCIgeT0iOTAiIHdpZHRoPSI1OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI2NzMiIHk9IjkwIiB3aWR0aD0iNTEiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzI5IiB5PSI5MCIgd2lkdGg9IjIyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijc1NiIgeT0iOTAiIHdpZHRoPSI1OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI4MjAiIHk9IjkwIiB3aWR0aD0iNDciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeT0iOTAiIHdpZHRoPSI4NyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI5MiIgeT0iOTAiIHdpZHRoPSIyNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxMjQiIHk9IjkwIiB3aWR0aD0iMTczIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjI2OSIgeT0iMTIwIiB3aWR0aD0iMjgiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTgzIiB5PSIxMjAiIHdpZHRoPSIxOTYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMzAyIiB5PSIxMjAiIHdpZHRoPSI2NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNzMiIHk9IjEyMCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQxMiIgeT0iMTIwIiB3aWR0aD0iOTEiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTA4IiB5PSIxMjAiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1MzAiIHk9IjEyMCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHk9IjEyMCIgd2lkdGg9IjkyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijk3IiB5PSIxMjAiIHdpZHRoPSI5MSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxOTMiIHk9IjEyMCIgd2lkdGg9IjE3IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjIxNSIgeT0iMTIwIiB3aWR0aD0iNDkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzg0IiB5PSIxMjAiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI4MzciIHk9IjEyMCIgd2lkdGg9IjIyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+Cjwvc3ZnPgo=");
        background-repeat: repeat-y;
        background-size: auto;
        table.ce_table_container {
            width: 100%;
        }
        &.pina-image-wrapper-right {
            background-position: calc(100% - #{$pina-fleximage-float-container-width}) 0px;
        }
        &.pina-image-wrapper-left {
            background-position: top right;
        }
        &.pina-image-wrapper-center {
            background-image: none;
        }
    }  
    .pina-image-flex {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAxMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+Cjwvc3ZnPgo=");        
        background-repeat: repeat-y;
        background-size: auto;
        background-position: top left;
        .visible-settings {
            display: block;
        }
        .form-group {
            text-align: left;
        }
        .pina-float-container {
            // outline: 1px solid red;
            width: $pina-fleximage-float-container-width;
            max-width: $pina-fleximage-float-container-width;
            margin: auto;
            padding: 0 0 0 0;
            background: #fff;
        }
        
    }
    .pina-image-wrapper-left {
        .pina-float-container {
            float: left;
            padding-right: $pina-fleximage-padding;
        }
        .pina-image-flex {
            background-position: $pina-fleximage-float-container-width 0;
        }
    }
    .pina-image-wrapper-right {
        .pina-float-container {
            float: right;
            padding-left: $pina-fleximage-padding;
        }
    }
    .pina-image-wrapper-center {
        text-align: center;
        table.ce_table_container {
            margin: auto;
        }
        .pina-image-flex {
            background-image: none;
        }
        .pina-float-container {
            width: 100%;
            max-width: 100%;
        }
    }
    // Hidden flex settings & toggle button styles
    .pina-flex-settings {
        display: none;
        padding-top: 20px;
        text-align: left;
    }
    .pina-toggle-flex-settings {
        margin: 20px 0 0 0;
        .btn-icon {
            position: relative;
        }
        .btn-icon:after {
            display: inline-block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 15px;
            height: 10px;
            font-size: 20px;
            font-weight: bold;
        }
       .btn-icon:after, 
       &.collapsed .btn-icon:after {
            content: '+';
        }
        &.expanded .btn-icon:after {
            content: '_';
            top: -7px;
        }
        .btn-label {
            padding-left: 20px;
        }
    }


    // Article-Quote Flex
    .quote-justification-radio {
        
        &.quote-justification-radio-left input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSIxNSIgeT0iMTAiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iMTUiIHk9IjYiIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIHJ4PSIwLjUiIGZpbGw9IiMxQzM4NUYiLz4KPHJlY3QgeD0iNyIgeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
        }
        &.quote-justification-radio-right input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSIxMCIgd2lkdGg9IjciIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSI2IiB3aWR0aD0iNyIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjE2IiB5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSI2IiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+Cjwvc3ZnPgo=");
        }
        &.quote-justification-radio-center input::before {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjkiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyOSAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iNyIgeT0iMTgiIHdpZHRoPSIxNSIgaGVpZ2h0PSIyIiByeD0iMC41IiBmaWxsPSIjMUMzODVGIi8+CjxyZWN0IHg9IjciIHk9IjE0IiB3aWR0aD0iMTUiIGhlaWdodD0iMiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8cmVjdCB4PSI3IiB5PSI2IiB3aWR0aD0iMTUiIGhlaWdodD0iNiIgcng9IjAuNSIgZmlsbD0iIzFDMzg1RiIvPgo8L3N2Zz4K");
        }

    }
    .pina-quote-wrapper {
        // lorem ipsum background
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODY3IiBoZWlnaHQ9IjIxMCIgdmlld0JveD0iMCAwIDg2NyAyMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjI2OSIgeT0iMzAiIHdpZHRoPSI2NSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB5PSIzMCIgd2lkdGg9IjM3IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQyIiB5PSIzMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjEwNyIgeT0iMzAiIHdpZHRoPSI3OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxOTEiIHk9IjMwIiB3aWR0aD0iNzMiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMzM5IiB5PSIzMCIgd2lkdGg9IjY3IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQxMSIgeT0iMzAiIHdpZHRoPSI5OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1MTQiIHk9IjMwIiB3aWR0aD0iMTkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTM4IiB5PSIzMCIgd2lkdGg9Ijg1IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjYyOCIgeT0iMzAiIHdpZHRoPSI0OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI2ODIiIHk9IjMwIiB3aWR0aD0iNDciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzM0IiB5PSIzMCIgd2lkdGg9IjMzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijc3MiIgeT0iMzAiIHdpZHRoPSI2NyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIyNjkiIHdpZHRoPSI0NCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzMTgiIHdpZHRoPSIyOCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNTEiIHdpZHRoPSI1MCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0MDYiIHdpZHRoPSI4NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0OTciIHdpZHRoPSIxMjYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNjI4IiB3aWR0aD0iNDQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNjc3IiB3aWR0aD0iOTciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzc5IiB3aWR0aD0iNDkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3Qgd2lkdGg9IjkzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijk4IiB3aWR0aD0iNzMiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMTc2IiB3aWR0aD0iNDQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMjI2IiB3aWR0aD0iMzgiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeT0iMTUwIiB3aWR0aD0iNTIiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTciIHk9IjE1MCIgd2lkdGg9IjczIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjEzNSIgeT0iMTUwIiB3aWR0aD0iOTYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMjM2IiB5PSIxNTAiIHdpZHRoPSI2NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzMDciIHk9IjE1MCIgd2lkdGg9IjEzOCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0NTAiIHk9IjE1MCIgd2lkdGg9IjMxIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ4NiIgeT0iMTUwIiB3aWR0aD0iMjciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTE4IiB5PSIxNTAiIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1NzkiIHk9IjE1MCIgd2lkdGg9Ijc4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjY2MiIgeT0iMTUwIiB3aWR0aD0iOTQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzYxIiB5PSIxNTAiIHdpZHRoPSI1OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI4MjUiIHk9IjE1MCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjMxOCIgeT0iNjAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNzMiIHk9IjYwIiB3aWR0aD0iNzciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNDU1IiB5PSI2MCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ3OCIgeT0iNjAiIHdpZHRoPSI3OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1NjIiIHk9IjYwIiB3aWR0aD0iNzMiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNjQwIiB5PSI2MCIgd2lkdGg9Ijk2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijc0MSIgeT0iNjAiIHdpZHRoPSI0NSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI3OTEiIHk9IjYwIiB3aWR0aD0iMjkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeT0iNjAiIHdpZHRoPSI1OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI2MyIgeT0iNjAiIHdpZHRoPSI2NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxMzQiIHk9IjYwIiB3aWR0aD0iMzQiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMTczIiB5PSI2MCIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIyNjkiIHk9IjE4MCIgd2lkdGg9IjkzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjY4IiB5PSIxODAiIHdpZHRoPSIxOTYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMzY3IiB5PSIxODAiIHdpZHRoPSI3MyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI0NDUiIHk9IjE4MCIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ5NSIgeT0iMTgwIiB3aWR0aD0iMzgiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTM4IiB5PSIxODAiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1NjIiIHk9IjE4MCIgd2lkdGg9IjY2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHk9IjE4MCIgd2lkdGg9IjYzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjMwMiIgeT0iOTAiIHdpZHRoPSIzNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNDQiIHk9IjkwIiB3aWR0aD0iMTA5IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQ1OCIgeT0iOTAiIHdpZHRoPSIzNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1MDAiIHk9IjkwIiB3aWR0aD0iNzciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTgyIiB5PSI5MCIgd2lkdGg9IjIzIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjYxMCIgeT0iOTAiIHdpZHRoPSI1OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI2NzMiIHk9IjkwIiB3aWR0aD0iNTEiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzI5IiB5PSI5MCIgd2lkdGg9IjIyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijc1NiIgeT0iOTAiIHdpZHRoPSI1OSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI4MjAiIHk9IjkwIiB3aWR0aD0iNDciIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeT0iOTAiIHdpZHRoPSI4NyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI5MiIgeT0iOTAiIHdpZHRoPSIyNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxMjQiIHk9IjkwIiB3aWR0aD0iMTczIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjI2OSIgeT0iMTIwIiB3aWR0aD0iMjgiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTgzIiB5PSIxMjAiIHdpZHRoPSIxOTYiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iMzAyIiB5PSIxMjAiIHdpZHRoPSI2NiIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIzNzMiIHk9IjEyMCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjQxMiIgeT0iMTIwIiB3aWR0aD0iOTEiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNTA4IiB5PSIxMjAiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI1MzAiIHk9IjEyMCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHk9IjEyMCIgd2lkdGg9IjkyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9Ijk3IiB5PSIxMjAiIHdpZHRoPSI5MSIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSIxOTMiIHk9IjEyMCIgd2lkdGg9IjE3IiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+CjxyZWN0IHg9IjIxNSIgeT0iMTIwIiB3aWR0aD0iNDkiIGhlaWdodD0iMTIiIGZpbGw9IiNFNUU1RTUiLz4KPHJlY3QgeD0iNzg0IiB5PSIxMjAiIHdpZHRoPSI0OCIgaGVpZ2h0PSIxMiIgZmlsbD0iI0U1RTVFNSIvPgo8cmVjdCB4PSI4MzciIHk9IjEyMCIgd2lkdGg9IjIyIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+Cjwvc3ZnPgo=");
        background-repeat: repeat-y;
        background-size: auto;
        table.ce_table_container {
            width: 100%;
        }
        &.pina-quote-wrapper-right {
            background-position: calc(100% - #{$pina-fleximage-float-container-width}) 0px;
        }
        &.pina-quote-wrapper-left {
            background-position: top right;
        }
        &.pina-quote-wrapper-center {
            background-image: none;
            text-align: left;
        }
    }
    .pina-quote-flex {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAxMCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEyIiBmaWxsPSIjRTVFNUU1Ii8+Cjwvc3ZnPgo=");
        background-repeat: repeat-y;
        background-size: auto;
        background-position: top left;
        .visible-settings {
            display: block;
        }
        .form-group {
            text-align: left;
        }
        .pina-float-container {
            // outline: 1px solid red;
            width: $pina-fleximage-float-container-width;
            max-width: $pina-fleximage-float-container-width;
            margin: auto;
            padding: 0 0 0 0;
            background: #fff;
        }

    }
    .pina-quote-wrapper-left {
        .pina-float-container {
            float: left;
            padding-right: $pina-fleximage-padding;
        }
        .pina-quote-flex {
            background-position: $pina-fleximage-float-container-width 0;
        }
    }
    .pina-quote-wrapper-right {
        .pina-float-container {
            float: right;
            padding-left: $pina-fleximage-padding;
        }
    }
    .pina-quote-wrapper-center {
        text-align: center;
        table.ce_table_container {
            margin: auto;
        }
        .pina-quote-flex {
            background-image: none;
        }
        .pina-float-container {
            width: 100%;
            max-width: 100%;
        }
    }




    // Article-Text Flex
    .pina-wrapper-iwe {
        padding: 0;
        margin: -8px;
        .cke_4 {
            width: auto !important;
        }
    }

    // Embeded Source Flex module
    .embeded-preview {
        background: url('/pina/images/embeded_map_image.svg') no-repeat 50% 50px;
        background-color: rgba(28, 56, 95, 0.3);
        color: $black;
        width: 100%;
        min-height: 270px;
        margin-bottom: 0px;
        text-align: center;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        .hint {
            display: inline-block;
            margin-bottom: 20px;
        }
        &.embeded-preview-map {
            background-image: none;
            align-items: flex-start;
            justify-content: flex-start;
            background-color: #fff;
            .hint {
                display: none;
            }
        }
    }

    // Tweet
    .pina-tweet-flex {
        padding-top: 5px;
    }
    .twitter-tweet-sample {
        border: 1px solid #c4cfd6;;
        margin: 0 auto 20px auto;
        min-height: 0px;
        min-width: 0px;
        max-width: 550px;
        position: relative;
        z-index: 0;
        padding: 12px 16px;
        border-radius: 12px;
        .tweet-icon  {
            float: right;
            width: 25px;
            height: 25px;
            svg {
                fill: #1b95e0;
            }
        }
        .tweet-usericon {
            float: left;
            margin-right: 10px;
            width: 40px;
            height: 40px;
            background: $gray-light;
            border-radius: 20px;
            align-self: flex-start;
        }
        .tweet-username {
            float: left;
            font-size: 22px;
            line-height: 16px;;
        }
    }
    .i-button.pina-update-tweet {
        margin: 0;
    }

    


    // Image Gallery Flex module

    .ic-preview {
        overflow: hidden;
        padding: 0 20px;
    }
    .ic-preview-wrapper {
        position: relative;
        max-width: 400px;
        height: 225px;
        margin: 20px auto 5px auto;
        .img_layer {
            background:  $gray-light;
            border: 1px solid #fff;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .img_layer_2 {
            top: -20px;
            left: -20px;
        }
        .img_layer_1 {
            top: -10px;
            left: -10px;
        }
        .img_layer_0 {
            // background:  #F4F6F8 url('/imperia/editmode-components/src/assets/image_icon.svg') no-repeat center;
            // background-size: 120px auto;
            background-color: #F4F6F8;
            background-repeat: no-repeat;
            background-size: 54% auto;
            background-position: 90% 60%;
            overflow: hidden;
            display: flex;
            align-items: center;
            border-color: $gray-light;
        }
        .ic-preview-image {
            max-width:100%;
            // max-height: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .ic-preview-counter {
            position: absolute;
            height: 154px;
            padding-top: 110px;
            line-height: 40px;
            color: #fff;
            width: 100%;
            bottom: -17px;
            text-align: left;
            padding-left: 20px;
            font-family: "Roboto Regular", Arial, sans-serif;  
            background-color: transparent;
            // background-image: linear-gradient(to top, rgba(81,81,81,0.35), rgba(81,81,81,0));
        }
    }
    .ic-preview-text {
        width: 100%;
        text-align: center;
    }
    // 'Hier fehlt ...'
    .ic-preview-init-msg {
        width: 100px;
        position: absolute;
        top: 20%;
        left: 10%;
        font-size: 2em;
        color: #868686;
        opacity: 0.7;
        font-size: 22px;
        line-height: 30px;
        font-family: "Roboto Regular", Arial, sans-serif; 
    }
    .ic-gallery-preview .img_layer_0 {
        background-image: url("/imperia/images/undraw_blank_canvas_3rbb.svg");

    }
    // .ic-linklist-preview .img_layer_0 {
    //     background-image: url('/imperia/editmode-components/src/assets/undraw_onboarding_o8mv.svg');

    // }
    .ic-preview-highlighted {
        .img_layer_1, .img_layer_0 {
        // background: #ffcc33;
        }
        .img_layer_0 {
            background-image: none;
            line-height: 190px;
        }
        .ic-preview-counter {
            background-image: linear-gradient(to top, rgba(81,81,81,0.35), rgba(81,81,81,0));
        }
        .ic-preview-init-msg {
            display: none;
        }
    }
    .mam_gallery_add {
        max-width: 400px;
        margin: auto;
        text-align: right;
    }
    .ic-add-image-btn .add_to_gallery {
        background: $blue;
        color: #fff;
        border-radius: 2px;
        border: 1px solid $blue;
        outline: none;
        font-family: "Roboto Regular", sans-serif;
        text-transform: uppercase;
        font-size: 13px;
        line-height: 14px;
        margin: 5px 0 5px 5px;
        padding: 7px 10px 6px 10px;
    }
    .ic-add-image-btn .add_to_gallery:focus {
        outline: 3px solid #FF9933;
    }
    
}