@import "abstracts/abstracts";

// Custom variables

$color-admin: #3D84FC;
$color-admin-light: #677A9E;
$color-border-field: rgba($color-grey, .25);

// Hub icon

.wp-menu-image {

    > img {
        height: 18px;
        margin-top: -1px;
    }
}

// Hub styles

.ohio-theme_page_ohio_hub_dashboard,
.ohio-theme_page_ohio_hub_settings,
.toplevel_page_ohio_hub,
.ohio-theme_page_pt-one-click-demo-import {

    #wpcontent {
        padding-left: 0px;
    }

    #wpbody-content {
        padding-top: 5.25rem;

        > .notice {
            max-width: 1012px;
        }
    }

    .notice,
    .vc_license-activation-notice {
        margin-left: auto;
        margin-right: auto;

        .title {
            display: block;
            margin-bottom: 0.5rem;
        }

        .btn {
            margin-bottom: 0.5rem;
        }

        &:not(.notice-warning):not(.notice-error):not(.acf-admin-notice) {
            display: none;
        }
    }

    .acf-postbox {

        .ohio-acf-image-option-type {

            .naiot-item {
                width: calc(100% / 3);
            }
        }
    }

    .btn,
    .button {
        padding: 0px 9px;
        font-size: 14px;
        background-color: $color-admin;
        border: 1px solid $color-admin;
        color: $color-white;
        min-height: 30px;
        line-height: 1;
        display: inline-flex;
        transition-duration: .2s;
        box-shadow: none;
        cursor: pointer;
        text-decoration: none;

        @include align-items(center);
        @include border-radius;
        @include transition;

        &:hover,
        &:focus,
        &:active {
            background-color: darken($color-admin, 10%);
            border-color: darken($color-admin, 10%);
            box-shadow: none;
        }

        &.btn-outline {
            background-color: transparent;
            border-color: $color-black-light;
            color: $color-black;

            &:hover {
                background-color: $color-admin;
                border-color: $color-admin;
                color: $color-white;
            }
        }

        &.btn-large {
            padding: 12px 15px;
            font-size: 14,7px;
            font-weight: 500;
        }

        &.btn-activate {
            background-color: $color-success;
            border-color: $color-success;
            margin-bottom: 10px;

            &:hover {
                background-color: darken($color-success, 10%);
                border-color: darken($color-success, 10%);
            }
        }
    }

    // Spinner

    .preloader,
    .btn-spinner {

        &:before {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 5px;
            border: 2px solid rgba($color-white, .25);
            border-top-color: $color-white;
            animation: spinner 1s ease-in-out infinite;

            @include border-radius(50%);
        }

        &.btn-outline {

            &:before {
                border: 2px solid rgba($color-black, .25);
                border-top-color: $color-black;
            }
        }
    }

    @keyframes spinner {

        to { -webkit-transform: rotate(360deg); }
    }

    @-webkit-keyframes spinner {

        to { -webkit-transform: rotate(360deg); }
    }

    .acf-admin-notice {
        position: fixed !important;
        bottom: 30px;
        margin: 0 0 0 80px;
        left: 50%;
        color: $color-white;
        z-index: 100;
        background: rgba($color-success, .95);
        border-color: $color-success;
        border-left-width: 1px;
        box-shadow: none;
        margin: none;
        padding: 0px 15px !important;
        box-shadow: 0 2px 5px rgba(#000, .05);
        transition-duration: .35s;
        visibility: hidden;
        opacity: .5;
        transform: translate(-50%, 200%);

        @include flex;
        @include align-items(center);
        @include border-radius($radius-small);

        &.visible {
            visibility: visible;
            opacity: 1;
            transform: translate(-50%, 0);
        }

        p {
            font-size: 14px;
        }

        .notice-dismiss {
            position: initial;
            right: auto;
            top: auto;
            margin-right: -10px;

            &:before {
                color: $color-white;
            }
        }
    }
}

