:root {
    --white: #ffffff;
    --red: #dc3545;
    --common-border-color: #D5DDEA;
    --brand-primary: #0051F9;
    --bg-hover-light: #f5f6f7;
    --font-heading-color: #313848;
    --small-ui-ele-bg: #EBF0F9;
    --bg-light-color: #F8F9FA;
    --font-para-color: #4C5A73;
    --info-color: #5B6880;
    --small-info-text: #647390;
    --header-height: 60px;
    --footer-height: 60px;
    --builder-left-panel-width: 25%;
    --builder-right-panel-width: 75%;
    --lable-ls: 0.05rem;
    --settings-navtab-color : #D5DDEA;
    --global-font: Inter ,system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";;
}

#vvveb-builder {
    @media only screen and (max-width: 1024px) {
        display: none;
    }
    .edw-icon {
        height: 24px;
        width: 24px;
    }
    .divider {
        height: 30px;
        border-left: 1px solid var(--common-border-color);
    }
    .nav.nav-tabs {
        display: flex;
    }
    [data-vvveb-action] {
        &:not([data-vvveb-action=""]) {
            &:hover,
            &.active {
                background-color: var(--bg-hover-light);
                border-radius: 6px;
                cursor: pointer;
            }
        }
    }

    #top-panel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 30px;
        height: var(--header-height);
        background-color: var(--white);
        border-bottom: 1px solid var(--common-border-color);

        #toggle-left-column-btn {
            cursor: pointer;
        }
        .header-right-controls{
            display: flex;
            align-items: center;
            gap: 20px;
            [data-vvveb-action]{
                &:hover,&.active{
                    filter: invert(34%) sepia(89%) saturate(7469%) hue-rotate(218deg) brightness(99%) contrast(107%);
                    background-color: unset;
                }
            }
        }
        #save-btn {
            display: flex;
            align-items: center;
            gap: 6px;
        }

    }

    #content-panel {
        width: 100%;
        display: flex;
        height: calc(100vh - var(--header-height) - var(--footer-height));
        #left-panel {
            flex: 0% 0 1;
            border-right: 1px solid var(--common-border-color);

            .nav.nav-tabs.edw-tabs {
                border: none;
                border-bottom: 3px solid var(--common-border-color);
                .nav-item {
                    flex: 1;

                    .nav-link {
                        display: flex;
                        position: relative;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding-top: 9px;
                        padding-bottom: 9px;
                        color: var(--font-heading-color);


                        &::after {
                            content: "";
                            position: absolute;
                            width: 100%;
                            top: 100%;
                        }
                        &.active {
                            background-color: transparent;
                            border: none;
                            &::after {
                                border-bottom: 3px solid var(--brand-primary);
                            }
                        }
                    }
                }
            }
            .tab-content {
                height: calc(100% - 60px);
                .tab-pane {
                    height: 100%;
                }
                #properties {
                    .component-properties {
                        #properties-tabs {
                            display: flex;
                            border: none;
                            margin: 0;
                            .nav-item {
                                flex: 1;
                                .nav-link {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background-color: var(--settings-navtab-color);
                                    margin: 0;
                                    padding: 10px 8px;
                                    border-radius: 0;
                                    border: none;
                                    box-shadow: none;
                                    &.active {
                                        background-color: var(--white);
                                    }
                                    span {
                                        color: var(--small-info-text);
                                        font-size: 12px;
                                        font-family: Inter;
                                        font-style: normal;
                                        font-weight: 600;
                                        line-height: 20px;
                                    }
                                }
                            }
                        }
                        .tab-content {
                            .tab-pane {
                                padding: 10px 20px;
                                label.header {
                                    color: var(--small-info-text);
                                    font-size: 14px;
                                    font-family: Inter;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 22px;

                                    margin: 0;
                                    padding: 10px 0;
                                    width: 100%;
                                    border: none;
                                    cursor: pointer;

                                    display: flex;
                                    justify-content: space-between;
                                    &:not(:first-child) {
                                        border-top: 1px solid var(--small-ui-ele-bg);
                                    }
                                }
                                input.header_check {
                                    &:checked {
                                        + div.section {
                                            padding: 10px 0 20px 0;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            #sections {
                .drag-elements-sidepane {
                    padding-top: 30px;
                    height: 100%;
                }
                .sections-container {
                    padding: 0 20px;
                    height: 100%;
                    .section-item {
                        position: relative;
                        margin-bottom: 20px;
                        padding: 18px 10px;
                        border-radius: 3px;
                        border: 1px solid var(--common-border-color);
                        background: #FFF;
                        &:hover {
                            box-shadow: 0px 13px 37px 0px rgba(92, 107, 121, 0.10);
                        }
                        .controls {
                            margin: 0;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            .left {
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                .handle {
                                    cursor: grab;
                                }
                                .info {
                                    .name {
                                        color: var(--info-color);
                                        font-size: 14px;
                                        font-family: Inter;
                                        font-weight: 600;
                                        line-height: 22px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        max-width: 170px;
                                    }
                                }
                            }
                            .right {
                                margin-right: 29px;
                                display: flex;
                                gap: 5px;
                                .edw-icon {
                                    .fa {
                                        height: 24px;
                                        width: 24px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                    }
                                }
                            }
                        }
                        .header_check {
                            &~ label {
                                margin: 0;
                            }
                            &:checked ~ label .fa:before {
                                transform: rotate(180deg);
                            }
                        }
                        .fa.fa-angle-down {
                            position: absolute;
                            right: 12px;
                            top: 18px;
                            padding: 0;
                            height: 24px;
                            width: 24px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            &::before {
                                font-size: 24px;
                            }
                        }
                        .tree {
                            &> ol li label {
                                background-size: 12px 16px;
                            }
                            &> ol li.file > label {
                                background-size: 14px 15px;
                            }
                        }
                    }
                }
            }

            #components-tabs {
                #components {
                    .search {
                        position: relative;
                        .form-control {
                            font-weight: 700;
                            padding: 10px 18px;
                            border: 1px solid var(--common-border-color);
                            width: calc(100% - 10px);
                            margin: 16px 5px 5px 5px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            line-height: 22px;
                        }
                        .clear-backspace {
                            position: absolute;
                            right: 10px;
                            top: 10px;
                            border: none;
                            background: transparent;
                            height: 24px;
                            width: 24px;
                        }
                    }
                    .components-list {
                        padding: 0 20px;
                        li.header {
                            &> input.header_check:checked + ol {
                                display: flex;
                            }
                            .header-arrow {
                                position: relative;
                                padding: 0;
                                width: 24px;
                                height: 24px;
                                display: flex;
                                right: 0;
                                justify-content: center;
                                transform: rotate(180deg);
                            }
                            &:not(:first-child) {
                                border-top: 1px solid var(--small-ui-ele-bg);
                            }
                        }
                        // label.header {
                        //     border: 1px solid var(--common-border-color);
                        // }
                        ol {
                            display: none;
                            gap: 10px;
                            flex-flow: wrap;
                            justify-content: center;
                            margin-bottom: 10px;
                            // padding: 5px 10px 0 10px;
                            li[data-type] {

                                width: 95px;
                                border: 1px solid var(--common-border-color);
                                padding: 10px 5px;
                                display: flex;
                                flex-direction: column-reverse;
                                justify-content: center;
                                align-items: center;
                                a {
                                    font-size: 14px;
                                    font-family: 'Inter';
                                    color: var(--small-info-text);
                                    font-size: 12px;
                                    font-family: Inter;
                                    font-style: normal;
                                    font-weight: 600;
                                    line-height: 22px;
                                }
                                img.preview {
                                    width: 50%;
                                }
                                span{
                                    white-space: pre-wrap;
                                    font-size: 12px;
                                }
                            }
                        }

                        label.header {
                            color: var(--small-info-text);
                            font-size: 14px;
                            font-family: Inter;
                            font-style: normal;
                            font-weight: 600;
                            line-height: 22px;

                            margin: 0;
                            padding: 10px 0;
                            width: 100%;
                            border: none;
                            cursor: pointer;

                            display: flex;
                            justify-content: space-between;
                            &:not(:first-child) {
                                border-top: 1px solid var(--small-ui-ele-bg);
                            }
                        }
                        // input.header_check {
                        //     &:checked {
                        //         + div.section {
                        //             padding: 10px 0;
                        //         }
                        //     }
                        // }
                    }
                }
            }
            /*Here we are making each input field of equal height*/
            input.form-control, select.form-select:not(.multiselect) {
                &:not([type='color']){
                    min-height: 40px;
                    max-height: 40px;
                }
            }
            .btn-group .btn {
                min-height: 40px;
                max-height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
            }
        }
        #right-panel {
            position: relative;
            display: flex;
            justify-content: center;
            height: 100%;
            flex: 100% 0 1;
            padding: 50px;
            overflow: auto;
            overflow-x: hidden;
            #canvas {
                position: relative;
                width: 100%;
                height: 100%;
                &.tablet {
                    width: 768px !important;
                }
                &.mobile {
                    width: 320px !important;
                }
                #iframe-wrapper {
                    width: 100%;
                    height: 100%;

                    #iframe-layer {
                        .loading-message {
                            display: none;
                            &.active {
                                display: flex;
                                justify-content: center;
                                position: absolute;
                                left: 0;
                                right: 0;
                                background: rgba(0, 0, 0, 0.5);
                                height: 100%;
                                align-items: center;
                                z-index: 1500;
                            }
                            img {
                                width: 80px;
                                height: 80px;
                            }
                        }
                    }
                    iframe {
                        width: 100%;
                        // height: 100%;
                    }
                }
            }
        }
        &.showleftpanel {
            #left-panel {
                flex: 25% 0 1;
            }
            #right-panel {
                flex: 75% 0 1;
            }
            + #bottom-panel {
                #bottom-left-panel {
                    visibility: initial;
                    flex: 25% 0 1;
                    [data-vvveb-action]{
                        &:hover,&.active{
                            filter: invert(34%) sepia(89%) saturate(7469%) hue-rotate(218deg) brightness(99%) contrast(107%);
                            background-color: unset;
                        }
                    }
                }
                #bottom-right-panel {
                    flex: 75% 0 1;
                }
            }
        }
    }

    #bottom-panel {
        width: 100%;
        display: flex;
        height: var(--footer-height);
        border-top: 1px solid var(--common-border-color);
        .footer-left-controls{
            display: flex;
            align-items: center;
            gap: 20px;
        }
        #bottom-left-panel {
            visibility: hidden;
            flex: 0% 0 1;
            border-right: 1px solid var(--common-border-color);
        }
        #bottom-right-panel {
            flex: 100% 0 1;
            #code-editor-btn {
                color: var(--font-heading-color);
                padding: 8px 12px;
                background: var(--bg-light-color);
                border-radius: 5px;
                border: none;
                &::hover {
                    background: darken(#F8F9FA, 0.4);
                }
            }
            #code-editor-close-btn {
                color: var(--white);
                padding: 8px 12px;
                background: var(--red);
                border-radius: 5px;
                border: none;
                &::hover {
                    color: var(--red);
                    background: darken(#F8F9FA, 0.4);
                    border: 1px solid var(--red);
                }
            }
            #vvveb-code-editor {
                .CodeMirror {
                    position: fixed;
                    left: 0;
                    right: 0;
                    bottom: 60px;
                    height: 350px;
                    width: 100%;
                    border: 5px solid var(--common-border-color);
                    z-index: 20;
                    .CodeMirror-scroll {
                        margin-bottom: 0;
                    }
                }

            }
        }
        #bottom-left-panel,
        #bottom-right-panel {
            display: flex;
            justify-content: right;
            align-items: center;
            padding: 18px 30px;
        }
    }

    &:not(.bottom-panel-expand) {
        #bottom-panel {
            #bottom-right-panel {
                #vvveb-code-editor {
                    .CodeMirror {
                        height: 0;
                        border: none;
                    }
                }
            }
        }
    }
    .small-text {
        font-size: 12px;
        line-height: 15px;
        font-weight: 600;
        font-family: inherit;
    }

    #add-section-box {

        min-height: 300px;
        max-height: 480px;
        position: fixed;
        background: var(--bs-body-bg);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
        border: 1px solid var(--bs-border-color);
        min-width: 500px;
        max-width: 700px;
        pointer-events: auto;
        display: none;
        z-index: 10;
        background: var(--bs-body-bg);
        .tab-content {
            max-width: 600px;
            #box-components,
            #box-blocks {
                .search {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 10px;
                    .searchfield {
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }
                    button {
                        background: #fff;
                        border: 1px solid #ccc;
                        border-radius: 5px;
                    }
                }
            }
            #box-blocks {
                ul.blocks-list {
                    ol {
                        display: flex;
                        gap: 10px;
                        width: 100%;
                        margin: 0;
                        flex-wrap: wrap;
                        li {
                            display: flex;
                            flex-direction: column-reverse;
                            justify-content: center;
                            align-items: center;
                            flex-basis: 23%;
                            min-width: 100px;
                            border: 1px solid #ccc;
                            gap: 10px;
                            margin: 0;
                            height: auto;
                            padding: 7px;
                            span.name {
                                font-size: 12px;
                                text-align: center;
                                text-wrap: wrap;
                            }
                        }
                    }
                }
            }
            #box-components {
                ol {
                    display: flex;
                    gap: 10px;
                    width: 100%;
                    margin: 0;
                    flex-wrap: wrap;
                    li {
                        display: flex;
                        flex-direction: column-reverse;
                        justify-content: center;
                        align-items: center;
                        // flex-basis: 23%;
                        max-width: 100px;
                        min-width: 100px;
                        border: 1px solid #ccc;
                        gap: 10px;
                        margin: 0;
                        height: auto;
                        padding: 7px;
                        span {
                            font-size: 12px;
                            text-align: center;
                            text-wrap: wrap;
                            white-space: pre-wrap;
                        }
                        img {
                            width: 50%;
                        }
                    }
                }
            }
        }

    }

    &.preview {
        .edw-rowcreator {
            display: none;
        }
        #content-panel {
            position: relative;
            height: calc(100vh - var(--header-height));
            #left-panel {
                flex: 0%;
                display: none;
            }
            #right-panel {
                flex: 100% 0 1;
            }
        }
        #bottom-panel {
            margin-top: - var(--footer-height);
        }
        .previewstatus {
            position: absolute;
            right: 0;
            bottom: 0;
            padding: 10px;
            background: rgba(0, 0, 0, 0.4);
            color: white;
            font-size: 14px;
            font-weight: 700;
            font-family: 'Inter';
            text-transform: uppercase;
            letter-spacing: 2px;
        }
    }
    &:not(.preview) {
        .previewstatus {
            display: none;
        }
    }
}

