@use "../styles/base/typography-variables" as t;
@use "../styles/base/colors" as c;
@use "sass:map";
@use "sass:math";

.stdt {
    &-fade-enter-active, &-fade-leave-active {
        transition: opacity .3s;
    }
    &-fade-enter, &-fade-leave-to {
        opacity: 0;
    }

    &-slide-right-leave-active,
    &-slide-right-enter-active {
        transition: transform .3s;
    }
    &-slide-right-enter {
        transform: translate(100%, 0);
    }
    &-slide-right-leave-to {
        transform: translate(100%, 0);
    }
}

.cly-bullet {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    &--green{
        background-color: #12AF51;
    }
    &--blue{
        background-color: #017AFF;
    }
    &--yellow{
        background-color: #CDAD7A;
    }
    &--red{
        background-color: #D23F00;
    }
    &--orange {
        background-color: #F96300;
    }
    &--blinking {
        animation: blinker 1.5s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
    }
    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }
}

.cly-vue-notification {
    &__alert-box {
        align-items: center;
        border: 1px solid;
        box-sizing: border-box;
        border-radius: 12px;
        min-height: 48px;
        font-weight: 400;

        // .cly-vue-notification__alert-box__close-icon
        &__close-icon {
            cursor: pointer;
            color: #81868D;

            // .cly-vue-notification__alert-box__close-icon:hover
            &:hover {
                color: #333C48;
            }
        }

        &--full {
            width: 100%;
            font-size: 14px;
        }
        &--inline {
            display: inline-block;
            font-size: 16px;
        }
        &__alert-text {
            line-height: 22px;
            &--light-informational {
                background-color: #E1EFFF;
                border-color: rgba(1, 102, 214, 0.25);
                box-shadow: 0px 5px 8px rgba(1, 102, 214, 0.09);
                color: #333C48;
            }
            &--light-successful {
                background-color: #EBFAEE;
                border-color: rgba(55, 176, 87, 0.25);
                box-shadow: 0px 5px 8px rgba(55, 176, 87, 0.09);
                color: #333C48;
            }
            &--light-destructive {
                background-color: #FBECE5;
                border-color:rgba(227, 79, 47, 0.25);
                box-shadow: 0px 5px 8px rgba(227, 79, 47, 0.09);
                color: #333C48;
            }
            &--light-warning {
                background-color: #FCF5E5;
                border-color: rgba(239, 148, 0, 0.25);
                box-shadow: 0px 5px 8px rgba(239, 148, 0, 0.09);
                color: #333C48;
            }            
            &--dark-successful {
                background-color: #24292E;
                border-color: rgba(1, 102, 214, 0.25);
                color: #FFFFFF;
            }
            &--dark-informational {
                background-color: #24292E;
                border-color: rgba(1, 102, 214, 0.25);
                color: #FFFFFF;
            }
            &--dark-warning {
                background-color: #24292E;
                border-color: rgba(1, 102, 214, 0.25);
                color: #FFFFFF;
            }
            &--dark-destructive {
                background-color: #24292E;
                border-color: rgba(1, 102, 214, 0.25);
                color: #FFFFFF;
            }
        }    
        .alert-image {
            height: 32px;
        }
    }
}  

.cly-vue-notification__alert-box + .cly-vue-notification__alert-box {
    margin-top: 16px;
}
    
.cly-vue-status-tag {
    display: inline-block;
    border-radius: 4px;
    padding: 0px 6px;

    // .cly-vue-status-tag__blink
    &__blink {
        display: inline-block;
        position: relative;
        top: -1px;
        width: 6px;
        height: 6px;
        border-radius: 8px;
        vertical-align: middle;
        margin-right: 2px;
        animation: blinker 1.5s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
    }

    // .cly-vue-status-tag__skeleton
    &__skeleton {
        display: inline-block;
        position: relative;
        top: -1px;
        background-color: #BDBDBD;
        width: 40px;
        height: 4px;
        border-radius: 8px;
        vertical-align: middle;
        animation: blinker 1.5s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
    }

    // .cly-vue-status-tag--blue
    &--blue {
        background-color: #E6F0FB;
        color: #017AFF;

        // .cly-vue-status-tag--blue .cly-vue-status-tag__blink
        & .cly-vue-status-tag__blink {
            background-color: #017AFF;
        }
    }

    // .cly-vue-status-tag--gray
    &--gray {
        background-color: #F5F5F5;
        color: #BDBDBD;

        // .cly-vue-status-tag--gray .cly-vue-status-tag__blink
        & .cly-vue-status-tag__blink {
            background-color: #BDBDBD;
        }
    }

    // .cly-vue-status-tag--green
    &--green {
        background-color: #EBFAEE;
        color: #12AF51;
        
        // .cly-vue-status-tag--green .cly-vue-status-tag__blink
        & .cly-vue-status-tag__blink {
            background-color: #12AF51;
        }
    }

    // .cly-vue-status-tag--red
    &--red {
        background-color: #FBECE5;
        color: #D23F00;
        
        // .cly-vue-status-tag--red .cly-vue-status-tag__blink
        & .cly-vue-status-tag__blink {
            background-color: #D23F00;
        }
    }

    // .cly-vue-status-tag--small
    &--small {
        font-size: 12px;
        line-height: 18px;
        display: flex;
        align-items: baseline;
        font-weight: 500;

        // .cly-vue-status-tag--small .cly-vue-status-tag__blink
        & .cly-vue-status-tag__blink {
            /*
                NOTE: This is a hack to make the blinking dot align with the blinking line
                the hole component styles should be redone when working on the new UI
            */
            top: 1px;
        }

        // .cly-vue-status-tag--small .cly-vue-status-tag__skeleton
        & .cly-vue-status-tag__skeleton {
            /*
                NOTE: This is a hack to make the blinking line align with the blinking dot
                the hole component styles should be redone when working on the new UI
            */
            top: 0px;
            margin: 4px 0;
        }
    }
    
    // .cly-vue-status-tag--yellow
    &--yellow {
        background-color: #FCF5E5;
        color: #CDAD7A;
        
        // .cly-vue-status-tag--yellow .cly-vue-status-tag__blink
        & .cly-vue-status-tag__blink {
            background-color: #CDAD7A;
        }
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }
}