.clb-page {
    font-size: 14.7px;

    @include clearfix;

    .flex-top,
    .flex-center {

        @include flex;
    }

    .flex-top {

        @include align-items(flex-start);
    }

    .flex-center {

        @include align-items(center);
    }

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

    .wrap  {
        margin: 0;
    }

    mark {
        background: transparent;
    }

    * {
        box-sizing: border-box;
    }

    // Base overrides

    a, 
    .color-admin {
        text-decoration: none;
        color: $color-admin;
    }

    li {
        margin: 0;
    }

    table {
        width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        color: $color-black;
        font-weight: 500;
    }

    &-container {
        margin-left: auto;
        margin-right: auto;
        max-width: 1066px;
    }

    h2.clb-headline {
        margin: 25px 0 20px;
    }

    &-footer {
        padding: 20px 20px;
        border-top: 1px solid darken($color-border, 5%);
        margin-top: 20px;

        .clb-page-container {
            justify-content: space-between;
            color: darken($color-grey, 10%);
            font-size: 13.8px;

            @include flex;
            @include align-items(center);

            a {
                color: darken($color-grey, 10%);
                text-decoration: underline;

                .dashicons {
                    text-decoration: none;
                }
            }

            mark {
                color: darken($color-grey, 10%);
            }

            .social-networks {

                @include flex;
                @include align-items(center);
            }
        }
    }
}

// Main blocks

.clb-block-layout {
    padding: 20px;
    background-color: $color-white;
    border: 1px solid darken($color-border, 5%);

    @include border-radius;
}

// Intro

.clb-hub-intro {
    background-color: rgba(252, 252, 252, .9);
    padding: 10px 0;
    min-height: 72px;
    position: fixed;
    z-index: 10;
    left: 160px;
    right: 0;
    top: 32px;

    .clb-hub-container {
        justify-content: space-between;

        @include flex;
        @include align-items(center);
    }

    .details {
        line-height: 1.5;
        font-size: inherit;
        display: inline-flex;

        @include align-items(center);

        &-icon {
            background-image: url(../images/thumbnail_80x80.png);
            background-size: contain;
            background-repeat: no-repeat;
            height: 40px;
            width: 40px;
        }

        h1 {
            font-size: 1.2em;
            margin-left: 10px;
        }

        label {
            background-color: $color-grey;
            text-transform: uppercase;
            font-size: 11px;

            @include inline-flex;
            @include border-radius($radius-small);
        }

        > img {
            max-width: 40px;
        }
    }

    .mode-switcher-holder {

        @include flex;
        @include align-items(center);
    }

    .mode-switcher {

        @include flex;
        @include align-items(center);

        & + .button-publish-holder {
            margin-left: 15px;
        }

        .btn {
            white-space: nowrap;
            margin-left: -1px;

            &:not(.btn-outline) {
                border-color: $color-black-light;
                background-color: $color-black-light;
            }

            &:focus {
                box-shadow: none;
            }

            &:hover {
                background-color: $color-black-light;
            }

            &.btn-outline {

                &:hover {
                    background-color: $color-black-light;
                    border-color: $color-black-light;
                }
            }

            &:first-child {

                @include border-left-radius($radius-small);
                @include border-right-radius(0);
            }

            &:last-child {
                
                @include border-left-radius(0);
                @include border-right-radius($radius-small);
            }
        }
    }
}

// Steps

.clb-steps {
    margin: 10px 0 20px;
    align-items: flex-start;

    @include flex;

    &-item {
        padding-right: 20px;
        position: relative;
        width: 25%;

        p {
            font-size: .98em;
            padding-right: 20%;
        }

        &:after {
            content: "";
            position: absolute;
            height: 2px;
            left: 45px;
            right: 20px;
            top: 18px;
            background-color: $color-border;
        }

        &:last-child:after {
            display: none;
        }

        .step-number {
            justify-content: center;
            background-color: $color-border;
            height: 36px;
            font-size: 14px;
            width: 36px;
            font-weight: 500;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;

            @include flex;
            @include align-items(center);
            @include border-radius($radius-large);
        }

        p {
            margin: 0;
        }
    }
}

// Nav

.clb-nav {
    position: relative;

    .docs {
        position: absolute;
        right: 15px;
        top: 15px;
        color: $color-black-light;
    }

    &-inner {
        padding: 0 5px;
        margin: 20px 0;

        @include flex;
        @include align-items(center);

        .tab-item {

            @include clearfix;
        }

        .docs {
            float: right;
        }

        a {
            padding: 15px;
            display: block;
            font-size: 14.6px;
            color: $color-black-light;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition-duration: .2s;

            @media screen and (max-width: 1440px) {

                padding: 15px 14px;
            }

            &.selected {
                border-color: $color-black;
                color: $color-black;
            }

            &:focus,
            &:active {
                outline: none;
                box-shadow: none;
            }

            &:hover {
                border-bottom-color: lighten($color-black, 75%);
            }
        }

        li.active {

            a {
                border-color: $color-black;
                color: $color-black;
            }
        }
    }
}