#edwiser-styles-modal,
#edwiser-script-modal {

    .modal-dialog {
        // max-width: 100%;

        .modal-content {
            border: 1px solid var(--common-border-color);
            // resize: both;
            // width: 472px;
            // min-width: 472px;
            // height: 492px;
            // min-height: 492px;
            .modal-header {
                padding: 24px;
                background: var(--small-ui-ele-bg);
                .modal-title {
                    font-family: inherit;
                    font-size: 1rem;
                    line-height: 28px;
                    font-weight: 600;
                    color: var(--font-heading-color);
                }
            }
            .modal-body {
                padding: 32px 24px;
                background: var(--white);
                overflow: hidden;

                textarea {
                    font-family: var(--global-font);
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 22px;
                    color: var(--font-para-color);
                    border: none;
                    height: 100%;
                    max-height: 100%;
                    resize: none;
                }
            }
        }
    }
}

#device-failure {
    display: none;
    @media only screen and (max-width: 1024px) {
        display: block;
        position: fixed;
        height: 100%;
        width: 100%;
        background: white;
        z-index: 1000;
        .modal {
            position: absolute;
            display: block;
            width: 340px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #f1f1f1;
            height: 20%;
            max-width: 100%;
            box-shadow: 0px 0px 10px 0px #eeeded;
        }
    }
}