.cly-vue-theme-clydef {

    background-color:#FCFCFC;
    // #content-container { 
    //     padding:59px 0 35px 0;
    // }

    #top-bar {
        z-index: 1997;
    }

    #vue-common-overlay { 
        display:none; 
        background-color:#383A3F;
        opacity:0.5; 
        width:100%; 
        height:100%; 
        position:fixed; 
        z-index:1999; 
        top:0; 
        &.is-active {
            display: block;
        }
    }

    &.has-active-modal {
        overflow: hidden!important;
    }

    font-family: t.$font-family !important;

    // tabs component
    .cly-vue-tabs {
        &.tabs-main-skin {
            > .cly-vue-tabs-list {
                background-image: none;
                padding: 0;
                margin: 0;
                border-radius: 0;
                margin-top: -1px;
                height: 40px;
                border: none;
                background-color: transparent;
                padding-left: 12px;
                margin-bottom: 5px;
                li {
                    text-decoration: none;
                    color: #fff;
                    font-size: 12px;
                    text-align: center;
                    box-shadow: none;
                    list-style: none;
                    float: left;
                    position: relative;
                    top: 1px;
                    white-space: nowrap;
                    margin: 0;
                    background-color: #fcfcfc;
                    border-radius: 0;
                    border: none;
                    background-image: none;
                    padding: 0;
                    border-top: 3px solid #fcfcfc;
                    border-bottom: none !important;
                    width: auto;
                    margin-right: 30px;
                    a {
                        cursor: pointer;
                        display: block;
                        float: none;
                        text-transform: uppercase;
                        background-color: transparent;
                        color: #666;
                        padding: 0px 0px 6px 0px;
                        font-size: 15px;
                    }

                    &.is-active a {
                        color: #333;
                        border-bottom: 2px solid #19cc63 !important;
                    }
                }
            }
        }

        &.tabs-graphs-skin {
            > .cly-vue-tabs-list {
                margin: 0px;
                padding: 0px;
                height: 30px;

                @for $i from 1 through 15 {
                    &.tabs-#{$i} li {
                        width: calc(#{100 / $i + "%"} - 1px);
                    }
                }

                li {
                    float: left;
                    position: relative;
                    cursor: pointer;
                    padding-top: 7px;
                    font-size: 12px;
                    line-height: 111%;
                    color: #969696;
                    box-shadow: none;
                    border: none;
                    list-style: none;
                    text-align: center;
                    border-left: 1px solid #d0d0d0;
                    border-bottom: 1px solid #d0d0d0;
                     background-color: #fcfcfc;
                    height: 23px;
                    vertical-align: middle;

                    &:first-of-type {
                        border-left: 0;
                    }
                    a {
                        padding-top: 2px;
                        padding-bottom: 3px;
                        font-size: 10px;
                        color: #666666;
                        text-transform: uppercase;
                        max-width: 156px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin: 0 auto;
                        white-space: nowrap;
                    }

                    &.is-active {
                        background-color: #fff;
                        border-bottom: none;
                    }
                }
            }
        }
    }

    // graph
    .cly-vue-graph-w {
        .graph-container {
            width: auto;
            height: 350px;
            margin: 30px;
        }
    }

    .cly-vue-graph-no-data {
        height: 100%;
        position: relative;

        .inner {
            user-select: none;
            text-align: center;
            position: absolute;
            width: 400px;
            left: 50%;
            margin-left: -200px;
            height: 64px;
            margin-top: -40px;
            top: 50%;

            .icon {
                display: inline-block;
                width: 60px;
                height: 60px;
                background-image: url("../../images/dashboard/graph-no-data.svg");
                background-size: contain;
                margin-right: 20px;
                background-repeat: no-repeat;
            }
            .text {
                cursor: default;
                display: inline-block;
                color: #a2a2a2;
                vertical-align: text-bottom;
                margin-bottom: 23px;
                font-size: 16px;
            }
        }
    }

    // time graph
    .cly-vue-time-graph-w {
        font-family: Oswald;
        font-size: 14px;
        margin: 30px;

        .graph-container {
            width: auto;
            height: 350px;
        }

        .legendLabel {
            font-size: 14px;
        }
    }

    // global date selector
    .cly-vue-global-date-selector-w {
        float: right;
        font-size: 13px;
        line-height: 111%;
        color: #6b6b6b;
        padding: 6px;
        padding-right: 0;
        user-select: none;
        position: relative;

        .button {
            visibility: visible;
            cursor: pointer;
            user-select: none;
            padding: 7px 5px 7px 5px;
            margin-right: -1px;
            color: #ffffff;
            font-size: 13px;
            line-height: 13px;
            &:active,
            &.active,
            &:hover {
                background-color: #1b2732;
            }
        }

        .date-selector-buttons {
            background-color: #03060c;
            width: 160px;
            position: absolute;
            right: 0;
            top: 0;
            padding: 0px 20px;
            margin: 0px -3px 0 0;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
            height: 100%;
            .button:nth-child(1) {
                margin-top: 20px;
            }
        }

        .date-buttons-container {
            float: left;
            .button:first-child {
                border-top-left-radius: 2px;
                border-bottom-left-radius: 2px;
            }
            .button:last-child {
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
                border-right: 1px solid #d0d0d0;
            }
        }

        > .calendar {
             background-color: #fcfcfc;
            border: 1px solid #d0d0d0;
            color: #767676;
            cursor: pointer;
            float: right;
            border-radius: 2px;
            margin: 0 5px 0 13px;
            height: 27px;
            text-align: center;
            padding: 0px 30px 0px 30px;
            min-width: 200px;
            text-align: left;
            &:hover {
                 background-color: #fcfcfc;
            }
            i {
                font-size: 18px;
                position: absolute;
                top: 12px;
                left: 26px;
            }
            .up,
            .down {
                position: absolute;
                right: 16px;
                top: 15px;
                color: #767676;
            }
            .up {
                display: none;
            }
            &.active .up {
                display: block;
            }
            &.active .down {
                display: none;
            }
        }

        .calendar-block {
            vertical-align: top;
            .calendar-input-field {
                float: right;
                width: 100px;
                padding: 9px 9px 9px 9px;
                font-size: 13px;
                line-height: 13px;
                text-align: center;
                border: none;
                background-color: #1b2732;
                color: #ffffff;
                margin: 0 10px;
                border-radius: 2px;
                border: 1px solid #1b2732;
                height: 16px;
            }
            .calendar-input-field:hover {
                border: 1px solid #243544;
            }
            span.date-input-label {
                float: right;
                text-transform: uppercase;
                color: #d2d2d1;
                margin-top: 11px;
                font-size: 12px;
            }
        }

        .inst-date-picker {
            white-space: nowrap;
            position: absolute;
            z-index: 1000;
            padding: 2px 3px 6px 3px;
            background-color: #0b131a;
            border-radius: 2px;
            right: 2px;
            top: 41px;
            .calendar-container {
                overflow: auto;
                padding: 10px 5px;
                margin-right: 200px;
                .calendar {
                    vertical-align: top;
                    margin-bottom: 10px;
                    &:nth-child(2) {
                        margin-right: 0;
                    }
                }
            }
            .button-container {
                overflow: auto;
                position: absolute;
                right: 20px;
                bottom: 15px;
                .icon-button {
                    padding: 7px 10px;
                    float: right;
                }
            }
            .in-range {
                a {
                    background: rgba(46, 167, 50, 0.6);
                    border-radius: 2px;
                    margin: 1px;
                    padding: 4px;
                    &.ui-state-hover {
                        background: #1b2732;
                    }
                }
            }
            .ui-datepicker-title {
                font-size: 13px;
            }
            &:before {
                border: 6px solid rgba(194, 225, 245, 0);
                border-bottom-color: #03060c;
                right: 9px;
                top: -11px;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }
        }

        .inst-selected-date {
            font-size: 13px;
            color: #767676;
            line-height: 28px;
        }
    }

    .cly-vue-daterp {
        background: #FFFFFF;
        border-radius: 4px;
        color: map.get(c.$colors, "text-custom-1-active");
        display: inline-block;

        &__shortcuts-col {
            width: 144px;
            padding: 8px;
            vertical-align: top;
            flex: 1;
        }

        &__calendars-col {
            width: 341px;
        }
        
        &__tab-list {
            div[role="tablist"] {
                left: 24px;
                padding-right: 24px;
            }
        }

        &__shortcuts-col {
            border-right: 1px #EBEBEF solid;
            // + .cly-vue-daterp__calendars-col {
            //     margin-left:-5px;
            // }
        }

        &__calendars-wrapper {
            background-color: #f9f9f9;
            position: relative;
            &::before {
                // shadow
                content: "";
                position: absolute;
                width: 100%;
                height: 12px;
                background: linear-gradient(180deg, rgba(51, 60, 72, 0.8) 0%, rgba(51, 60, 72, 8e-05) 100%);
                mix-blend-mode: normal;
                opacity: 0.1;
                top: 0px;
                z-index: 2000;
            }
            &::after {
                // shadow
                content: "";
                position: absolute;
                width: 100%;
                height: 12px;
                background: linear-gradient(180deg, rgba(51, 60, 72, 0.6) 0%, rgba(51, 60, 72, 6e-05) 100%);
                mix-blend-mode: normal;
                opacity: 0.1;
                transform: rotate(-180deg);
                bottom: 0px;
            }
        }

        &__date-table-wrapper {
            margin: 0 14px 4px 14px;
            padding-top: 12px;
        }

        &__shortcuts-col, &__calendars-col {
            display: inline-block;

            .el-tabs {
                &__active-bar {
                    background-color: #0166D6;
                }
            }
        }

        &__shortcut {
            padding: 8px;
            cursor: pointer;
            line-height: 16px;
        
            &--active {
                background: #F9F9F9;
                border-radius: 4px;
                color: map.get(c.$colors, "primary");
            }

            &--deactive {
                background-color: transparent;
                border-radius: 0;
                color: rgb(51, 60, 72);
            }

            &--custom {
                margin-bottom: 24px;
            }
            
            &--custom--override {
                margin-bottom: unset !important;
            }

            i {
                color: #808081;
                float: right;
                margin-top: 1px;
                margin-right: -2px;
            }
        }

        &__input-wrapper,
        &__time-picker-section {
            width: 308px;
            display: flex;
            margin: 0;
            padding: 16px;
            align-items: center;

            .in-the-last-start-date {
                width: 147px;
            }
        }

        &__input-wrapper-content {
            display: contents;
        }

        &__time-picker-section {
            border-bottom: 1px solid #ECECEC;
        }

        
        &__in-between-conj {
            padding: 0 11px;
        }

        &__commit-section {
            float: right;
            margin: 16px;
        }

        &__cancel-button{
            padding: 8px 12px;
            border: none;
            font-weight: 500;
        }

        &__confirm-button {
            margin-left: 8px;
            border: none;
        }
        
        &__day-names-wrapper {
            margin: 0 14px 9px 14px;
        }

        &__day-names {
            text-align: center;
            th {
                font-size: 13px;
                line-height: 13px;
                font-weight: 500;
                color: #858A91;
                width: 42px;
            }
        }

        .el-tabs {
            &__nav-scroll {
                justify-content: center;
                display: flex;
            }
            &__header {
                margin: 0;
            }
            &__item {
                height: 44px;    
                line-height: 44px;
            }
        }

        &__hidden-tabs {
            .el-tabs__header {
                display: none;
            }
        }

        .el-date-table {
            margin-top: 2px;
            tr:first-of-type {
                display: none; // hide day names
            }
            td {
                width: 44px;
                height: 36px;
                padding: 0;
                > div { 
                    padding: 0px;
                    height: 32px;
                    span {
                        width: 40px;
                        height: 32px;
                        background: #FFFFFF;
                        border-radius: 4px;
                        -webkit-box-sizing:border-box;
                        -moz-box-sizing:border-box;
                        -ms-box-sizing:border-box;
                        box-sizing:border-box;
                        border: 2px solid transparent;
                        padding: 5px 0 0 15px;
                    }
                }
                &.in-range{
                    > div span {
                        background: #ccdbf2;
                        mix-blend-mode: normal;
                    }
                }
                &.start-date, &.end-date {
                    > div span {
                        background: #1967D2
                    }
                }
                &.prev-month, &.next-month {
                    visibility: hidden;
                    height: 0px;
                    div, span {
                        display: none;
                        height: 0px;
                    }
                }
            }
        } 
        
        .el-month-table {
            margin-top: 2px;
            margin-bottom: 14px;
            td {
                width: 78px;
                height: 66px;
                padding: 0;
                > div { 
                    padding: 0px;
                    a {
                        width: 68px;
                        height: 46px;
                        background: #fff;
                        border-radius: 4px;
                        font-size: 14px;
                        padding-top: 10px;
                        border: 2px solid transparent;
                    }
                }
                &.in-range{
                    > div a {
                        background: #ccdbf2;
                        mix-blend-mode: normal;
                    }
                }
                &.start-date, &.end-date {
                    > div a {
                        background: #1967D2
                    }
                }
            }
        }

        .el-year-table {
            margin-top: 2px;
            margin-bottom: 14px;
            td {
                width: 78px;
                height: 66px;
                padding: 0;
                >  a {
                    width: 68px;
                    height: 46px;
                    background: #fff;
                    border-radius: 4px;
                    font-size: 14px;
                    padding-top: 10px;
                    border: 2px solid transparent;
                }
                &.in-range{
                    > a {
                        background: #ccdbf2;
                        mix-blend-mode: normal;
                    }
                }
                &.start-date, &.end-date {
                    > a {
                        color: #FFF;
                        background: #1967D2
                    }
                }
            }
        }

        @mixin cell-hover() {
            background: #FFFFFF;
            border: 2px solid #0166D6;
            color: map.get(c.$colors, "text-custom-1-active");
        }


        &__table-wrap.is-start-focused {
            .el-date-table .start-date {
                > div span {
                    @include cell-hover()
                }
            }
            .el-month-table .start-date {
                > div a {
                    @include cell-hover()
                }
            }
            .el-year-table .start-date {
                > a {
                    @include cell-hover()
                }
            }
        }

        &__table-wrap.is-end-focused {
            .el-date-table .end-date {
                > div span {
                    @include cell-hover()
                }
            }
            .el-month-table .end-date {
                > div a {
                    @include cell-hover()
                }
            }
            .el-year-table .end-date {
                > a {
                    @include cell-hover()
                }
            }
        }
        &__table-wrap.is-point {
            .el-date-table .available:not(.in-range) {
                 > div:hover span {
                    @include cell-hover()
                }
            }
            .el-month-table td:not(.in-range) {
                > div:hover a {
                    @include cell-hover()
               }
            }
            .el-year-table td:not(.in-range) {
                > a:hover {
                    @include cell-hover()
               }
            }   
        }
    }

    .cly-vue-generic-radio {
        .generic-radio-wrapper > div {
            width: calc(50% - 8px);
            border: 1px solid #d0d0d0;
            border-radius: 2px;
            display: inline-block;
            margin-right: 11px;
            margin-bottom: 10px;
            background-color: #fff;
            cursor: pointer;
            text-align: center;
            padding: 10px 0px;
            &:last-child {
                margin-right: 0px;
            }
            &.selected {
                border-color: #2eb52b;
            }
            .button-area {
                .text {
                    font-size: 12px;
                }
            }
        }
    }

    // radio
    .cly-vue-radio {
        .radio-wrapper {
            border: 1px solid #d0d0d0;
            border-radius: 2px;

            .radio-button {
                border-top: 1px solid #d0d0d0;
                background-color: #ececec;
                overflow: auto;
                padding: 8px;
                cursor: pointer;

                &.selected {
                    background-color: #fff;
                    .box {
                        box-shadow: inset 0 0 0 2px #fff;
                        background-color: #2eb52b;
                    }
                }

                &:first-child {
                    border: none;
                }

                .box {
                    border: 1px solid #ccc;
                    border-radius: 15px;
                    float: left;
                    width: 12px;
                    height: 12px;
                    margin-top: 1px;
                    position: relative;
                    margin-right: 8px;
                    cursor: pointer;
                }
                .text {
                    float: left;
                    font-size: 12px;
                    margin-top: 1px;
                    color: #6f6f6f;
                    cursor: pointer;
                }
                .description {
                    float: left;
                    font-size: 10px;
                    margin-top: 3px;
                    margin-left: 20px;
                    color: #9c9c9c;
                }
            }
        }

        &.radio-light-skin {
            .radio-button {
                background-color: transparent;
            }
        }

        &.disabled {
            .radio-button {
                cursor: default;
                &.selected {
                    background-color: #f4f4f4;
                    .box {
                        background-color: #c6c6c6;
                    }
                }

                .box {
                    cursor: default;
                }

                .text {
                    cursor: default;
                }
            }
        }
    }
	
	//radio blocks
	.cly-vue-radio-block {
		 .radio-wrapper {
            border-radius: 0px;

            .radio-button {
                border-top: 1px solid #ececec;
				border-right: 1px solid #ececec;
                background-color: #ffffff;
                overflow: auto;
                padding: 20px;
                box-sizing: border-box;
                cursor: pointer;

                &.selected {
                    background-color: #F6F6F6;
					border-left: 2px solid #0166D6;
                    .box {
                        box-shadow: inset 0 0 0 4px #0166D6;
                        background-color: #fff;
						border: none;
                    }
                }

                .box {
                    border: 1px solid #A7AEB8;
                    border-radius: 16px;
                    width: 16px;
					height: 16px;
                    margin-top: 1px;
                    position: relative;
                    margin-right: 8px;
                    cursor: pointer;
					margin-top: 1px;
                }
				.fas {
					margin: 3px 3px 3px 7px;
					border-radius: 16px;
					padding: 4px;
					font-size: 9px;
				}
				.trend-up{
					font-size: 14px;
                    font-weight: 500;
					position: relative;
					top: -4px;
					color: #12AF51;
					.fas {
						background-color:#EBFAEE
					}
					span {
						position: relative;
						top: 2px;
					}
				}
				.trend-down{
					font-size: 14px;
                    font-weight: 500;
					color: #D23F00;
					position: relative;
					top: -4px;
					.fas {
						background-color:#FBECE5;
					}
					span {
						position: relative;
						top: 2px;
					}
				}
            }
        }
		.radio-wrapper-horizontal {
			width: 100%;
			
			.radio-button  {
				border-top: 1px solid #ececec;
				border-bottom: 1px solid #ececec;
				border-left: 1px solid #ececec;
				&.selected {
                    background-color: #F6F6F6;
					border-bottom: 2px solid #0166D6;
					border-left: 1px solid #ececec;
                    .box {
                        box-shadow: inset 0 0 0 4px #0166D6;
                        background-color: #fff;
						border: none;
                    }
                }
				
				.box {
					visibility:hidden;
				}
			}
			.radio-button:last-child {
				border-right: 1px solid #ececec;
			}
		}

        &.radio-light-skin {
            .radio-button {
                background-color: transparent;
            }
        }

        &.disabled {
            .radio-button {
                cursor: default;
                &.selected {
                    background-color: #f4f4f4;
                    .box {
                        background-color: #c6c6c6;
                    }
                }

                .box {
                    cursor: default;
                }

                .text {
                    cursor: default;
                }
            }
        }
	}

    // color-picker
    .cly-vue-color-picker {
        position: relative;
        display: block;

        // .cly-vue-color-picker__body
        &__body {
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 9999;
            transform: translateY(calc(100% + 8px));

            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08);
            border: 1px solid #d0d0d0;
            border-radius: 2px;

            width: 275px;
            height: 415px;

            background-color: #ffffff;

            // .cly-vue-color-picker__body .vc-sketch
            & .vc-sketch {
                background-color: transparent;
                padding: 12px;
                box-shadow: none;
                border: none;
                border-radius: 0;
                width: 251px;

                // .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap
                & .vc-sketch-saturation-wrap {
                    height: calc(251px - 180px);
                    bottom: 12px;

                    // .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap .vc-saturation
                    & .vc-saturation {
                        height: 251px;
                    }
                }

                // .cly-vue-color-picker__body .vc-sketch .vc-sketch-presets
                & .vc-sketch-presets {
                    display: none;
                }
            }

            // .cly-vue-color-picker__body--left
            &--left {
                right: 0;
            }

            // .cly-vue-color-picker__body--right
            &--right {
                right: 0;
                transform: translate(-50%, 100%);
            }
        }

        // .cly-vue-color-picker__buttons-container
        &__buttons-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 12px;
        }

        // .cly-vue-color-picker__input
        &__input {
            box-sizing: border-box;
            width: 100%;
            height: 100%;

            padding: 6px 32px;

            border: none;
            outline: none;

            color: #000;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;

            border: 1px solid #CFD6E4;
            border-radius: 4px;
            text-transform: uppercase;
        }

        // .cly-vue-color-picker__input-arrow
        &__input-arrow {
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translateY(-50%);

            height: 16px;
            width: 16px;

            // .cly-vue-color-picker__input-arrow i
            i {
                font-size: 16px;
                line-height: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            // .cly-vue-color-picker__input-arrow .cly-vue-color-picker__input-arrow-icon-open
            & .cly-vue-color-picker__input-arrow-icon-open {
                display: none;
            }

            // .cly-vue-color-picker__input-arrow .cly-vue-color-picker__input-arrow-icon-closed
            & .cly-vue-color-picker__input-arrow-icon-closed {
                display: block;
            }

            // .cly-vue-color-picker__input-arrow--open
            &--open {
                // .cly-vue-color-picker__input-arrow--open .cly-vue-color-picker__input-arrow-icon-open
                & .cly-vue-color-picker__input-arrow-icon-open {
                    display: block;
                }

                // .cly-vue-color-picker__input-arrow--open .cly-vue-color-picker__input-arrow-icon-closed
                & .cly-vue-color-picker__input-arrow-icon-closed {
                    display: none;
                }
            }
        }

        // .cly-vue-color-picker__input-container
        &__input-container {
            position: relative;
            cursor: pointer;

            box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);

            max-width: 138px;
        }

        // .cly-vue-color-picker__input-drop
        &__input-drop {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        // .cly-vue-color-picker__input-drop-container
        &__input-drop-container {
            position: absolute;
            top: 50%;
            left: 8px;
            transform: translateY(-50%);

            width: 16px;
            height: 16px;
        }
    }

    // check
    .cly-vue-check-list {
        .cly-vue-check {
            display: block;
            padding: 4px 0;
        }
    }

    .cly-vue-check {
        display: inline-block;

        $check-disabled-color: #c6c6c6;

        &.block {
            display: block;
            padding: 4px 0;
        }

        &.check-switch-skin {
            .check-wrapper {
                .check-checkbox:checked + .check-label {
                    background-color: #2eb52b;
                    &:before {
                        left: 17px;
                        box-shadow: 0 1px 1px 0 #157313;
                    }
                }
                .check-label {
                    display: inline-block;
                    overflow: hidden;
                    cursor: pointer;
                    height: 19px;
                    padding: 0;
                    line-height: 26px;
                    border-radius: 24px;
                    background-color: #d0d0d0;
                    transition: background-color 0.3s ease-in;
                    width: 32px;
                    vertical-align: bottom;
                    &:before {
                        content: "";
                        display: block;
                        width: 12px;
                        height: 12px;
                        margin: 3px 0 0 0;
                        background: #ffffff;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 3px;
                        border-radius: 24px;
                        transition: all 0.3s ease-in 0s;
                        box-shadow: 0 1px 1px 0 #8e8e8e;
                    }
                }
            }
            &.disabled {
                .check-checkbox:checked + .check-label {
                    opacity: 0.5;
                }
                .check-label {
                    cursor: default;
                }
            }
        }

        &.check-tick-skin {
            .check-wrapper {
                .check-label {
                    color: #2fa732;
                    cursor: pointer;
                }
            }
            &.disabled {
                .check-label {
                    color: #{$check-disabled-color};
                    cursor: default;
                }
            }
        }

        &.check-star-skin .ion-icons {
            color: #6b6b6b;
            font-size: 20px;
            padding-top: 0px;
        }

        &.check-switch-skin,
        &.check-tick-skin,
        &.check-star-skin {
            .check-wrapper {
                position: relative;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                text-align: left;
                white-space: nowrap;
                vertical-align: middle;
                //margin-bottom: 5px;

                .check-checkbox {
                    display: none;
                }

                .check-text {
                    display: inline-block;
                    opacity: 1;
                    font-size: 12px;
                    color: #444;
                    vertical-align: top;
                    margin-top: 3px;
                    margin-left: 5px;
                    line-height: 12px;
                    cursor: pointer;
                }
            }
            &.disabled {
                .check-text {
                    cursor: default;
                }
            }
        }
    }

    //button
    .cly-vue-button {
        + .cly-vue-button {
            margin-left: 8px;
        }
        min-height: 14px;
        cursor: pointer;
        float: left;
        padding: 7px 12px;
        border-radius: 2px;
        font-size: 12px;
        line-height: 15px;
        overflow: auto;

        &.button-green-skin {
            background-color: #2eb52b;
            color: #fff;
            box-shadow: inset 0 0 0 1px #2eb52b;
        }
        &.button-light-skin {
            color: #717171;
            background-color: #fdfdfd;
            box-shadow: inset 0 0 0 1px #dcdcdc;
        }
        &.button-orange-skin {
            background-color: #ef9c42;
            color: #fff;
            border-radius: 3px;
        }
        &:hover {
            opacity: 0.8;
        }
        &.disabled {
            opacity: 0.5;
        }
    }

    .el-input {
        &__prefix, &__suffix {
            .text-small, .text-medium, .text-big {
                height: 32px;
                align-items: center;
                display: flex;
            }
        }
        .cly-vue-remover {
            height: 32px;
            font-size: 14px;
            align-items: center;
            display: none;
        }
        &:hover .cly-vue-remover {
            display: flex;
            cursor: pointer;
        }
    } 

    .cly-vue-metric-cards {
        &:not(:last-of-type) {
            margin-bottom: 0!important;
            // border-bottom: 1px solid #ececec;
        }
    }

    .cly-vue-metric-card {
        // min-width: 270px;
        background-color: #fff;
        box-shadow: 0px 2px 0px #EAECEF;
        // border-bottom: 1px solid #ececec;
        &__wrapper {
            min-height: 56px;
        }
        & + .cly-vue-metric-card .cly-vue-metric-card__wrapper {
            border-left: 1px solid c.$table-border-color;
        }
    }

    .cly-vue-metric-cards[class*="bu-is-multiline"] {
        .cly-vue-metric-card {
            box-shadow: none;
            border-top: none;
        }
    }

    .cly-vue-metric-breakdown {
        &__inner {
            margin: 0px!important;
            padding-bottom: 4px;
            div:nth-child(2) {
                text-align: right;
            }
            .bu-column {
                padding: 0px;
            }
            .divider {
                color:#A7AEB8;
            }
        }
        &__value-row {
            border-radius: 4px;
            padding-bottom: 20px!important;
            &:last-child {
                margin-bottom: 4px;
            }
            &--is-clickable {
                cursor: pointer;
                &:hover {
                    background-color: #F6F6F6;
                    .cly-vue-metric-breakdown__numbers {
                        color: #0166D6;
                        i { 
                            color: black !important;
                        } 
                    }
                }
            }
        }
        &__row-icon {
            height: 12px;
            width: 12px;
        }
        &__rows {
            height: 200px;
        }
        &__empty {
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333c48;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
        }
        &__blur_container {
            position: absolute;
            bottom: 0px;
            width: 98%;
            background-color: white;
            height: 25px;
            opacity: 0.7;
            left: 3px;
        }
    }

    //responsive design for metric cards
    @media screen and (max-width: 1281px) {
        .cly-vue-metric-card__wrapper {
            h2 {
                font-size: 18px !important;
            }

            .cly-trend-up, .cly-trend-down {
                font-size: 12px !important;
            }
        }
    }

    .cly-vue-section__content {
        .cly-vue-metric-cards {
            border-top: 0px;
        }
    }

    .cly-vue-metric-cards[class*="is-synced"] {
        .cly-vue-metric-card {
            min-width: 270px;
            flex: 1 !important;
        }
        
        .cly-vue-metric-breakdown {
            min-width: 270px;
            flex: 1 !important;
        }
    }

    .cly-vue-metric-cards {
        border-top: 1px solid #ececec;
        &.cly-vue-metric-cards--is-multiline {
            .cly-vue-metric-breakdown {
                &__wrapper {
                    padding: 8px 0;
                }
                &:nth-child(odd) > .cly-vue-section {
                    padding-right: 8px;
                }
                &:nth-child(even) > .cly-vue-section {
                    padding-left: 8px;
                }
            }
        }
        &:not(.cly-vue-metric-cards--is-multiline) {
            .cly-vue-metric-breakdown {
                // min-width: 270px;
                box-shadow: 0px 2px 0px #EAECEF;

                .cly-vue-section__content {
                    border-bottom: 0px;
                    border-top: 0px;
                }
                & + .cly-vue-metric-breakdown .cly-vue-metric-breakdown__wrapper {
                    border-left: 1px solid map.get(c.$colors, "warm-gray-30");
                }
            }
        }
    }

    .cly-vue-popover{
        cursor: pointer;
        z-index: 2000;
        
        .trigger {
            display: block!important;
        }
        &__content {
            > div {
                width: 100%;
            }
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            background: #FFFFFF;
            border: 1px solid #ECECEC;
            box-sizing: border-box;
            box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
            border-radius: 4px;
            &--small {
                padding: 4px;
            }
            &--medium {
                width: 245px;
                padding: 16px;
            }
            &--auto {
                padding: 16px;
            }
            &--small-chart {
                width: 175px;
                padding: 12px;
            }
            &--medium-chart {
                width: 186px;
                padding: 12px;
            }
            &--auto-chart {
                padding: 12px;
            }
        }
    }

    //drawer
    .cly-vue-drawer {
        position: fixed;
        height: 100%;
        right: 0;
        top: 0;
        background-color: transparent;
        z-index: 2001;
        width: 100%;

        /*
            cly-vue-drawer-step block not to be confused with 
            cly-vue-drawer__step* elements. The latter one is used for 
            internal elements, while the block is a public utility for
            plugin developers.
        */

        &-step {
            &__line {
                + .cly-vue-drawer-step__line {
                    margin: 3px 0;
                }
                &--aligned {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }
            &__section {
                padding: 12px 0;
                + .cly-vue-drawer-step__section-group {
                    margin-top: 12px;
                }
                + .cly-vue-form-step__auto-group {
                    margin-top: 12px;
                }
            }
            &__section-group {
                padding: 12px 24px;
                &--filled {
                    background: #F8FAFD;
                    border: 1px solid #F6F6F6;
                    box-sizing: border-box;
                    border-radius: 6px;
                }
                + .cly-vue-drawer-step__section-group {
                    margin-top: 16px;
                }
                .cly-vue-drawer-step__section {
                    padding: 8px 0;
                }
            }
        }

        &__sidecars-view {
            background-color: #81868d;
            overflow-y: scroll;
            position: absolute;
            left: 0;
        }
        &__steps-view {
            box-sizing: border-box;
            position: absolute;
            right: 0;
            background-color: white;
        }

        &__steps-view,
        &__sidecars-view {
            height: 100%;
        }

        &--half-screen {
            // .cly-vue-drawer__steps-view {
            //     width: 50%;
            // }
            // .cly-vue-drawer__sidecars-view {
            //     width: 50%;
            // }
            .cly-vue-drawer__footer {
                padding: 16px;
                display: flex;
                justify-content: space-between;
                align-items: baseline;
            }
            @for $i from 1 through 12 {
                &-#{$i}{
                    .cly-vue-drawer__steps-view {
                        @if $i == 12 {
                            width: 100%;
                          } 
                        @else {
                            width: #{$i*math.div(1348, 12) + 'px'}
                          }
                        
                    }
                    .cly-vue-drawer__sidecars-view {
                        @if $i == 12 {
                            width: 0%;
                          } 
                        @else {
                            width: calc(100% - #{$i*math.div(1348, 12) + 'px'})
                          }
                        
                    }
                }
            }
        }

        &--full-screen {
            .cly-vue-drawer__close-button {
                height: 24px;
                margin-top: -6px;
            }
            .cly-vue-drawer__steps-view {
                width: 100%;
            }

            .cly-vue-drawer__header,
            .cly-vue-drawer__steps-container,
            .cly-vue-drawer__footer {
                max-width: 700px;
                width: 700px;
                // margin: 0 auto;
                padding: 0 calc(50% - 350px);
                > div {
                    margin: 1rem !important;
                }
            }

            .cly-vue-drawer__steps-container {
                &.is-scroll-shadow-at-middle::before,
                &.is-scroll-shadow-at-bottom::before {
                    width: 100%;
                    left: 0;
                }
                &.is-scroll-shadow-at-middle .scroll-shadow-container::after,
                &.is-scroll-shadow-at-top .scroll-shadow-container::after {
                    width: 100%;
                    bottom: 15px;
                }

                &.is-scroll-shadow-at-middle .scroll-shadow-container,
                &.is-scroll-shadow-at-top .scroll-shadow-container {
                    left: -16px;
                }
            }

            .cly-vue-drawer__footer {
                border: none;
                // width: 100%;
                &:after {
                    content: "";
                    width: 685px;
                    position: absolute;
                    bottom: 63px;
                    border-top: 1px solid #ECECEC;
                }
            }
        }

        // &.is-mounted {
        // }

        // &.is-open {
        // }

        &__title {
            position: relative;
            top: 0px;
            box-sizing: border-box;
        }

        // .cly-vue-drawer__title-container
        &__title-container {
            margin: 24px 32px;
        }

        &__subtitle {
            margin-left: 32px !important;
            margin-bottom: 24px !important;
        }

        // .cly-vue-drawer__close-button
        &__close-button {
            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 30px;
            color: #81868D;
            transition: color 1s;
            cursor: pointer;
            height: 20px;

            // .cly-vue-drawer__close-button:hover
            &:hover {
                color: #333;
                transition: color 1s;
            }
        }

        &__body-container {
            margin-left: 32px !important;
            margin-right: 32px !important;
        }

        &__steps-header {
            background-color: #fff;
            position: relative;
            display: flex;
            align-items: center;
            z-index: 1000;    
            width: 100%;
            max-width: 720px;
        }

        &__step-sign {
            width: 18px;
            height: 18px;
            border-radius: 18px;
            background-color: transparent;
            border: 1px solid #A7AEB8;
            color: #A7AEB8;
            display: inline-block;   
            min-width: 18px;
            // margin: 0px 6px;
            .index {
                vertical-align: top;
            }
            .done-icon {
                vertical-align: top;
                display: none;
                padding-top: 2px;
            }
        }

        &__step-title {
            display: inline-block;
            margin-left: 6px;
        }

        &__step-separator {
            width: 40px;
            border-top: 1px solid #A7AEB8;
            max-width: 40px;
            margin-left: 12px;
            margin-right: 12px;
        }

        &__step-label {
            height: 100%;
            text-align: center;
            cursor: pointer;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &.is-locked {
                cursor: not-allowed;
            }

            &.is-active {
                .cly-vue-drawer__step-sign {
                    background-color: #333C48;
                    border-color:#333C48;
                    color: white;
                }
                color: #333C48;
                .cly-vue-drawer__step-title {
                    color: #333C48 !important;
                }
                + .cly-vue-drawer__step-separator {
                    border-color: #333C48;
                }
            }

            &.is-passed {
                .cly-vue-drawer__step-sign {
                    background-color: #12AF51;
                    border-color: #12AF51;
                    color: white;
                    .done-icon {
                        display: block;
                    }
                    .index {
                        display: none;
                    }
                }
            }
        }

        &__steps-container {
            height: 100%;
            float: none;
            overflow-y: auto;
            overflow-x: hidden;
            width: 100%;
        }

        // &__controls-left-pc {
        //     display: inline-block;
        //     height: 30px;
        //     padding-top: 10px;
        // }
        &__header:not(.is-full-screen) {
            border-bottom: 1px solid #E2E4E8;
        }
        &__footer {
            border-top: 1px solid #ECECEC;
        }
        &__steps-wrapper{ 
            height: 100%;
            flex-direction: column;
            display: flex;
        }
    }

    //
    .cly-vue-select-email{
        width: 100%;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    //dialog

    .cly-vue-dialog {
        &.is-auto-centered .el-dialog {
            margin-top: 0!important;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
        .el-dialog__header {
            padding: 16px;
        }
        .el-dialog__body {
            padding: 0;
        }
    }

    //formdialog
    .cly-vue-formdialog {
        position: fixed;
        z-index: 2000;
        width: 520px;
        background: #fff;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
        box-sizing: border-box;
        top: 15vh;
        left: calc(50% - 260px);

        &__header {
            border-bottom: 1px solid #CFD6E4;
        }

        &__footer {
            border-top: 1px solid #ECECEC;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
        }

        // &__steps-container {
        // }

        // &__controls-left-pc {
        //     display: inline-block;
        //     height: 30px;
        //     padding-top: 10px;
        // }
    }

    .cly-vue-form {
        &-field {
            &__inner.el-form-item {
                margin-bottom: 0;
                &::before, &::after {
                    content: none;
                }
            } 
        }
        &-step {
            &__line {
                + .cly-vue-form-step__line {
                    margin: 3px 0;
                }
                &--aligned {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }
            &__section {
                padding: 12px 0;
                + .cly-vue-form-step__section-group {
                    margin-top: 12px;
                }
                + .cly-vue-form-step__auto-group {
                    margin-top: 12px;
                }
            }
            &__section-group {
                padding: 12px 24px;
                &--filled {
                    background: #F8FAFD;
                    border: 1px solid #F6F6F6;
                    box-sizing: border-box;
                    border-radius: 6px;
                }
                + .cly-vue-form-step__section-group {
                    margin-top: 16px;
                }
                .cly-vue-form-step__section {
                    padding: 8px 0;
                }
            }
            &__auto-group {
                + .cly-vue-form-step__auto-group {
                    margin-top: 20px; //12px 
                }
            }
        }
        &-checklistbox {
            &-field {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                &__item {
                    max-width: 300px;
                    border-radius: 4px;
                    border: 1px solid #E2E4E8;
                    background: #FFF;
                    display: flex;
                    padding: 3.5px 6px 3.5px 8px;
                    align-items: center;
                    justify-content: space-between;
                    gap: 4px;
                }
            }
            .cly-vue-listbox__header {
                padding: 8px !important;
                &::after {
                    width: 0 !important;
                }
                .el-input__inner {
                    background-color: #F6F6F6 !important;
                }
            }
            .cly-vue-listbox__item {
                padding: 6px !important;
                margin-bottom: 4px !important;
            }
            .cly-vue-listbox label.el-checkbox {
                margin-left: 0 !important;
            }
        }
    }
	
	//confirm dialog
    .cly-vue-confirm-dialog,
    .cly-vue-message-dialog
    {
		.el-dialog {
			width: 400px;
            border-radius: 4px;
			&__header {
				padding: 24px 24px 12px 24px;
			}
			&__body {
				padding: 12px 24px 32px 24px;
				word-break:normal;
			}
			&__footer {
				padding: 12px 24px 24px 24px;
			}
            .el-button {
                font-weight: 500;
            }
            &--centered {
                margin-top: 0!important;
                position: relative;
                top: 50%;
                transform: translateY(-50%);
            }
		}

        &__title {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
	}

    .cly-vue-blank {
        height:400px;
    }

    .cly-vue-worldmap {
        .leaflet-container {
            background: white;
            outline: 0;
        }
        .leaflet-tooltip {
            background: #FFFFFF;
            border: 1px solid #ECECEC;
            box-sizing: border-box;
            box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
            border-radius: 4px;
            padding: 0;
            font-family: 'Inter';
        }
        
        .leaflet-tooltip-top:before, 
        .leaflet-tooltip-bottom:before, 
        .leaflet-tooltip-left:before, 
        .leaflet-tooltip-right:before {
            content: none;
        }

        &__list {
            border-right: 1px solid #ECECEC;
        }
        &__list-title {
            border-bottom: 1px solid #ECECEC;
        }
        &__country-info {
            border-bottom: 1px solid #ECECEC;
        }
        &__back-button {
            cursor: pointer;
            border-bottom: 1px solid #ECECEC;
        }
        &__detail-switch {
            position: absolute;
            z-index: 1000;
        }
        &__map-container {
            position: relative;
        }
    }

    .cly-vue-draggable {
        &--jumbo-lines .cly-vue-draggable-item {
            background: #F6F6F6;
            border-radius: 6px;
            display: flex;
            justify-content: space-between;
            height: 24px;
            align-items: center;
        }
    }

    .cly-helper-steplist {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            position: relative;
            margin-bottom: 0;
            padding-bottom: 35px;
            &:after {
                content: "";
                position: absolute;
                left: -27px;
                top: 4px;
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                color: #636363;
                font-size: 8px;
            }
            &:before {
                content: "";
                position: absolute;
                left: -23px;
                border-left: 1px dashed #d6d6d6;
                height: 100%;
                width: 1px;
            }
            &:first-child:before {
                top: 6px;
            }
            &:last-child:before {
                height: 6px;
            }
        }
    }

    .cly-vue-panel {
        .widget-header .left {
            .title {
                //Adding margin 0 to overwrite 3px margin added by legacy css
                //The 3px margin should be set on the parent within the component
                //And I have set it there
                margin: 0px;
            }
        }

        .widget-header .right {
            .cly-vue-button {
                float: right;
                margin-top: 6px;
                margin-left: 20px;
            }
        }
        .widget-content.no-border {
            border: none;
        }
    }

    .cly-vue-menubox {
        &.menubox-default-skin {
            display: inline-block;
            .menu-toggler {
                max-width: 400px;
                width: auto;
                height: 27px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                .text-container {
                    overflow: hidden;
                    margin-right: 4px;

                    .text {
                        font-size: 13px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        color: #444;
                    }
                }

                .arrows-wrapper {
                    width: auto;
                    height: auto;
                    padding: 0;
                    margin: 0;

                    .up,
                    .down {
                        width: auto;
                        opacity: 0.8;
                    }

                    .down:before,
                    .up:before {
                        font-size: 9px;
                        color: #fff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 12px;
                        height: 12px;
                        border-radius: 4px;
                        background-color: #444;
                    }
                }

                div.up {
                    display: none;
                }
                &.active div.up {
                    display: block;
                }
                &.active div.down {
                    display: none;
                }
                &:hover {
                    .text {
                        color: #2fa732;
                    }

                    .up:before,
                    .down:before {
                        background-color: #2fa732;
                    }

                    .drop {
                        opacity: 1;
                        background-color: #2fa732;
                    }
                }

                .drop {
                    opacity: 0.8;
                    width: auto;
                    width: 13px;
                    height: 12px;
                    background-color: #444;
                    border-radius: 4px;
                    overflow: hidden;
                    font-size: 0;
                    opacity: 0.8;
                    position: relative;

                    &:before {
                        content: " ";
                        width: 6px;
                        top: 5px;
                        transform: rotate(40deg);
                        position: absolute;
                        height: 2px;
                        background-color: #fff;
                        left: 2px;
                        border-radius: 1px;
                    }

                    &:after {
                        content: " ";
                        width: 6px;
                        top: 5px;
                        transform: rotate(140deg);
                        position: absolute;
                        right: 2px;
                        height: 2px;
                        background-color: #fff;
                        border-radius: 1px;
                    }

                    &:hover {
                        opacity: 1;
                    }
                }

                &.active {
                    .drop {
                        &:before {
                            transform: rotate(140deg);
                        }

                        &:after {
                            transform: rotate(40deg);
                        }
                    }
                }
            }

            .menu-body {
                box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08);
                background-color: #fff;
                position: absolute;
                left: 10px;
                top: 55px;
                z-index: 100;
                border: 1px solid #d0d0d0;
                border-radius: 2px;
                padding: 20px;
                table {
                    width: 100%;
                    tr td {
                        padding: 5px 0px;
                        &:first-child {
                            text-align: right;
                            width: 50px;
                            white-space: nowrap;
                            padding-right: 10px;
                        }
                    }
                }
                .cly-vue-select {
                    background-color: #fdfdfd;
                    width: 100%;
                    .select-items {
                        width: 100%;
                    }
                    .placeholder {
                        color: #d0d0d0;
                    }
                }

                .controls {
                    float: right;
                    margin-top: 10px;
                }
            }
        }
    }

    .cly-vue-text-area {
        font-size: 13px;
        color: #444;
        width: 100%;
        border-radius: 2px;
        resize: none;
        color: #444;
        border: none;
        box-shadow: inset 0 0 0 1px #d0d0d0;
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .cly-vue-text-field {
        display: inline-block;
        width: 100%;
        position: relative;
        .remove-button {
            font-size: 12px;
            color: #d06d6d;
            display: none;
            position: absolute;
            padding: 7px 8px;
            top: 1px;
            right: 1px;
            background-color: white;
        }
        &:hover .remove-button {
            display: block;
            cursor: pointer;
        }
    }

    .cly-vue-button-menu {
        position: relative;
        .toggler {
            color: #a7a7a7;
            font-size: 20px;
            vertical-align: middle;
            line-height: 12px;
            float: right;
            height: 11px;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 1px;
            width: 16px;
            cursor: pointer;
            &:before {
                font-family: "Ionicons";
                content: "\f396";
            }
            &:hover {
                color: #6b6b6b;
            }
        }
        .menu-body {
            padding: 10px 0;
            opacity: 0;
            transition: opacity 0.3s, z-index 0.9s;
            z-index: -1;
            position: absolute;
            background-color: #fff;
            right: -3px;
            top: 20px;
            border-radius: 2px;
            outline: none;
            border: 1px solid #d0d0d0;
            .item {
                cursor: pointer;
                padding: 8px 20px;
                font-size: 13px;
                white-space: nowrap;
                color: #474747;
                display: block;
                &:hover {
                    background-color: #f3f3f3;
                }
                i {
                    margin-right: 7px;
                    width: 13px;
                }
            }
            &.active {
                opacity: 1;
                transition: opacity 0.2s;
                z-index: 2;
            }
            &:before {
                border: 4px solid rgba(194, 225, 245, 0);
                border-bottom-color: #fff;
                right: 7px;
                top: -8px;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                z-index: 2;
            }
            &:after {
                border: 5px solid rgba(194, 225, 245, 0);
                border-bottom-color: #d0d0d0;
                right: 6px;
                top: -10px;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                z-index: 1;
            }
        }
        &.button-menu-single-skin {
            .toggler {
                padding: 6px 5px;
                margin-top: 8px;
            }
            .toggler:hover {
                border: 1px solid #d0d0d0;
                background-color: white;
                color: #6b6b6b;
            }
            .menu-body {
                right: 2px;
                top: 32px;
            }
        }
    }

    .widget-header .cly-vue-select {
        background-color: #ececec;
        position: relative;
    }

    .cly-vue-select {
        position: relative;
        background-color: #fdfdfd;
        user-select: none;
        display: inline-block;
        width: 135px;
        border: 1px solid #d0d0d0;
        border-radius: 2px;
        cursor: pointer;

        &.req {
            border-color: #e95c6c;
        }
        &.disabled {
            opacity: 0.4 !important;
            cursor: default;
        }
        &:not(.disabled):hover .drop.combo:before {
            color: #2fa732;
        }

        &.select-aligned-left {
            text-align: left;
            .text {
                text-align: left;
            }
        }

        &.select-aligned-center {
            text-align: center;
            .text {
                text-align: center;
                padding-right: 9px;
            }
        }

        &.select-aligned-right {
            text-align: right;
            .text {
                text-align: right;
            }
        }

        &.active {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            .drop {
                border-bottom-right-radius: 0;
                &.combo:before {
                    content: "\f126";
                    color: #2fa732;
                }

                &:before {
                    transform: rotate(140deg);
                }

                &:after {
                    transform: rotate(40deg);
                }
            }
        }

        .select-inner {
            //In order to change row height change height property only.
            //The dropdown arrow on right will auto align vertically.
            position: relative;
            width: auto;
            font-size: 0;
            display: flex;
            align-items: center;
            height: 27px;
            padding: 5px 8px;
            box-sizing: border-box;
        }

        .text-container {
            width: 100%;
            margin: 0px;
            box-sizing: border-box;
            overflow: hidden;
            margin-right: 4px;
        }

        .text {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #444;
            font-weight: normal;
            font-size: 13px;
            padding: 0;
            margin: 0;
        }

        .search {
            top: 100%;
            background-color: #fff;
            width: 100%;
            border: 1px solid #d0d0d0;
            margin-left: -1px;
            cursor: default;
            overflow: auto;
            position: absolute;
            z-index: 2000;
            .fa {
                position: absolute;
                right: 0;
                top: 5px;
                color: #ccc;
                font-size: 10px;
            }
            .inner {
                position: relative;
                margin: 5px 8px;
                padding: 4px 1px;
                padding-right: 20px;
                background-color: #fff;
                font-size: 13px;
                line-height: 111%;
            }
            input {
                height: 14px;
                padding: 0;
                margin: 0;
                border: none;
                outline: none;
                width: 100%;
                font-size: 13px;
                line-height: 111%;
                -webkit-appearance: textfield;
                &::-webkit-search-decoration {
                    -webkit-appearance: none;
                }
            }
            + .items-list {
                margin-top: 33px;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }

        .items-list {
            top: 100%;
            z-index: 2;
            position: absolute;
            margin-left: -1px;
            border-radius: 2px;
            background-color: #fff;
            border: 1px solid #d0d0d0;
            width: 100%;

            .scrollable {
                max-height: 188px;
            }
            .warning {
                color: #ff8700;
                font-weight: normal;
                border-bottom: 1px solid #e6e6e6;
                font-size: 11px;
                line-height: 14px;
                padding: 7px 9px;
                cursor: default;
                text-align: center;
            }
            .item {
                // text-overflow: ellipsis;
                // overflow: hidden;
                white-space: nowrap;
                color: #666;
                font-weight: normal;
                border-bottom: 1px solid #e6e6e6;
                font-size: 13px;
                line-height: 111%;
                padding: 5px 9px;
                padding-bottom: 7px;
                &:last-child,
                &.last {
                    border-bottom: none;
                }
                &.hidden {
                    display: none;
                }
                &.navigated {
                    background-color: #f3f3f3;
                }
                &:last-child,
                &.last {
                    border-bottom-left-radius: 2px;
                    border-bottom-right-radius: 2px;
                }
                > div {
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
            .group {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                color: #2fa732;
                font-weight: bold;
                border-bottom: 1px solid #e6e6e6;
                font-size: 11px;
                line-height: 100%;
                padding: 13px 9px 7px 9px;
                text-align: left;
                cursor: default;
                text-transform: uppercase;
                background-color: #fff;
            }
        }

        &.upside-down .items-list {
            bottom: 100%;
            top: auto;
        }

        &.dark {
            border-color: #666;
        }
        &.dark .items-list {
            border-color: #d0d0d0;
        }
        &.dark .items-list .item {
            border-color: #888;
        }

        .flag {
            opacity: 0.8;
            width: 16px;
            height: 11px;
            border-radius: 2px;
            box-shadow: 0 0 1px 0 #333;
            margin-right: 8px;
            margin-top: 2px;
            float: left;
            &.ch {
                margin-right: 13px;
            }
            &.np {
                margin-right: 15px;
            }
        }

        .drop {
            opacity: 0.8;
            width: auto;

            &:hover {
                opacity: 1;
            }

            &.combo:before {
                color: #717171;
                font-family: "Ionicons";
                content: "\f123";
                font-size: 9px;
            }
        }

        &.loading:after {
            content: "Loading...";
            position: absolute;
            top: 1px;
            left: 0;
            color: #d0d0d0;
            background-color: #fdfdfd;
            padding: 5px 40px 5px 11px;
            font-size: 13px;
        }

        &.select-slim-skin {
            border: none;
            width: auto;
            background-color: transparent;

            .select-inner {
                padding: 0px;

                .text-container {
                    width: auto;
                }

                .drop {
                    width: 13px;
                    height: 12px;
                    background-color: #444;
                    border-radius: 4px;
                    overflow: hidden;
                    font-size: 0;
                    opacity: 0.8;
                    position: relative;

                    &:before {
                        content: " ";
                        width: 6px;
                        top: 5px;
                        transform: rotate(40deg);
                        position: absolute;
                        height: 2px;
                        background-color: #fff;
                        left: 2px;
                        border-radius: 1px;
                    }

                    &:after {
                        content: " ";
                        width: 6px;
                        top: 5px;
                        transform: rotate(140deg);
                        position: absolute;
                        right: 2px;
                        height: 2px;
                        background-color: #fff;
                        border-radius: 1px;
                    }
                }
            }

            &:hover {
                .drop {
                    opacity: 1;
                    background-color: #2fa732;
                }

                .text {
                    color: #2fa732;
                }
            }
        }

        &.float-right {
            float: right;
            width: 150px;
            background-color: #fff;
            margin-right: 5px;
            margin-top: 6px;
            &.green {
                float: right;
                width: 150px;
                background-color: #2fa732;
                border-color: #2fa732;
                margin-right: 5px;
                margin-top: 6px;
                .text {
                    color: #fff;
                }
                .drop.combo:before {
                    color: #fff;
                }
                &.disabled {
                    background-color: #fdfdfd;
                    border-color: #d0d0d0;
                    .text {
                        color: #444;
                    }
                    .drop.combo:before {
                        color: #717171;
                    }
                }
            }
        }

        &.disabling-on .items-list .item.disabled {
            opacity: 0.5;
            cursor: default;
            &:hover {
                background-color: #fff;
            }
        }
    }

    .cly-vgt-table {
        &.striped tbody tr:nth-of-type(odd) {
            background-color: #fff;
        }
        &.striped tbody tr:nth-of-type(even) {
             background-color: #fcfcfc;
        }
        tbody tr,
        &.striped tbody tr {
            &:last-child {
                border-bottom: none;
            }
            &:hover {
                background-color: #f1f1f1;
            }
        }
        tbody > tr.vgt-detail-row {
             background-color: #fcfcfc;
        }
        &:not(.striped) > tbody > tr {
            border-bottom: solid 1px #e1e1e1;
            border-top: solid 1px #e1e1e1;
            &.clickable:hover {
                background-color: #f1f1f1;
            }
            &:last-child {
                border-bottom: none;
            }
        }
    }
    // grey ramp
    $base-grey: #d0d0d0 !default;
    $light-grey: #e4e7ed !default;
    $lighter-grey: #ebeef5 !default;
    $extra-light: #f2f6fc !default;

    $header-text-color: #484848 !default;
    $text-color: #6b6b6b !default; //#606266 !default;
    $secondary-text-color: #909399 !default;
    $input-border-color: $base-grey !default;
    $border-color: $base-grey !default;
    $highlight-color: #f1f5fd !default;

    $thead-bg-color-1: #f3f3f3 !default;
    $thead-bg-color-2: #f3f3f3 !default;
    $chevron-color: #bbbbbb; //darken($thead-bg-color-1, 12%);

    // link
    $link-color: #2fa732;
    $notify-bg-color: #fdf9e8;
    $notify-fg-color: #b38d28; /* Utility styles
      ************************************************/
    /*.vgt-right-align {
        text-align: right;
    }*/

    .vgt-left-align {
        text-align: left;
    }

    .vgt-center-align {
        text-align: center;
    }

    .vgt-pull-left {
        float: left !important;
    }

    .vgt-pull-right {
        float: right !important;
    }

    .vgt-clearfix::after {
        display: block;
        content: "";
        clear: both;
    }

    .vgt-responsive {
        width: 100%;
        overflow-x: auto;
        position: relative;
    }

    .vgt-text-disabled {
        color: $secondary-text-color;
    }
    .vgt-wrap {
        position: relative;
    }
    .vgt-fixed-header {
        position: absolute;
        z-index: 10;
        width: 100%;
        overflow-x: auto;
    }
    table.cly-vgt-table {
        font-size: 16px;
        border-collapse: collapse;
        background-color: white;
        width: 100%;
        max-width: 100%;
        table-layout: auto;
        border: none;
        & td {
            padding: 10px 10px;
            margin: 0;
            border-radius: 0 !important;
            font-size: 12px;
            line-height: 15px;
            vertical-align: top;
            color: $text-color;
            height: 20px;
        }
        & tr {
            &.clickable {
                cursor: pointer;
            }
            .undo-row {
                position: absolute;
                left: 0;
                text-align: center;
                padding: 9px 0px;
                background-color: #ffeded;
                color: #2b2b2b;
                margin-top: -9px;
                width: 100%;
                height: inherit;
                a {
                    font-weight: 500;
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
        }
    }
    $sort-chevron-width: 4px;

    .cly-vgt-table {
        & th {
            text-transform: uppercase;
            font-weight: normal;
            line-height: 12px;
            text-align: left;
            padding: 11px 10px 10px 10px;
            vertical-align: middle;
            position: relative;
            font-size: 11px;
            border-top: 1px solid #d0d0d0;
            &:first-child {
                border-left: none;
                //border-top-left-radius: 7px;
            }
            &.sortable {
                cursor: pointer;
                &:after {
                    color: $chevron-color;
                    display: inline-block;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    content: "\f0dc";
                    margin-left: 7px;
                    vertical-align: text-top;
                    margin-top: 4px;
                    line-height: 6px;
                }
            }
        }
        & th.line-numbers,
        & th.vgt-checkbox-col {
            padding: 0 0.75em 0 0.75em;
            color: $text-color;
            border-right: 1px solid $border-color;
            word-wrap: break-word;
            width: 25px;
            text-align: center;
            background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
        }
        & th.filter-th {
            padding: 0.75em 0.75em 0.75em 0.75em;
        }

        th.vgt-row-header {
            border-bottom: 2px solid $border-color;
            border-top: 2px solid $border-color;
            background-color: lighten($border-color, 10%);
            .triangle {
                width: 24px;
                height: 24px;
                border-radius: 15%;
                position: relative;
                margin: 0px 8px;
                &:after {
                    content: "";
                    position: absolute;
                    display: block;
                    left: 50%;
                    top: 50%;
                    margin-top: -6px;
                    border-top: 6px solid transparent;
                    border-bottom: 6px solid transparent;
                    border-left: 6px solid $text-color;
                    margin-left: -3px;
                    transition: 0.3s ease transform;
                }
                &.expand:after {
                    transform: rotate(90deg);
                }
            }
        }

        thead th {
            color: $header-text-color;
            vertical-align: bottom;
            border-bottom: 1px solid #e2e2e2;
            padding-right: 1.5em;
            background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
            &.vgt-checkbox-col {
                vertical-align: middle;
            }
            &.sorting-asc {
                &:after {
                    color: $link-color;
                    display: inline-block;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    content: "\f0de";
                    margin-left: 7px;
                    vertical-align: text-top;
                    margin-top: 7px;
                    line-height: 5px;
                }
            }
            &.sorting-desc {
                &:after {
                    color: $link-color;
                    display: inline-block;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    content: "\f0dd";
                    margin-left: 7px;
                    vertical-align: text-top;
                    margin-top: 2px;
                    line-height: 6px;
                }
            }
        }
    }

    .vgt-input {
        font-size: 13px;
        margin: 0;
        border-radius: 2px;
        background-color: #fff;
        border: 1px solid #ccc;
        width: 200px;
        transition: width 0.5s;
        outline: none;
        padding: 2px 6px;
    }

    .vgt-select {
        width: 100%;
        height: 32px;
        line-height: 1;
        display: block;
        font-size: 14px;
        font-weight: normal;
        padding: 6px 12px;
        color: $text-color;
        border-radius: 4px;
        box-sizing: border-box;
        background-image: none;
        background-color: #fff;
        border: 1px solid $input-border-color;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        &::placeholder {
            /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: $text-color;
            opacity: 0.3; /* Firefox */
        }
        &:focus {
            outline: none;
            border-color: $link-color;
        }
    }

    .vgt-loading {
        position: absolute;
        width: 100%;
        z-index: 10;
        margin-top: 117px;
        &__content {
            background-color: lighten($link-color, 25%);
            color: $link-color;
            padding: 7px 30px;
            border-radius: 3px;
        }
    }

    .vgt-inner-wrap {
        background-color: #ececec;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border: 1px solid #d0d0d0;
        &.is-loading {
            opacity: 0.5;
            pointer-events: none;
        }
    }
    .cly-vgt-table {
        &.bordered td,
        &.bordered th {
            border: 1px solid $border-color;
        }
        &.bordered th.vgt-row-header {
            border-bottom: 3px solid $border-color;
        }
    }
    .vgt-wrap.rtl {
        direction: rtl;

        .cly-vgt-table {
            thead th,
            &.condensed thead th {
                padding-left: 1.5em;
                padding-right: 0.75em;
            }
            th.sorting:after,
            th.sorting-asc:after {
                margin-right: 5px;
                margin-left: 0px;
            }

            th.sortable:after,
            th.sortable:before {
                right: inherit;
                left: 6px;
            }
        }
    }
    .cly-vgt-table {
        &.condensed td,
        &.condensed th.vgt-row-header {
            padding: 0.4em 0.4em 0.4em 0.4em;
        }
    } /*responsive compactMode*/
    @media (max-width: 576px) {
        .vgt-compact {
            * {
                box-sizing: border-box;
            }

            tbody,
            tr,
            td {
                display: block;
                width: 100%;
            }
            thead {
                display: none;
            }
            tr {
                margin-bottom: 15px;
            }
            td {
                text-align: right;
                position: relative;
                &:before {
                    content: attr(data-label);
                    position: relative;
                    float: left;
                    left: 0;
                    width: 40%;
                    padding-left: 10px;
                    font-weight: bold;
                    text-align: left;
                }
            }
            th.line-numbers {
                width: 100% !important;
                display: block;
                padding: 0.3em 1em !important;
            }
        }
    }
    .vgt-global-search {
        float: left;
        padding: 5px 0px;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        border-bottom: 0px;
    }
    .vgt-global-search__input {
        position: relative;
        padding-left: 40px;
        flex-grow: 1;
        &.vgt-pull-left {
            display: none;
        }
        .input__icon {
            position: absolute;
            left: 0px;
            max-width: 32px;
            .magnifying-glass {
                display: none;
            }
        }
        /*.vgt-input {
        }*/
    }
    .vgt-global-search__actions {
        margin-left: 10px;
    }

    .vgt-selection-info-row {
        background: $notify-bg-color;
        padding: 5px 16px;
        font-size: 13px;
        border-top: 1px solid $border-color;
        border-left: 1px solid $border-color;
        border-right: 1px solid $border-color;
        color: lighten($notify-fg-color, 10%);
        font-weight: bold;
        a {
            font-weight: bold;
            display: inline-block;
            margin-left: 10px;
        }
    }

    .vgt-wrap__actions-footer {
        border: none;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        border-top: 1px solid #e2e2e2;
        padding: 0;
        overflow: auto;
        color: #969696;
        font-weight: normal;
        font-size: 10px;
        line-height: 111%;
        text-align: left;
        background-color: #ececec;
        padding: 5px 10px;
    }
    .vgt-wrap__footer {
        color: $text-color;
        padding: 1em;
        border: 1px solid $border-color;
        background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
        .footer__row-count {
            &__label,
            &__select {
                display: inline-block;
                vertical-align: middle;
            }
            &__label {
                font-size: 14px;
                color: $secondary-text-color;
            }
            &__select {
                background-color: transparent;
                width: auto;
                padding: 0;
                border: 0;
                border-radius: 0;
                height: auto;
                font-size: 14px;
                margin-left: 8px;
                color: $text-color;
                font-weight: bold;
                &:focus {
                    outline: none;
                    border-color: $link-color;
                }
            }
        }
        .footer__navigation {
            font-size: 14px;
            &__page-btn,
            &__info,
            &__page-info {
                display: inline-block;
                vertical-align: middle;
            }
            &__page-btn {
                text-decoration: none;
                color: $text-color;
                font-weight: bold;
                white-space: nowrap;
                &:focus {
                    outline: none;
                    border: 0;
                }
                &.disabled,
                &.disabled:hover {
                    opacity: 0.5;
                    cursor: not-allowed;
                    .chevron.left:after {
                        border-right-color: $text-color;
                    }
                    .chevron.right:after {
                        border-left-color: $text-color;
                    }
                }
                .chevron {
                    width: 24px;
                    height: 24px;
                    border-radius: 15%;
                    position: relative;
                    margin: 0px 8px;
                    &:after {
                        content: "";
                        position: absolute;
                        display: block;
                        left: 50%;
                        top: 50%;
                        margin-top: -6px;
                        border-top: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                    }
                    &.left::after {
                        border-right: 6px solid $link-color;
                        margin-left: -3px;
                    }

                    &.right::after {
                        border-left: 6px solid $link-color;
                        margin-left: -3px;
                    }
                }
            }
            &__info,
            &__page-info {
                display: inline-block;
                color: $secondary-text-color;
                margin: 0px 16px;
            }
            &__page-info {
                &__current-entry {
                    width: 30px;
                    text-align: center;
                    display: inline-block;
                    margin: 0px 10px;
                    font-weight: bold;
                }
            }
        }
    }

    @media only screen and (max-width: 750px) {
        /* on small screens hide the info */
        .vgt-wrap__footer .footer__navigation__info {
            display: none;
        }
        .vgt-wrap__footer .footer__navigation__page-btn {
            margin-left: 16px;
        }
    }

    .cly-vgt-custom-controls {
        height: 32px;
        &:hover {
            .cly-vgt-custom-paginator,
            .magnifier-wrapper {
                color: #888;
                transition: color 0.5s;
            }
        }
        .export-toggler {
            float: right;
            font-size: 17px;
            padding: 8px 12px 7px 7px;
            cursor: pointer;
        }
        .export-dialog-container {
            background: #fff;
            color: #000;
            box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            line-height: 18px;
            font-size: 11px;
            border: 1px solid #d0d0d0;
            position: absolute;
            z-index: 10000;
            right: 300px;
            top: -45px;
            &:before {
                content: "";
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                border-color: transparent;
                border-width: 10px;
                border-style: solid;
                left: 100%;
                top: 50%;
                margin-top: -10px;
                border-left-color: #d0d0d0;
            }
            &:after {
                content: "";
                display: block;
                position: absolute;
                width: 0;
                height: 0;
                border-color: transparent;
                border-width: 10px;
                border-style: solid;
                left: 100%;
                top: 50%;
                margin-top: -10px;
                margin-left: -1px;
                border-left-color: #fff;
            }
        }
        .export-dialog {
            padding: 15px;
            width: 240px;
            overflow: visible;
            display: inline-block;
            p {
                margin: 0px;
                font-size: 14px;
                font-weight: bold;
                line-height: 111%;
                margin-bottom: 10px;
            }
            .button-selector {
                font-size: 13px;
                line-height: 111%;
                color: #6b6b6b;
                padding: 0;
                overflow: auto;
                user-select: none;
                box-sizing: border-box;
                width: 100%;
                float: none;
                margin: 0px auto;
                margin-bottom: 10px;
                height: 30px;
                .button {
                    cursor: pointer;
                    user-select: none;
                    background-color: #fbfbfb;
                    float: left;
                    padding: 7px;
                    padding-top: 6px;
                    border: 1px solid #d0d0d0;
                    margin-left: -1px;
                    width: calc(33% - 15px);
                    text-align: center;
                    &:first-child {
                        margin-left: 0;
                        border-top-left-radius: 2px;
                        border-bottom-left-radius: 2px;
                    }
                    &:last-child {
                        border-top-right-radius: 2px;
                        border-bottom-right-radius: 2px;
                    }
                    &.active {
                        background-color: #fff;
                        border: 1px solid #2eb52b;
                        position: relative;
                        z-index: 10;
                    }
                }
            }
            .cly-vue-button {
                width: 100%;
                margin: 0px auto;
                padding-left: 0px;
                padding-right: 0px;
                text-align: center;
            }
        }
    }

    .cly-vgt-custom-search {
        float: left;
        padding: 5px 0 0 10px;
    }

    .cly-vgt-custom-paginator {
        float: right;
        color: #bbb;
        transition: color 0.5s;
        border: none;
        padding: 0;
        overflow: auto;
        font-weight: normal;
        font-size: 10px;
        line-height: 111%;
        text-align: left;
        .buttons {
            float: right;
            span {
                display: inline-block;
                padding: 7px 6px 5px 6px;
                font-size: 20px;
                cursor: pointer;
                border-left: 1px solid #ccc;
                &.disabled {
                    opacity: 0.2;
                }
            }
        }
        .display-items {
            float: right;
            padding: 5px 11px;
            border-left: 1px solid #cccccc;
            label {
                text-transform: uppercase;
            }
            input {
                font-size: 13px;
                margin: 0;
                border-radius: 2px;
                background-color: #fff;
                border: 1px solid #ccc;
                transition: width 0.5s;
                outline: none;
                padding: 2px 6px;
                width: 50px;
                margin-left: 9px;
            }
        }
    }

    .vgt-inner-wrap .magnifier-wrapper {
        color: #bbb;
        transition: color 0.5s;
        border: none;
        padding: 0;
        overflow: hidden;
        font-weight: normal;
        font-size: 10px;
        line-height: 111%;
        text-align: left;
        float: left;
        font-size: 17px;
        padding: 3px 7px 0px 0px;
        cursor: pointer;
        margin-left: -3px;
    }

    .cly-vue-dt-options {
        height: inherit;
        text-align: right;

        .cly-row-options-trigger {
            cursor: pointer;
            color: #a7a7a7;
            font-size: 20px;
            vertical-align: middle;
            line-height: 12px;
            padding: 20px;

            &:before {
                font-family: "Ionicons";
                content: "\f396";
            }
            &:hover {
                color: #6b6b6b;
            }
        }
    }

    .cly-vue-dt-detail-toggler {
        & > div {
            cursor: pointer;
        }
    }

    .cly-vue-row-options {
        .menu {
            padding: 10px 0;
            opacity: 0;
            transition: opacity 0.3s, z-index 0.9s;
            z-index: -1;
            position: absolute;
            background-color: #fff;
            right: 0;
            top: 37px;
            border-radius: 2px;
            outline: none;
            border: 1px solid #d0d0d0;

            &.active {
                z-index: 2;
                opacity: 1;
                transition: opacity 0.2s;
            }

            &:before {
                border: 4px solid rgba(194, 225, 245, 0);
                border-bottom-color: #fff;
                right: 7px;
                top: -8px;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                z-index: 2;
            }
            &:after {
                border: 5px solid rgba(194, 225, 245, 0);
                border-bottom-color: #d0d0d0;
                right: 6px;
                top: -10px;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                z-index: 1;
            }

            .item {
                cursor: pointer;
                padding: 8px 20px;
                font-size: 13px;
                white-space: nowrap;
                color: #474747;
                display: block;
                .fa {
                    margin-right: 7px;
                    width: 13px;
                }
                &:hover {
                    background-color: #f3f3f3;
                }
            }
        }
    }

    .cly-vue-diff-helper {
        position: fixed;
        z-index: 9999;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 64px;

        background: #ffffff;
        border: 1px solid #d0d0d0;
        box-sizing: border-box;
        box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.21539);
        border-radius: 2px;

        .message {
            float: left;
            padding: 22px 24px;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 20px;
            .text-dark {
                color: #333C48;
            }
            .text-light {
                color: #636363;
            }
        }
        .buttons {
            float: right;
            padding: 16px 24px;
            .cly-vue-button {
                padding: 8px 14px;
            }
        }
    }

	.cly-vue-diff-helper-modal-wrapper {
		position: fixed;
		bottom: 6px;
		width: calc(100% - 272px);
		text-align: center;
		left: 272px;
		z-index: 99;
	}
    .cly-vue-diff-helper-modal {
        display:inline-block;
        height: 48px;
        z-index: 9999;

        background: #ffffff;
        border: 1px solid #d0d0d0;
        box-sizing: border-box;
        box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.21539);
        border-radius: 6px;

        .message {
            float: left;
            padding: 22px 24px;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 20px;
            .text-dark {
                color: #333C48;
            }
            .text-light {
                color: #636363;
            }
        }
        .buttons {
            float: right;
            padding: 16px 24px;
            .cly-vue-button {
                padding: 8px 14px;
            }
        }
        .x-button {
            border: 0;
            box-shadow: none;
            padding-left: 0px;
            padding-right: 1rem;
        }
        .vertical-divider {
            border-left: 1px solid #ECECEC;
            height: 16px;
        }
        .cly-io-16 {
            display: contents;
        }
        
    }

    .cly-vue-empty-home {
        height: 430px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        background-color: #fff;

        .image {
            width: 100px;
            height: 100px;
        }

        .info {
            width: 327px;

            .title {
                color: #3a3a3a;
                font-size: 18px;
                margin-bottom: 15px;
                font-weight: 500;
            }

            .text {
                font-size: 14px;
                line-height: 20px;
                color: #81868D;
            }
        }
        // .circle {
        //     width: 250px;
        //     height: 250px;
        //     border-radius: 125px;
        //     background-color: #e8e8e8;
        // }
    }

    .dropzone,
    .dropzone * {
        box-sizing: border-box;
    }

    .dropzone {
        border: 2px solid rgba(0, 0, 0, 0.3);
        background: white;
        padding: 20px 20px;
    }
    .dropzone.dz-clickable {
        cursor: pointer;
    }
    .dropzone.dz-clickable * {
        cursor: default;
    }
    .dropzone.dz-clickable .dz-message,
    .dropzone.dz-clickable .dz-message * {
        cursor: pointer;
    }
    .dropzone.dz-started .dz-message {
        display: none;
    }
    .dropzone.dz-drag-hover {
        border-style: solid;
    }
    .dropzone.dz-drag-hover .dz-message {
        opacity: 0.5;
    }
    .dropzone .dz-message {
        text-align: center;
        margin: 0;
        height: auto;
        position: relative;
        top: unset;
        padding: 19px 0;
    }
    .dropzone .dz-preview {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
        text-align: center;
        padding: 11px 0;
    }
    .dropzone .dz-preview:hover {
        z-index: 1000;
    }
    .dropzone .dz-preview:hover .dz-details {
        opacity: 1;
    }
    .dropzone .dz-preview.dz-file-preview .dz-details {
        opacity: 1;
    }
    .dropzone .dz-preview .dz-remove {
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        border: none;
    }
    .dropzone .dz-preview .dz-remove:hover {
        text-decoration: underline;
    }
    .dropzone .dz-preview:hover .dz-details {
        opacity: 1;
    }
    .dropzone .dz-preview .dz-details .dz-size {
        display: none;
    }
    .dropzone .dz-preview .dz-details .dz-filename {
        white-space: nowrap;
        text-align: center;
        color: #737373;
    }
    .dropzone .dz-preview .dz-success-mark,
    .dropzone .dz-preview .dz-error-mark {
        display: none;
    }
    .dropzone .dz-preview .dz-success-mark svg,
    .dropzone .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px;
    }
    .dropzone .dz-preview .dz-progress {
        display: none !important;
    }
    .dropzone .dz-preview.dz-error .dz-error-message {
        display: block;
    }
    .dropzone .dz-preview.dz-error:hover .dz-error-message {
        opacity: 1;
        pointer-events: auto;
    }

    .vue-dropzone {
        min-height: 100px;
        border-radius: 2px;
        border: dashed 2px #dbdbdb;
        background-color: #ffffff;
        letter-spacing: 0.2px;
        transition: 0.2s linear;
        font-size: 12px;
        color: #636363;
    }
    .vue-dropzone:hover {
        background-color: #f6f6f6;
    }
    .vue-dropzone > i {
        color: #ccc;
    }
    .vue-dropzone > .dz-preview .dz-image {
        display: none;
    }
    .vue-dropzone > .dz-preview .dz-details {
        bottom: 0;
        top: 0;
        color: #fff;
        transition: opacity 0.2s linear;
        text-align: left;
        padding-bottom: 7px;
    }
    .vue-dropzone > .dz-preview .dz-details .dz-filename {
        overflow: hidden;
    }
    .vue-dropzone > .dz-preview .dz-details .dz-filename span {
        background-color: transparent;
        word-break: break-word;
        white-space: normal;
    }
    .vue-dropzone > .dz-preview .dz-progress .dz-upload {
        background: #ccc;
    }
    .vue-dropzone > .dz-preview .dz-remove {
        text-decoration: none;
        color: #d67778;
        cursor: pointer;
        font-size: 12px;
    }
    .vue-dropzone > .dz-preview .dz-error-mark,
    .vue-dropzone > .dz-preview .dz-success-mark {
        margin-left: auto;
        margin-top: auto;
        width: 100%;
        top: 35%;
        left: 0;
    }
    .vue-dropzone > .dz-preview .dz-error-mark svg,
    .vue-dropzone > .dz-preview .dz-success-mark svg {
        margin-left: auto;
        margin-right: auto;
    }
    .vue-dropzone > .dz-preview .dz-error-message {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        width: 100%;
        text-align: center;
    }
    .vue-dropzone > .dz-preview .dz-error-message:after {
        display: none;
    }
}

.cly-vue-tooltip {
    display: block !important;
    z-index: 100000;
    font-size: 12px;
    max-width: 300px;
    margin-top: 8px;
    margin-bottom: 8px;
    $tooltip_color: #191C20;
    $tooltip_arrow_param: 8px;

    .tooltip-inner {
        border: none;
        background: #{$tooltip_color};
        color: white;
        border-radius: 4px;
        padding: 6px 14px;
        line-height: 18px;
    }

    &[aria-hidden="true"] {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.05s, visibility 0.05s;
    }

    &[aria-hidden="false"] {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.05s;
    }
}

.cly-icon-button {
    color: map.get(c.$colors, "action-blue");
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    padding: 7px;
    &--gray {
        color: map.get(c.$colors, "text-secondary");
    }
    &--disabled {
        cursor: default;
        color: map.get(c.$colors, "text-secondary");
        opacity: 0.7;
    }
}


.cly-text-button
{
    color: map.get(c.$colors, "action-blue")!important;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    font-size: 13px;
    font-weight: 500;
	border-radius:4px;
	&-small {
		padding:4px;
	}
    &--gray {
        color: map.get(c.$colors, "text-secondary");
    }
    &--disabled {
        cursor: default;
        color: map.get(c.$colors, "text-secondary");
        opacity: 0.7;
    }
    &:hover {
        background-color: #E6F0FB;
    }
}


.is-scroll-shadow{
    &-at-middle::before,
    &-at-bottom::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 12px;
        background: linear-gradient(180deg, #333c48 0%, rgba(51, 60, 72, 0.0001) 100%);
        opacity: .12;
        z-index: 2001;
    }

    &-at-middle,
    &-at-top {
        .scroll-shadow-container {
            position: absolute;
            width: 100%;
            height: 0px;
            z-index: 2001;
            background-color: red;
            &::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 12px;
                background: linear-gradient(180deg, rgba(51, 60, 72, 0.0001) 0%, #333c48 100%);
                opacity: .12;
                z-index: 2001;
                bottom: 0;
            }
        }
    }
}

.el-table {
    &__empty-text {
        line-height: normal;
    }
}

.cly-vue-empty-view {
    &__img {
        width: 96px;
        height: 96px;
    }

    &__subtitle {
        max-width: 500px;
    }
}

.__vuescroll {
    .__panel {
        overscroll-behavior: contain;
    }
}

.cly-vue-auto-refresh-toggle {
    &__refresh {
        font-size: 18px;
        color: #a7aeb8;
        margin-left: 10px;
        &--enabled {
          font-size: 14px;
          color: #333c48;
        }
        &--enabled-color {
          font-size: 14px;
          color: #0064de;
          margin-left: 5px;
        }
        &--disabled {
          font-size: 14px;
          color: #333c48;
          margin-left: 10px;
        }
    }		
}

.cly-vue-content-builder {
    position: absolute;
    z-index: 2001;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background-color: white;

    &__layout-steps {
        padding: 0 16px;
        .el-collapse-item__wrap {
            overflow: visible;
        }
        .el-collapse-item__content {
            padding-bottom: 0 !important;
        }
        background-color: #FFF
    }

    // .cly-vue-content-builder__layout-header
    &__layout-header {
        box-sizing: border-box;
        display: block;
        width: 100%;
        padding: 16px 24px;
        background-color: #FFFFFF;
    }

    &__layout-main {
        margin: 0px 24px 24px 24px;
        border: 1px solid #ECECEC;
        border-radius: 8px;
        background-color: #FCFCFC;
        min-height: calc(100vh - 106px);

        &__body {
            border-radius: 8px;
            display: flex;
            justify-content: space-between;

            &__dashed-bg {
                background-color: white;
                background-image: radial-gradient(#e0e0e0 1px, transparent 1px), radial-gradient(#e0e0e0 1px, transparent 1px);
                background-size: 10px 10px;
                background-position: 0 0, 20px 20px;
            }

            &__left-sidebar {
                width: 230px;
                border: 1px solid #ECECEC;
                border-radius: 8px;
                margin: 8px 0 8px 8px;
                min-height: calc(100vh - 124px);

                &__header {
                    border-bottom: 1px solid #F6F6F6;
                    padding: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    &__title {
                        display: flex;
                        align-items: center;
                    }
                }
            }

            &__collapse-button {
                padding: 10px;
                border: 1px solid rgb(226, 228, 232);
                border-radius: 12px;
                box-shadow: 1px 1px 1px #E2E4E8;
                height: fit-content;
                margin-top: 8px;
                margin-left: 8px;
                cursor: pointer;

                &__icon {
                    border: 2px solid;
                    border-radius: 5px;
                    width: 16px;
                    height: 17px;

                    i {
                        font-weight: 600;
                    }
                }
            }

            &__right-sidebar {
                width: 348px;
                border: 1px solid rgb(236, 236, 236);
                border-radius: 8px;
                margin: 8px 8px 8px 8px;
                // min-height: calc(100vh - 124px);
                height: calc(100vh - 124px);
                // height: 850px;
                overflow-y: auto;
            }
        }
    }
    .el-collapse {
        border-top: none !important
    }
}

.cly-vue-content-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #FFFFFF;

    // .cly-vue-content-builder-header__actions
    &__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    // .cly-vue-content-builder-header__close-button
    &__close-button {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        border: 1px solid #D1D1D1;
        border-radius: 40px;
        box-shadow: 0px 1px 2px #D1D1D1;
        margin-right: 24px;

        // .cly-vue-content-builder-header__close-button i
        i {
            color: #616165;
            font-weight: 700;
            line-height: 16px;
        }
    }

    // .cly-vue-content-builder-header__info
    &__info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    // .cly-vue-content-builder-header__info-meta
    &__info-meta {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        margin-top: 6px;

        color: #333C48;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }

    // .cly-vue-content-builder-header__input
    &__input {
        // .cly-vue-content-builder-header__input .el-input__inner
        & .el-input__inner { 
            height: initial;
            padding: 0;

            background: transparent;
            border: none;
            border-bottom: 1px solid transparent;
            outline: none;
            border-radius: 0;

            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            color: #333C48;

            // .cly-vue-content-builder-header__input .el-input__inner:focus
            &:focus {
                box-shadow: none;
            }
        }

        // .cly-vue-content-builder-header__input:hover .el-input__inner
        // .cly-vue-content-builder-header__input--editing .el-input__inner
        &:hover .el-input__inner,
        &--editing .el-input__inner {
            border-color: #333C48;
        }
    }

    // .cly-vue-content-builder-header__input-container
    &__input-container {
        display: block;
        cursor: pointer;
    }

    // .cly-vue-content-builder-header__left
    &__left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    // .cly-vue-content-builder-header__options-button
    &__options-button {
        margin-left: 8px;

        // .cly-vue-content-builder-header__options-button.cly-vue-more-options .el-button
        &.cly-vue-more-options .el-button {
            padding: 8px;
            border-radius: 8px;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        }
    }

    // .cly-vue-content-builder-header__save-button
    &__save-button {
        border-radius: 8px;

        // .cly-vue-content-builder-header__badge + .cly-vue-content-builder-header__save-button
        .cly-vue-content-builder-header__badge + & {
            margin-left: 16px;
        }
    }

    // .cly-vue-content-builder-header__tabs
    &__tabs {
        // .cly-vue-content-builder-header__tabs .cly-vue-tabs__primary-tab-list
        & .cly-vue-tabs__primary-tab-list {
            padding: 0;
        }

        // .cly-vue-content-builder-header__tabs .cly-vue-tabs__tab
        & .cly-vue-tabs__tab {
            padding: 8px 12px;
            border-radius: 8px;

            font-size: 14px;
            font-weight: 500;
            line-height: 20px;

            // .cly-vue-content-builder-header__tabs .cly-vue-tabs__tab:not(:first-child)
            &:not(:first-child) {
                margin-left: 8px;
            }
        }
    }

    // .cly-vue-content-builder-header__toggle
    &__toggle {
        margin-right: 16px;
    }

    // .cly-vue-content-builder-header__version
    &__version {
        text-decoration: underline;

        // .cly-vue-content-builder-header__version + .cly-vue-content-builder-header__created-by
        & + .cly-vue-content-builder-header__created-by {
            position: relative;
            margin-left: 12px;

            // .cly-vue-content-builder-header__version + .cly-vue-content-builder-header__created-by::before
            &::before {
                content: '·';
                position: absolute;
                top: 0;
                left: -4px;
                transform: translateX(-50%);
                height: 16px;
                width: 4px;
            }
        }
    }
}

.cly-vue-content-builder-sidebar-input {
    position: relative;

    // .cly-vue-content-builder-sidebar-input__component
    &__component {
        max-width: 50%;
        width: auto;
        box-shadow: none;

        // .cly-vue-content-builder-sidebar-input__component.el-input-number
        &.el-input-number {
            position: relative;

            // .cly-vue-content-builder-sidebar-input__component.el-input-number .el-input__inner
            & .el-input__inner {
                text-align: left;
                padding: 6px 10px;
                padding-right: 34px;
            }
        }

        // .cly-vue-content-builder-sidebar-input__component .el-input__count
        & .el-input__count {
            position: absolute;
            top: 0;
            right: 0;
            transform: translateY(-100%);
            background: transparent;
            font-size: 13px;
            font-weight: 400;
            line-height: 16px;

            // .cly-vue-content-builder-sidebar-input__component .el-input__count .el-input__count-inner
            & .el-input__count-inner {
                padding: 0;
                background: transparent;
            }
        }

        // .cly-vue-content-builder-sidebar-input__component .el-input__inner
        & .el-input__inner {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #383A3F;
            
            background-color: #FFFFFF;
            border: 1px solid #E2E4E8;
            border-radius: 6px;
            padding: 6px 10px;

            // .cly-vue-content-builder-sidebar-input__component .el-input__inner:hover
            &:hover {
                border-color: #0166D6;
            }
        }

        // .cly-vue-content-builder-sidebar-input__component .el-input__suffix
        & .el-input__suffix {
            right: 0;
        }

        // .cly-vue-content-builder-sidebar-input__component .el-input__suffix-inner
        & .el-input__suffix-inner {
            padding: 6px 10px;
            padding-left: 0;
            color: #81868D;
            width: 16px;
        }

        // .cly-vue-content-builder-sidebar-input__component.el-input--suffix
        &.el-input--suffix {
            // .cly-vue-content-builder-sidebar-input__component.el-input--suffix .el-input__inner
            & .el-input__inner {
                padding-right: 34px;
            }
        }

        // .cly-vue-content-builder-sidebar-input__component--slider
        &--slider {
            width: 100%;

            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__bar
            & .el-slider__bar {
                background-color: #0166D6;
            }

            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__button
            & .el-slider__button {
                border: 1px solid #0166D6;
            }

            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__button-wrapper
            & .el-slider__button-wrapper {
                z-index: 0;
            }

            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__runway
            & .el-slider__runway {
                margin: 0;
                background-color: #E2E4E8;
            }
        }

        // .cly-vue-content-builder-sidebar-input__component--upload
        &--upload {
            position: relative;
            display: block;
            width: 100%;
            height: 144px;
            max-width: initial;

            // .cly-vue-content-builder-sidebar-input__component--upload .el-upload
            & .el-upload {
                width: 100%;
                height: 100%;

                // .cly-vue-content-builder-sidebar-input__component--upload .el-upload .el-upload-dragger
                & .el-upload-dragger {
                    border: none;
                    border-radius: 8px;
                    background: #FCFCFC;

                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    width: 100%;
                    height: 100%;

                    // .cly-vue-content-builder-sidebar-input__component--upload .el-upload .el-upload-dragger::hover
                    &:hover {
                        background: #0166D60D;
                    }
                }
            }
        }
    }

    // .cly-vue-content-builder-sidebar-input__input-container
    &__input-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;

        // .cly-vue-content-builder-sidebar-input__input-container--small
        &--small {
            // .cly-vue-content-builder-sidebar-input__input-container--small .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload)
            & .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) {
                max-width: 70px;
            }

            // .cly-vue-content-builder-sidebar-input__input-container--small .cly-vue-content-builder-sidebar-input__component--upload
            & .cly-vue-content-builder-sidebar-input__component--upload {
                max-height: 64px;
            }
        }

        // .cly-vue-content-builder-sidebar-input__input-container--large
        &--large {
            // .cly-vue-content-builder-sidebar-input__input-container--large .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload)
            & .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) {
                max-width: 100%;
            }

            // .cly-vue-content-builder-sidebar-input__input-container--large .cly-vue-content-builder-sidebar-input__component--upload
            & .cly-vue-content-builder-sidebar-input__component--upload {
                height: 224px;
            }
        }

        // .cly-vue-content-builder-sidebar-input__input-container--vertical
        &--vertical {
            flex-direction: column;
            align-items: flex-start;

            // .cly-vue-content-builder-sidebar-input__input-container--vertical .cly-vue-content-builder-sidebar-input__component
            & .cly-vue-content-builder-sidebar-input__component {
                width: 100%;
                max-width: 100%;
            }
        }
    }

    // .cly-vue-content-builder-sidebar-input__label
    &__label {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;

        flex-shrink: 0;
        margin-right: auto;
        font-size: 13px;
        font-weight: 500;
        line-height: 16px;

        // .cly-vue-content-builder-sidebar-input__label i
        i {
            margin-left: 4px;
            font-size: 13px;
            font-weight: 500;
            line-height: 16px;
        }
    }

    // .cly-vue-content-builder-sidebar-input__number-input-suffix
    &__number-input-suffix {
        position: absolute;
        top: 0;
        right: 0;
        padding: 6px 10px;
        padding-left: 0;
        color: #81868D;
        width: 16px;
        font-size: 14px;
        line-height: 20px;
    }

    // .cly-vue-content-builder-sidebar-input__sub-header
    &__sub-header {
        color: #81868D;
        font-size: 13px;
        font-weight: 500;
        line-height: 16px;
        margin-bottom: 16px;
    }
    
    // .cly-vue-content-builder-sidebar-input__upload-action
    &__upload-action {
        height: 24px;
        width: 24px;

        // .cly-vue-content-builder-sidebar-input__upload-action.el-button
        &.el-button {
            background-color: #FFFFFF;
            border-radius: 6px;
            border: 1px solid #E2E4E8;

            display: flex;
            align-items: center;
            justify-content: center;

            // .cly-vue-content-builder-sidebar-input__upload-action.el-button i
            i {
                width: 16px;
                height: 16px;
                font-size: 16px;
                color: #81868D;
            }

            // .cly-vue-content-builder-sidebar-input__upload-action.el-button:hover
            &:hover {
                border-color: #0166D6;
            }
        }
    }

    // .cly-vue-content-builder-sidebar-input__upload-actions
    &__upload-actions {
        position: absolute;
        top: 8px;
        right: 8px;

        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
    }

    // .cly-vue-content-builder-sidebar-input__upload-placeholder
    &__upload-placeholder {
        color: #A7AEB8;
        height: 48px;
        width: 48px;
        font-size: 48px;
    }

    // .cly-vue-content-builder-sidebar-input__upload-value
    &__upload-value {
        width: auto;
        height: 100%;
        object-fit: contain;
        max-width: 100%; // image won't exceed the width of its container
        max-height: 100%; //
    }
}

.cly-option-swapper {
    display: flex;
    align-items: center;
    justify-content: center;

    // .cly-option-swapper__option
    &__option {
        cursor: pointer;
        padding: 8px 10px;
        border: 1px solid #E2E4E8;
        font-size: 13px;
        font-weight: 400;
        line-height: 16px;
        color: #333C48;
        background: #FFFFFF;
        flex-grow: 1;
        text-align: center;

        // .cly-option-swapper__option--active:not(.cly-option-swapper__option--disabled):not(.cly-option-swapper__option--no-highlight)
        &--active:not(#{&}--disabled):not(#{&}--no-highlight) {
            background: rgba(#0166D6, 0.1);
            border-color: #0166D6;
            color: #0166D6;
        }

        // .cly-option-swapper__option--disabled
        &--disabled {
            cursor: not-allowed;
            background: #E2E4E8;
            opacity: 0.5;

            // .cly-option-swapper__option--disabled.has-tooltip
            &.has-tooltip {
                cursor: not-allowed;
            }
        }

        // .cly-option-swapper__option--first
        &--first {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
        }

        // .cly-option-swapper__option--last
        &--last {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }
        
        // .cly-option-swapper__option--disabled.cly-option-swapper__option--active
        &--no-highlight#{&}--active {
            background: #F6F6F6;
        }
    }

    // .cly-option-swapper--disabled
    &--disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
}

.cly-list-drawer {
    .cly-list-drawer__text-clickable {
        color: #0166D6;
        cursor: pointer;
    }
    .cly-list-drawer__text-clickable i {
        transition: transform 0.3s, -webkit-transform .3s;
    }
    .rotate-icon {
        transform: rotate(180deg);
    }
    .cly-io {
        display: inline-block;
    }
    .__view {
        min-height: auto !important; 
    }

    &__list {
        height: 150px;
        background-color: #F6F6F6;
        overflow: auto;
        border-radius: 4px;
        ul {
            list-style: none;
            padding: 0px;
            margin: 0px;
            li {
                padding-left: 16px;
                padding-top: 0.5rem;
            }
            li:first-child {
                padding-top: 1rem;
            }
            li:last-child {
                padding-bottom: 1rem;
            }
        }
    }
}

.cly-vue-device-selector {
    background-color: #FFF;
    border-radius: 10px;
    &__device {
        cursor: pointer;
        border-radius: 8px;
    }
}

.cly-event-select {
    &__loading {
        display: flex;
        margin-top:0;
        position: unset;
        top:0;
    }
}