.clb-accordion {

    .accordionItem_title {
        border: 1px solid darken($color-border, 8%);
        text-align: left;
        justify-content: space-between;
        padding: 12px 15px;

        @include flex;
        @include align-items(center);
        @include border-radius($radius-small);
        @include transition;

        &:hover {
            background-color: rgba($color-white, .5);
        }

        .ui-icon {
            display: none;
        }

        h6 {
            font-size: 15px;
            margin: 0;
        }
    }

    .accordionItem_content {
        padding: 0 0 20px 20px;

        .wrap {
            margin: 0;
        }

        ul {
            padding-left: 18px;

            li {
                border-top: 1px solid darken($color-border, 5%);
                padding: 10px 0px;
                list-style: circle;
            }
        }

        * {
            font-size: 15px;
        }
    }
}

// Group

.clb-group {
    border: 1px solid darken($color-border, 5%);
    background-color: $color-white;
    text-align: left;
    margin-bottom: 20px;
    line-height: 1.5;
    font-size: inherit;

    @include border-radius;

    .new {
        background-color: rgba($color-warning, .1);
    }

    .tips {
        display: inline-flex;
        justify-content: center;
        min-height: 22px;
        min-width: 22px;
        vertical-align: middle;
        margin-top: -2px;
        color: $color-black-light;

        @include align-items(center);

        i {
            font-size: 16px;
            display: inline-flex;

            @include align-items(center);
        }

        &:hover {
            color: $color-admin;
        }
    }

    label {

        & + .tips {
            margin: 0;
        }
    }

    &-50 {
        width: calc(50% - 26px);
        float: left;
    }

    ul {
        margin: 0;

        li {
            margin: 3px 0;

            @include flex;
            @include align-items(center);

            .dashicons {
                font-size: 14px;
                margin-right: 5px;

                @include flex;
                @include align-items(center);

                &-yes {
                    font-size: 17px;
                }
            }
        }
    }

    .small {
        font-size: 14px;
    }

    pre {
        font-family: Menlo, monaco, Consolas, Lucida Console, monospace;
        font-size: 0.82rem;
        margin: 5px 0;
    }

    label {
        padding: 3px 8px;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        display: inline-flex;
        background-color: $color-border;

        @include border-radius;
        @include align-items(center);

        &.active {
            background-color: rgba($color-success, .28);

            mark {
                color: darken($color-success, 5%);

                &:before {
                    background: darken($color-success, 5%) !important;
                    box-shadow: 0 0 0 3px rgba($color-success, 0.5) !important;
                }
            }
        }

        &.inactive {
            background-color: rgba($color-red, .18);

            mark {
                color: $color-red;
            }
        }
    }

    &-headline,
    &-details,
    &-content,
    &-footer {
        padding: 15px 20px;
    }

    &-headline {
        justify-content: space-between;
        border-bottom: 1px solid darken($color-border, 3%);
        min-height: 56px;
        padding-top: 12px;
        padding-bottom: 12px;

        @include flex;
        @include align-items(center);

        h3 {
            font-size: 1.06em;
            font-weight: 500;
            margin: 0;

            @include flex;
            @include align-items(center);

            svg {
                margin-right: 6px;
                fill: $color-admin-light;
            }
        }

        & + .clb-group-footer {
            border: none;
        }
    }

    &-details {
        color: $color-grey;
        border-bottom: 1px solid darken($color-border, 3%);

        &.clb-group-table {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    &-outline {
        background-color: transparent;
    }

    &-warning {
        border-color: lighten($color-warning, 25%);
        background-color: lighten($color-warning, 33%);

        .dashicons {
            color: $color-warning;
        }

        .clb-group-headline,
        .clb-group-details {
            border-color: lighten($color-warning, 25%);

            svg {
                fill: $color-warning;
            }
        }
    }

    &-success {
        border-color: lighten($color-success, 30%);
        background-color: lighten($color-success, 45%);

        .dashicons {
            color: $color-success;
        }

        .clb-group-headline {
            border-color: lighten($color-success, 30%);

            svg {
                fill: $color-success;
            }
        }
    }

    .clb-group-table {
        padding-left: 0;
        padding-right: 0;
        font-size: .98em;
    }

    .table-col-2,
    .table-col-3 {

        td {
            padding: 3px 20px;

            &:nth-child(1) {
                width: 50%;
            }

            span {
                color: $color-grey-light;
            }
        }

        &.table-col-equal {

            td {
                &:nth-child(1),
                &:nth-child(2),
                &:nth-child(3) {
                    width: calc(100%/3);
                }
            }
        }

        mark {
            display: inline-flex;
            justify-content: center;
            vertical-align: middle;
            margin-left: 3px;

            @include align-items(center);

            &.yes,
            &.active,
            &.no {

                &:before {
                    content: "";
                    background-color: rgba($color-black-light, .75);
                    height: 4px;
                    width: 4px;
                    margin-right: 10px;
                    box-shadow: 0 0 0 3px rgba($color-black-light, .25);

                    @include border-radius(50%);
                }
            }

            &.active {
                color: $color-success;

                &:before {
                    background-color: $color-success;
                    box-shadow: 0 0 0 3px rgba($color-success, .3);
                }
            }

            &.no {
                color: $color-red;

                &:before {
                    background-color: $color-red;
                    box-shadow: 0 0 0 3px rgba($color-red, .3);
                }
            }
        }
    }

    .table-col-2 {

        td {

            &:nth-child(2) {
                width: 50%;
            }
        }
    }

    .table-col-3 {

        td {

            &:nth-child(2),
            &:nth-child(3) {
                width: 25%;
            }
        }
    }

    &-footer {
        justify-content: space-between;
        color: darken($color-grey, 10%);
        border-top: 1px solid darken($color-border, 3%);

        @include flex;
        @include align-items(center);
    }
}

// Group with sidebar

.clb-group-sidebar-layout {
    align-items: flex-start;

    @include flex;

    .col {
        &:first-child {
            min-width: 65%;
            flex-wrap: wrap;

            @include flex;

            .clb-group {
                min-width: calc(50% - 20px);
                margin-right: 20px;
            }
        }

        &:last-child {
            min-width: 35%;
        }

        .articles {
            flex-wrap: wrap;

            @include flex;

            li {
                min-width: 50%;
            }
        }
    }
}

/*==================================================================
ACF Fields Styles
===================================================================*/

.acf-settings-wrap {

    .postbox {
        border-color: darken($color-border, 3%);
        box-shadow: none;

        @include border-radius;
    }

    #poststuff {
        padding-top: 0;
    }

    .postbox-header {
        border-color: darken($color-border, 3%);
    }

    #poststuff {
    .stuffbox>h3, 
        h2, 
        h3.hndle {
            font-size: 16px;
            font-weight: 500;
            padding: 12px 20px;
            margin: 0;
            min-height: 56px;
        }
    }
}