.edw-rowcreator {
    .rowcontainer {
        // height: 100px;
        width: 536px;
        max-width: 100%;
        position: relative;
        margin: 50px auto;
        border: 1px dashed #5B6880;
        padding: 20px 63px;
        text-align: center;
        label {
            color: var(--font-heading-color);
            text-align: center;
            font-size: 12px;
            font-family: Inter;
            font-weight: 600;
        }
        .clickable-layer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: transparent;
            z-index: 1;
            cursor: pointer;
        }
    }
    .rowselectorbtn {
        .icon-container {
            height: 42px;
            width: 42px;
            border-radius: 50%;
            background: #0D6EFD;
            margin: 0 auto 10px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            .edw-icon {
                display: flex;
                align-items: center;
                &::before {
                    font-size: 24px;
                }
            }
        }
    }
    .rowselection {
        .close {
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }
        .columns {
            display: flex;
            height: 44px;
            gap: 30px;
        }
        .drow {
            height: 100%;
            flex: 1 1 0px;
            display: flex;
            gap: 5px;
            cursor: pointer;

            > div {
                background: var(--common-border-color);
                height: 44px;
                width: 100%;
            }
        }
    }
}
.rotate180 {
    transform: rotate(180deg) !important;
}
.rotate0 {
    transform: rotate(0deg)!important;
}