// Grid

// .col-3,
// .col-4,
// .col-6 {
//     float: left;
//     padding-right: 20px;
//     box-sizing: border-box;
//     margin-bottom: 5px;
// }

// .col-3:last-of-type,
// .col-4:last-of-type,
// .col-6:last-of-type {
//     padding-right: 0;
// }

// .col-3 {
//     width: calc(100% / 4);
// }

// .col-4,
// .ohio-acf-typo-field-content .xl-col3,
// .ohio-acf-sizes-field-content .xl-col3 {
//     width: calc(100% / 3);
// }

// .col-6 {
//     width: calc(100% / 2);
// }

.acf-postbox {
    font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 15px;

    * {
        box-sizing: border-box;
        color: $color-black-light;
        font-style: normal;
    }

    h2 {
        color: $color-black;
    }

    h4 {
        color: darken($color-grey, 10%);
        margin: 10px 0 5px 0;
        font-weight: 400;
    }

    a {
        color: $color-admin;

        &.acf-icon {

            &:hover {
                background: $color-neutral-6;
                border-color: $color-admin;
                color: $color-admin;
            }

            &.-minus,
            &.-cancel {

                &:hover {
                    background: $color-neutral-6;
                    border-color: $color-red;
                    color: $color-red;
                }
            }
        }
    }

    ul.acf-checkbox-list,
    ul.acf-radio-list {
        margin: 4px 0;
    }

    // Inherited checkbox

    .ohio-acf-inherited-checkbox-type {

        @include flex;
        @include align-items(center);

        .custom_option {

            @include flex;
            @include align-items(center);
        }

        .inherited_option {
            margin-right: 18px;

            @include flex;
            @include align-items(center);
        }
    }

    .typography_inheritance_row {
        margin-bottom: 12px;

        @include flex;
        @include align-items(center);

        label {
            margin-right: 18px;

            @include flex;
            @include align-items(center);
        }
    }

    ul.acf-radio-list.acf-hl,
    ul.acf-checkbox-list.acf-hl {

        li {
            margin-right: 18px;
        }
    }

    .acf-field .acf-input,
    ul.acf-radio-list li label, 
    ul.acf-checkbox-list li label {
        font-size: 13.7px;
    }

    ul.acf-radio-list li label {

        @include flex;
        @include align-items(center);
    }

    ul.acf-radio-list li input[type="checkbox"], 
    ul.acf-radio-list li input[type="radio"], 
    ul.acf-checkbox-list li input[type="checkbox"], 
    ul.acf-checkbox-list li input[type="radio"] {
        margin: 0px 6px 0px 0px;
    }

    .acf-file-uploader {

        p {
            flex-wrap: wrap;
            flex-direction: column-reverse;

            @include flex;

            .button {
                margin: 3px 0;
                text-align: center;
            }
        }
    }

    .acf-fields {

        .acf-icon {

            &:before {
                vertical-align: middle;
            }
        }

        &.-left {

            > .acf-tab-wrap {

                .acf-tab-group {
                    padding-left: 5px;
                    padding-right: 5px;
                    background: transparent;
                }
            }

            > .acf-field {

                &:before {
                    background: transparent;
                }

                > .acf-label {
                    width: 26%;
                }

                > .acf-input {
                    width: 74%;
                }

                &.acf-field-message {
                    border-bottom: 1px solid $color-border;
                    background-color: $color-neutral-6;

                    > .acf-label,
                    > .acf-input {
                        padding: 0;
                        width: 100%;
                    }

                    h4 {
                        margin: 15px 20px;
                    }

                    .message {
                        background-color: rgba($color-warning, .12);
                        border-left: 5px solid rgba($color-warning, .75);
                        color: rgba(#000, .75);
                        padding: 15px 20px 15px 16px;
                        margin: 0 0 -1px 0;
                        font-size: 14px;

                        b {
                            font-weight: 600;
                        }
                    }
                }

                &.acf-field-tab {

                    & + .acf-field-message {
                        border-top: none;
                    }

                    & + .acf-field {

                        &:not(.acf-field-message) {
                            padding-top: 5px;
                        }
                    }
                }
            }
        }

        > .acf-field {

            &:not(.acf-field-message) {
                border: none;
            }
        }

        .acf-tab-wrap {
            border-bottom: 1px solid $color-border;
            background-color: transparent;
        }

        .wp-picker-input-wrap {
            margin: 3px 0;

            input[type="text"] {
                margin: 0;
                padding-left: 5px;
                padding-right: 5px;
            }

            .wp-color-result-text,
            .button.button-small.wp-picker-clear {
                font-size: 13.4px;
            }
        }

        .wp-color-result-text {
            line-height: 26px;
            padding: 0 8px;
            font-size: 13.4px;
            background: lighten($color-grey, 55%);

            @include transition;

            &:hover {
               background: lighten($color-grey, 45%);
            }
        }

        // Background field type

        &.acf-clone-fields {
            border-color: $color-border;
            background-color: $color-neutral-6;
            margin-bottom: 5px;

            @include border-radius($radius-small);

            > .acf-field {
                padding: 0px 20px 15px;

                &:first-child {
                    padding-top: 15px;
                    padding-bottom: 15px;
                }

                .acf-label {
                    margin-bottom: 5px;

                    label {
                        font-size: 14px;
                        color: darken($color-black-light, 10%);
                    }
                }

                p.description {
                    color: $color-black-light;
                }

                &.acf-field-radio {

                    .acf-label {
                        display: none;
                    }
                }
            }
        }

        // Buttons
        .acf-button,
        .button,
        .button-group.button-small .button,
        .button.button-small.wp-picker-clear,
        .button.button-small.wp-picker-clear,
        .button.button-small,
        .button-secondary {
            border-color: $color-border-field;
            background: $color-neutral-8;
            height: 28px;
            min-height: 28px;
            line-height: 26px;
            font-weight: 600;
            font-size: 14px;
            color: inherit;
            text-shadow: none;
            box-shadow: none;

            @include border-radius($radius-small);

            &:hover,
            &:active,
            &:focus {
                border-color: darken($color-border-field, 20%);
                background: $color-neutral-25;
                color: $color-black;
                box-shadow: none;
                outline: none;
            }

            &:focus {
                border-color: $color-admin;
                background: $color-neutral-6;
            }
        }

        .link-wrap {
            border-color: $color-border-field;

            @include border-radius($radius-small);
        }

        .acf-image-uploader {

            p {
                font-size: 0;
            }

            .image-wrap {

                img {
                    max-width: 110px;
                    padding: 0.5rem;
                    background-color: $color-neutral-15;

                    @include border-radius;

                    &[src$=".svg"] {
                        max-height: 50px;
                        min-height: 46px;
                    }
                }
            } 
        }

        input[type=checkbox],
        input[type=radio] {
            border-color: $color-border-field;
            background-color: $color-neutral-6;
            margin: 0px 6px 0px 0px;
        }

        input[type=radio] {
            box-shadow: none;

            &:focus {
                border-color: $color-admin;
            }

            &:checked:before {
                height: 8px;
                width: 8px;
                margin: 3px;
                background: $color-admin;
            }
        }

        input[type=checkbox] {
            box-shadow: none;

            @include border-radius($radius-small);

            &:focus {
                border-color: $color-admin;
            }

            &:checked:before {
                color: $color-admin;
            }
        }

        .wp-color-result {
            background: $color-neutral-8;
        }

        > .acf-field {
            border-color: $color-border;
        }

        select {
            -webkit-appearance: button;
        }

        // Fileds
        
        .CodeMirror,
        select,
        input[type=color],
        input[type=date],
        input[type=datetime-local],
        input[type=datetime],
        input[type=email],
        input[type=month],
        input[type=number],
        input[type=password],
        input[type=search],
        input[type=tel],
        input[type=text],
        input[type=time],
        input[type=url],
        input[type=week],
        .select2-selection--multiple,
        .select2-selection--single,
        .acf-input-prepend, 
        .acf-input-append {
            margin: 3px 0;
            padding-left: 8px;
            padding-right: 8px;
            min-height: 28px;
            height: 28px;
            vertical-align: top;
            border-color: $color-border-field;
            box-shadow: none;
            background: transparent;
            color: $color-black;

            @include border-radius($radius-small);

            &:hover {
                border-color: darken($color-border-field, 20%);
            }

            &:focus {
                border-color: $color-admin;
                box-shadow: none;
            }

            &::-webkit-input-placeholder {
                color: darken($color-grey, 15%);
            }

            :-ms-input-placeholder {
                color: darken($color-grey, 15%);
            }

            ::placeholder {
                color: darken($color-grey, 15%);
            }  
        }

        input,
        select,
        textarea {
            color: $color-black;
            border-color: $color-border-field;

            &:focus {
                border-color: $color-admin;
                box-shadow: none;
            }
        }

        input.acf-is-appended {

            @include border-radius($radius-small);
        }

        // Select2

        .select2-container.-acf  {

            .select2-selection {
                border-color: $color-border-field;
                padding-left: 0px;
                padding-right: 0px;
            }
        }

        .select2-container .select2-search--inline .select2-search__field {
            margin-top: 0px;
        }

        .select2-container--default {

            .select2-selection--single {

                .select2-selection__arrow {
                    top: 6px;
                }

                .select2-selection__placeholder {
                    color: inherit;
                }    
            }
            
            .select2-selection--multiple {

                .select2-selection__choice {
                    border: 1px solid rgba(#000, .1);
                    background-color: rgba($color-admin-light, .15);
                    margin: 3px 3px 0 0;
                    height: 20px;

                    @include flex;
                }

                .select2-selection__choice__remove {
                    color: $color-grey;
                }
            }
        }

        .CodeMirror {
            height: 250px !important;
            min-height: inherit;
            border-width: 1px;
            border-style: solid;
            padding: 0px;
            
            .CodeMirror-scroll {
                overflow-x: hidden !important;       
            }

            .CodeMirror-gutters {
                background: $color-neutral-6;
            }
        }

        input[type=url] {
            padding-left: 20px;
        }

        .acf-url {

            i {
                display: inline-block;
                color: darken($color-grey, 10%);
            } 
        }

        .acf-input-prepend, 
        .acf-input-append {
            background: $color-neutral-6;
            line-height: 18px;
            color: darken($color-grey, 15%);
        }

        .acf-input-append {
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        .acf-input-prepend {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .acf-field {

            .acf-label {

                label {
                    margin: 0;
                    font-size: 14px;
                    font-weight: 600;
                    cursor: default;
                    color: $color-black;
                }
            }

            p.description {
                font-size: 13.6px;
                line-height: 18px;
                padding: 5px 0;
                font-style: normal;
                color: $color-black-light;

                span {
                    margin-left: -12px;
                    margin-right: 6px;
                }

                em {
                    font-weight: 500;
                    color: darken($color-grey, 10%);
                }
            } 
        }

        /*Left Column*/

        &.-left {

            > .acf-field {
                padding: 0px;

                &:before {
                    border: none;
                }

                > .acf-input {
                    padding: 15px 20px;

                    // .col-4,
                    // .col-3 {

                    //     label {
                    //         display: inline-block;
                    //         margin-bottom: 3px;
                    //         font-weight: 600;
                    //     }  
                    // }
                }

                > .acf-label {
                    padding: 15px 20px 10px;
                }
            }
        }

        h9 {
            font-weight: 600;
            display: block;
            font-size: 15px;
            margin: 9px 0 11px;
        }

        .icon {
            font-size: 16px;
            vertical-align: middle;
            margin-top: -2px;
            display: inline-block
        }

        // Tabs Styles

        > .acf-tab-wrap {

            .acf-tab-group {
                padding: 0px;
                border: none;

                li {
                    margin: 0px;
                    background: transparent;

                    a {
                        border: none;
                        border-bottom: 2px solid transparent;
                        background: transparent;
                        padding: 10px 15px;
                        font-weight: 400;
                        color: inherit;
                        transition: initial;
                        transition-property: border-color;
                        transition-duration: .2s;

                        &:hover {
                            border-bottom-color: lighten($color-black, 75%);
                        }
                    }

                    &.active {

                        a, a:hover {
                            background: $color-white;
                            border-bottom-color: $color-black;
                            font-weight: 600;
                            color: $color-black;
                        }
                    }
                }
            }
        }
    }

    // ACF Notif Styles

    .ohio-admin-notif {
        background-color: $color-white;
        border-left: 4px solid $color-admin;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);

        a.button-primary {
            background-color: $color-admin;
            border-color: $color-admin;
            color: #efefef;
            box-shadow: 0 1px 0 rgba(0, 0, 0, .14);
            text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
            line-height: 24px;

            &:hover {
                background-color: #405af9;
                border-color: #405af9;
                box-shadow: none;
                color: $color-white;
            }
        }

        p {
            padding: 0;
            margin: 5px 0 0;
            line-height: 20px;

            &:first-child {
                margin-top: 10px;
            }

            &.links {
                margin: 12px 0 10px;
            }
        }
    }

    // ACF Filed Content Styles

    .ohio-acf-typo-field-content,
    .ohio-acf-sizes-field-content,
    .ohio-color-field-content {

        .row {
            margin-bottom: 10px;
            clear: both;

            &:after {
                content: '';
                clear: both;
                display: block;
            }

            &.font-picker {
                position: relative;
                padding-bottom: 10px;
            }
        }
        
        .xl-col3 {
            float: left;
            padding-right: 20px;
            width: calc(100% / 3);

            &:last-child {
                padding: 0;
            }
        }

        .checkboxes {
            font-size: 0;

            &:first-child {
                padding-top: 6px;
            }
            
            label {
                font-size: 13px;
            }
        }

        .font-preview {
            padding: 12px 15px;
            border: none;
            background-color: rgba($color-admin, .1);
            font-size: 14px;
            border-left: 5px solid rgba(0, 0, 0, .1);
            margin-top: 15px;

            @include border-radius($radius-small);
        }

        span {

            &.no_content {
                display: block;
                padding: 8px 0 0 0;
                color: darken($color-grey, 10%);
            }
        }

        .label {
            margin: 3px 0px;
            display: block;

            span {
                opacity: 1;
                color: darken($color-grey, 10%);
            }
        }
    }

    @-webkit-keyframes stretchdelay {

        0%, 40%, 100% { -webkit-transform: translateY(-10px) }  
        20% { -webkit-transform: translateY(-20px) }
    }

    @keyframes stretchdelay {

        0%, 40%, 100% { 
            transform: translateY(-10px);
            -webkit-transform: translateY(-10px);
        } 20% {
            transform: translateY(-20px);
            -webkit-transform: translateY(-20px);
        }
    }

    @media (max-width: 1200px) {

        .ohio-acf-typo-field-content .sm-col1,
        .ohio-acf-sizes-field-content .sm-col1 {
            width: 100%;
        }
    }

    // ACF Tables Styles

    .acf-field-clone {

        .acf-th {
            font-weight: 600;
            font-size: 13px;
            padding: 0 8px;
            border: none;

            & {
                padding-left: 0;
                color: inherit;
            }
        }

        table,
        table > tbody > tr > td {
            border: none;
        }
    }

    .acf-icon.small, 
    .acf-icon.-small {
        line-height: 20px;
    }

    .acf-repeater {

        .acf-row-handle {

            &.order + td,
            &.remove {
                border-color: $color-border;
            }

            &.order,
            &:first-child,
            &:last-child {
                background: lighten($color-neutral-6, 40%);
            }
        }

        .acf-table {
            border-color: $color-border;

            > tbody,
            > thead {

                > tr {

                    > td,
                    > th {
                        padding: 6px 8px;
                        border-color: $color-border;
                    }
                    
                    > td:first-child,
                    > th:first-child {
                        padding-left: 0;
                    }

                    > th:first-child {

                        @include border-left-radius($radius-small);
                    }

                }
            }
        }    
    }

    .acf-table {

        > tbody,
        > thead {

            > tr {

                > td,
                > th {
                    padding-right: 20px;
                    padding-left: 0px;
                }
            }
        }
    }

    // ACF Image Option Styles

    .ohio-acf-image-option-type {
        margin-top: 5px;
        padding: 0;
        flex-wrap: wrap;
        margin-right: -$grid-spacer;

        @include flex;

        .naiot-item {
            margin: 0;
            width: calc(100% / 4);
            padding-right: 20px;
            height: auto;
            box-sizing: border-box;

            @include note-screen {

                width: calc(100% / 3);
            }

            img {
                width: 100%;
                height: auto;
                vertical-align: top;
            }

            .naiot-container {
                height: auto;
                width: auto;
                background: 0 0;
                border: none;
            }

            .naiot-description {
                width: auto;
                margin: 0 0 16px;
                font-size: 13px;
                height: auto;
                padding: 6px 0;
                font-style: normal;

                @include border-bottom-radius;
            }

            &:not(.naiot-item--active) {

                .naiot-container {

                    @include border-radius;
                }

                img {

                    @include border-radius;
                }
            }

            // Active

            &.naiot-item--active {

                img {

                    @include border-top-radius;
                }

                .naiot-container {
                    box-shadow: none;
                    background-color: rgba($color-admin-light, .4);

                    @include border-top-radius;
                }

                .naiot-description {
                    background: $color-admin;
                    color: $color-white;
                }
            }

            &:hover {

                .naiot-container {
                    box-shadow: 0 2px 5px rgba(0, 0, 0, .06);
                }
            }
        }
    }

    // ACF Switcher Styles

    .acf-switch {
        border-color: $color-border-field;
        background: $color-neutral-35;
        box-shadow: none;
        height: auto;
        vertical-align: middle;
        padding: 0 3px;
        margin: 3px 0;

        &:hover, 
        &.-focus {
            background: $color-neutral-50;
        }

        &,
        .acf-switch-slider {

            @include border-radius(14px);
        }

        .acf-switch-on {
            text-shadow: none;
            font-size: 0;
        }

        span {
            padding: 0;
            height: 18px;
            font-size: 0;
            min-width: 13px;
        }

        .acf-switch-slider {
            border: none;
            right: 50%;
        }

        &.-on {
            border-color: $color-admin;
            background: $color-admin;

            &:hover {
                background-color: lighten($color-admin, 10%);    
            }
        }

        &.-on {

            .acf-switch-slider {
                border: none;
                left: 50%;
            }
        }
    }
}

// Color picker

.wp-picker-container {
    
    &,
    &.vc_color-picker {
        display: inline-block;

        .wp-picker-holder {
            position: absolute !important;
            box-shadow: 0 20px 32px -8px rgba($color-black, .25), 0 0 1px rgba($color-black, .15);
            z-index: 1000;

            @include border-radius;

            .iris-picker {
                margin-top: 0px;
                border: none;

                @include border-top-radius;
            }

            .cs-alpha-wrap {
                border: none;

                @include border-bottom-radius;
            }

            * {
                box-sizing: initial;
            }

            .vc_alpha-container {
                left: 0px;
                bottom: -55px;
                border: none;
                @include border-bottom-radius; 
                box-shadow: 0 20px 32px -8px rgba($color-black, .25), 0 0 1px rgba($color-black, .15);
            }
        }

        .wp-color-result {

            &.button {
                padding-left: 22px;
                min-height: 28px;
                margin: 3px 6px 3px 0;
                border-color: $color-border-field;
            }
        }
    }
}