#content-left-panel-tab {
    .edwgroupheader {
        padding: 0;
        > div {
            padding: 0;
            margin: 0;
            .header {
                padding: 0;
                font-weight: 600;
                padding-bottom: 15px;
                padding-top: 5px;
                border-bottom: 1px solid #f1f0f0;
                letter-spacing: var(--lable-ls);
            }
        }
        &:not(:first-child) {
            padding-top: 30px!important;
        }
    }
    .edwinputfield,
    .edwfilefield,
    .edwcolorfield,
    .edwcheckfield,
    .edwslidedelbtn,
    .edwnewslidebtn {
        padding: 0;
        margin: 0;
        font-size: 12px;
        .input {
            padding: 0;
        }
        .form-label {
            padding-left: 0;
            display: flex;
            align-items: center;
            // letter-spacing: var(--lable-ls);
        }
    }
    .edwcolorfield,
    .edwcheckfield {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .form-label {
            margin: 0;
        }
    }
    .edwslidedelbtn {
        margin-top: -60px !important;
        .input {
            text-align: right;
        }
    }
    .edwnewslidebtn {
        text-align: right;
        padding: 30px 0 10px 0!important;
    }
}
#content-left-panel-tab,
#style-left-panel-tab,
#advanced-left-panel-tab {
    .form-label,.form-control,.form-select{
        font-size: 12px;
    }
    .section.row {
        gap: 16px 10px;
        .col-sm-4.form-label{
            margin-bottom: unset;
        }
        .col-sm-6 {
            width: calc(50% - 5px);
        }
    }
}
#style-left-panel-tab{
    .section.row {
        padding-top: 0px !important;
    }
}
.filepicker {
    gap: 10px;
    .edwiser-select-file{
        border-color: var(--bs-border-color);
        width: 40px;
    }
}
#content-left-panel-tab {
    .edwgroupheader {
        &.accordiontabtitle{
            padding-top: 24px !important;
        }
        &.rowseprator{
            padding: unset !important;
        }
        &.edwcustomtabwithaccordiontitle{
            padding-top: 16px !important;
        }

    }
    .accordiontabsetting{
        padding-left: 16px !important;
        // &:not(.edwslidedelbtn){
        //     margin-top: -15px !important;
        // }
    }
    .accordiontabaddtabbtn{
        padding: 0px 0 10px 0 !important;
    }
    .customaccordiondeletebutton,
    .customtabdeletebutton{
        & + div {
            margin-top: -24px !important;
          }
    }
}