:root {
    --dynamic-color: rgba(235, 130, 8, 1); /* Valor por defecto */
    --dynamic-color-transparent: rgba(235, 130, 8, 0.25);
}

div.k-tabstrip {
    padding: 0 !important
}

    div.k-tabstrip div.k-tabstrip-items-wrapper {
        padding: 0 !important;
        /*border-bottom: 5px solid var(--dynamic-color)*/
    }

    div.k-tabstrip li.k-tabstrip-item {
        /*border: 1px solid var(--dynamic-color);*/
        border-bottom: 0 !important;
        margin: 0 !important;
        margin-right: 10px !important;
        color: var(--dynamic-color);
        background: none
    }

        div.k-tabstrip li.k-tabstrip-item:hover {
            background: var(--dynamic-color-transparent);
        }

        div.k-tabstrip li.k-tabstrip-item:focus {
            background: var(--dynamic-color-transparent);
            box-shadow: none !important;
            border: 1px solid var(--dynamic-color);
        }

    div.k-tabstrip li.k-active {
        background: var(--dynamic-color) !important;
        color: #fff
    }

    div.k-tabstrip li.k-tabstrip-item span.k-link {
        color: var(--dynamic-color) !important
    }

    div.k-tabstrip li.k-tabstrip-item:hover span.k-link {
        color: #f5f5f5 !important
    }

    div.k-tabstrip li.k-active span.k-link {
        color: #fff !important
    }

.k-tabstrip-top > .k-tabstrip-items-wrapper {
    border-bottom-width: 0px;
}

    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
        border-bottom-right-radius: var(--kendo-border-radius-md, 0.25rem);
        border-bottom-left-radius: var(--kendo-border-radius-md, 0.25rem);
    }

div.k-tabstrip div.k-tabstrip-content {
    /*border: 1px solid var(--dynamic-color);*/
    border: 0 !important;
}

.k-breadcrumb-link {
    color: var(--dynamic-color);
}

#astrol-content-area {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative
}

    #astrol-content-area .k-grid {
        max-width: 100% !important;
        max-height: 80% !important
    }

.k-window {
    margin-left: 1%;
    margin-top: 1%;
    max-width: 98% !important;
    max-height: 96% !important
}

.nia-selection-box, .nia-selection-box-plus {
    float: left;
    position: relative;
    width: 130px;
    height: 130px;
    margin: 10px;
    background: var(--dynamic-color);
    border-radius: 15px;
    padding: 5px;
    color: #fff;
    text-align: center;
    overflow: hidden !important;
    cursor: pointer;
    border: 1px solid #fff;
    box-shadow: 5px 5px 2px #ffae1f30;
    transition: all .3s
}

    .nia-selection-box:hover {
        background: #05275c
    }

.nia-selection-box-plus {
    color: var(--dynamic-color-transparent);
    background: #fff;
    border: 1px dotted var(--dynamic-color-transparent) !important;
    box-shadow: 5px 5px 2px var(--dynamic-color-transparent) !important;
    line-height: 100px;
    margin: 10px 25px
}

    .nia-selection-box-plus:hover {
        transform: scale(1.1);
        transition: all .3s
    }

    .nia-selection-box-plus span.k-icon {
        font-size: 40px;
        line-height: 1.5;
        display: inline-block;
        vertical-align: middle;
        transition: all .2s
    }

    .nia-selection-box-plus:hover span.k-icon {
        font-size: 100px;
        transition: all .2s;
        margin-top: -30px
    }

.nia-head-tab-component {
    float: left;
    width: 100%
}

.float-right {
    float: right
}

.con-gen-palette-a {
    float: left;
    position: relative;
    transition: all .3s;
    margin: 5px 15px
}

    .con-gen-palette-a:hover {
        transform: scale(1.1);
        transition: all .3s
    }

.nia-head-box {
    position: absolute;
    width: 100%;
    text-align: left;
    margin-top: 5px;
    padding: 0 5px;
    margin-left: -23px
}

.sep {
    float: left;
    width: 100%
}

.icon-action-palette {
    position: relative;
    float: left;
    transition: all .1s;
    width: 25px;
    height: 25px;
    font-size: 12px;
    padding: 1px 2px;
    padding-left: 4px;
    z-index: 2;
    margin-top: 10px;
    overflow: hidden;
    text-align: left;
    background: var(--dynamic-color);
    border-radius: 100%;
    cursor: pointer;
    color: var(--dynamic-color);
    background: #fff;
    border: 1px solid var(--dynamic-color);
    box-shadow: 3px 3px 2px #00000020
}

    .icon-action-palette:hover {
        border-radius: 5px;
        background: #fff;
        color: #fff;
        border: 1px solid #fff !important;
        transition: all .2s;
        width: 63%;
        text-align: left;
        box-shadow: 5px 5px 2px #00000020;
        overflow: hidden
    }

    .icon-action-palette .text-s {
        position: absolute;
        float: left;
        margin-left: 6px;
        text-align: left;
        width: 100%
    }

.nia-icon-box {
    float: left;
    width: 100%;
    padding: 10px 0
}

    .nia-icon-box span.k-icon, .nia-icon-box i {
        font-size: 40px !important
    }

.nia-text-box {
    position: relative;
    float: left;
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden
}

    .nia-text-box span {
        line-height: 1.5;
        display: inline-block;
        vertical-align: middle
    }

.nia-palette-content-slection {
    float: left;
    width: 100% !important;
    width: 800px !important;
    border: 1px solid rgba(0,0,0,.08);
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px
}

.nia-palette-selection-component-100 {
    float: left;
    width: 98%;
    margin: 5px 1%
}

.nia-palette-selection-component-50 {
    float: left;
    width: 48%;
    margin: 5px 1%
}

.nia-palette-selection-head-component {
    float: left;
    width: 100%;
    text-transform: uppercase;
    border-bottom: 1px solid var(--dynamic-color)
}

    .nia-palette-selection-head-component span.text {
        float: left;
        padding: 5px 0
    }

.nia-palette-selection-icon-action {
    float: right;
    width: 22px;
    height: 22px;
    color: #fff;
    background: var(--dynamic-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s;
    margin-left: 5px
}

    .nia-palette-selection-icon-action:hover {
        background: #05275c;
        box-shadow: 0 0 3px #ffae1f80;
        transform: scale(1.3);
        transition: all .3s
    }

.col-red-bi {
    background: #8a0000
}

    .col-red-bi:hover {
        background: #630000
    }

.nia-palette-selection-body-component {
    float: left;
    width: 100%;
    padding-left: 20px
}

    .nia-palette-selection-body-component .int-body-palette {
        float: left;
        width: 100%;
        position: relative;
        min-height: 50px;
        border-left: 1px solid var(--dynamic-color);
        padding: 5px;
        background: #ffff
    }

.row-join-int-sql-icon {
    float: left;
    width: 100%;
    padding: 5px;
    margin: 5px 0
}

    .row-join-int-sql-icon:hover {
        background: #f5f5f5
    }

.nia-modal-container-400 {
    width: 720px;
    float: left
}

.con-select-c2 {
    width: 100%;
    float: left
}

.con-select-col1 {
    width: 75%;
    float: left;
    padding-right: 10px
}

.con-select-col2 {
    width: 25%;
    float: right;
    text-align: right
}

.disabled {
    background: var(--dynamic-color-transparent) !important;
    cursor: default !important;
    border: 0 !important
}

    .disabled:hover {
        background: var(--dynamic-color-transparent) !important;
        cursor: default !important;
        border: 0 !important;
        box-shadow: none !important
    }

.conten-structure-secudnary-modal-relation {
    width: 100%;
    float: left;
    padding: 10px;
    border: 1px solid var(--dynamic-color);
    margin: 10px 0
}

.cont-gen-item-table-nia-selected, .cont-gen-item-table-nia-selected-3, .cont-gen-item-table-nia-selected-center {
    width: 100%;
    float: left;
    background: #f5f5f5;
    padding: 5px;
    margin: 10px 0
}

.cont-gen-item-table-nia-selected-3 {
    width: 37%;
    margin: 10px 1%
}

.cont-select-astrol {
    width: 400px
}

.cont-gen-item-table-nia-selected-100 {
    width: 100%;
    float: left;
    padding: 5px;
    margin-bottom: 10px
}

.cont-gen-item-table-nia-selected-center {
    width: 20%;
    margin: 10px 1%;
    text-align: center
}

.item-table-nia-selected {
    width: 100%;
    float: left;
    background: var(--dynamic-color);
    color: #fff;
    float: left;
    padding: 5px 10px;
    height: 30px
}

.item-table-nia-selected-relation, .item-table-nia-selected-remove {
    float: right;
    background: #fff;
    width: 30px;
    height: 30px;
    color: var(--dynamic-color) !important;
    padding: 2px;
    border-radius: 100%;
    border: 1px solid var(--dynamic-color);
    margin-left: 10px;
    margin-top: -15px;
    text-align: center;
    cursor: pointer
}

    .item-table-nia-selected-relation:hover {
        background: #05007d;
        border: 1px solid #fff;
        color: #fff !important
    }

    .item-table-nia-selected-remove:hover {
        background: #630000;
        border: 1px solid #fff;
        color: #fff !important
    }

    .item-table-nia-selected-relation span, .item-table-nia-selected-remove span {
        font-size: 20px
    }

.nia-modal-jon {
    width: 700px;
    min-height: 180px
}

.nia-modal-conditional {
    width: 800px;
    min-height: 180px
}

.con-options-join, .con-options-join-in {
    width: 100%;
    float: left;
    border: 1px solid var(--dynamic-color);
    padding: 5px;
    min-height: 80px;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff !important
}

.con-options-join-in {
    height: 170px
}

.row-options-join:nth-child(even) {
    background: #f5f5f5
}

.row-options-join {
    cursor: pointer;
    width: 100%;
    float: left;
    padding: 5px
}

    .row-options-join:hover {
        background: #ffae1f60
    }

.row-options-join-check {
    background: #ffae1f60 !important
}

.nia-join-modal-con-primary {
    width: 100%;
    float: left
}

.nia-color-blue {
    color: #00f;
    font-weight: bold
}

.nia-color-red {
    color: #f00;
    font-weight: bold
}

.nia-color-green {
    color: #008000;
    font-weight: bold
}

.nia-modal-jon-con-html {
    float: left;
    width: 100%;
    border-top: 0;
    background: #f5f5f5;
    margin-top: 10px;
    padding: 5px;
    border-top: 1px solid var(--dynamic-color);
    min-height: 50px;
    max-height: 200px;
    overflow: hidden;
    overflow-y: auto
}

.row-nia-modal-jon-con-html {
    float: left;
    width: 100%;
    padding: 5px
}

    .row-nia-modal-jon-con-html:first-child {
        background: #fff
    }

    .row-nia-modal-jon-con-html:nth-child(2n+3) {
        background: rgba(245,245,245,.5) !important
    }

.row-nia-modal-jon-con-html-remove {
    float: right;
    cursor: pointer;
    border: 1px solid #630000;
    color: #630000;
    background: #fff;
    height: 25px;
    width: 25px;
    text-align: center;
    border-radius: 100%;
    padding: 1px
}

    .row-nia-modal-jon-con-html-remove:hover {
        color: #fff;
        background: #630000
    }

.col-90-fl {
    float: left;
    width: 90%
}

.col-10-fl {
    float: left;
    width: 10%
}

.nia-join-modal-button {
    float: left;
    width: 100%;
    margin-top: 10px
}

.img-icon-join {
    float: left;
    margin: 0 2px;
    max-height: 18px
}

.no-data-content {
    width: 100%;
    float: left;
    text-align: center;
    padding: 20px 10px;
    color: #808080;
    font-size: 16px
}

.nia-icon-action-show-code {
    background: #fff !important;
    color: var(--dynamic-color);
    border: 1px dotted var(--dynamic-color);
    margin-right: 5px
}

.nia-code-black {
    float: left;
    width: 100%;
    background: #222;
    color: #f5f5f5 !important;
    padding: 10px;
    border: 2px dotted #fff;
    max-height: 200px;
    overflow: auto
}

    .nia-code-black .nia-color-blue {
        color: #42cee1
    }

    .nia-code-black .nia-color-green {
        color: #96fb85
    }

    .nia-code-black .nia-color-red {
        color: #ff6e5f
    }

.onli-item {
    float: left;
    padding: 5px;
    width: 100%
}

.icon-action-edit-palette {
    position: absolute;
    float: right
}

.nia-modal-palette-ouput {
    width: 750px
}

.show-attr-nia-select {
    float: right
}

.nia-palette-ouput-50 {
    float: left;
    border: 1px solid var(--dynamic-color);
    margin: 5px .5%
}

    .nia-palette-ouput-50 div.con-options-join {
        border: 1px solid var(--dynamic-color);
        padding: 5px;
        height: auto !important;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto
    }

    .nia-palette-ouput-50 div.head {
        text-align: center;
        padding: 5px;
        text-transform: uppercase;
        color: var(--dynamic-color);
        background: #f5f5f5
    }

    .nia-palette-ouput-50 div.body {
        height: 400px;
        overflow: hidden;
        overflow-y: auto;
        border-top: 1px solid var(--dynamic-color)
    }

.trash-ouput, .connector-edit {
    width: 25px;
    height: 25px;
    color: #630000;
    background: #fff;
    border: 1px solid #630000;
    border-radius: 5px
}

    .trash-ouput:hover {
        color: #fff;
        background: #630000
    }

.connector-edit {
    color: var(--dynamic-color);
    border: 1px solid var(--dynamic-color)
}

    .connector-edit:hover {
        color: #fff;
        background: var(--dynamic-color)
    }

.nia-modal-palette-ouput div.second {
    width: 65%
}

.nia-modal-palette-ouput div.first {
    width: 32%
}

.row-options-join .col-30 {
    float: left;
    width: 25%;
    padding: 5px;
    text-align: right;
    overflow: hidden
}

.row-options-join .col-35 {
    float: left;
    width: 30%;
    padding: 5px;
    text-align: right;
    overflow: hidden
}

.row-options-join .col-50 {
    float: left;
    width: 50%;
    padding: 5px;
    text-align: left;
    overflow: hidden
}

    .row-options-join .col-50 input {
        float: left;
        width: 100%;
        padding: 2px 5px;
        text-decoration: none !important;
        outline: 0;
        border-radius: 5px;
        border: 1px solid #00000028
    }

        .row-options-join .col-50 input:hover {
            border: 1px solid #00000068
        }

.row-options-join .col-5 {
    float: left;
    width: 5%;
    padding: 5px 0;
    text-align: center
}

.row-options-join .col-4 {
    float: left;
    width: 5%;
    padding: 5px 0;
    text-align: center
}

.row-options-join .col-10 {
    float: left;
    width: 15%;
    padding: 5px 0;
    text-align: center;
    overflow: hidden
}

.pad-5 {
    padding: 5px
}

.con-int-ouput-has-calendar {
    float: left;
    width: 100%;
    padding: 5px;
    margin-left: -23px
}

    .con-int-ouput-has-calendar div.con-int-calendar {
        float: left;
        width: 100%;
        margin-left: 30px
    }

.con-int-calendar span.k-combobox {
    width: 40% !important;
    float: left
}

.cont-item-calendar {
    border: 1px solid var(--dynamic-color)
}

.nia-info {
    width: 100%;
    background: #fff;
    border: 1px dashed var(--dynamic-color);
    border-left: 5px solid var(--dynamic-color);
    padding: 10px 5px;
    border-radius: 0 5px 5px 0;
    margin: 5px 0;
    color: #1e3c3c
}

    .nia-info span {
        font-size: 30px
    }

.row-options-join .calendar {
    color: #e2dfdf;
    font-size: 20px;
    transition: all .2s
}

.row-options-join:hover .calendar {
    color: #222;
    font-size: 25px;
    transform: scale(1.1);
    transition: all .2s
}

.row-options-join .calendar-active {
    color: #630000 !important;
    font-size: 20px;
    cursor: auto
}

.groupCondition {
    border: 1px solid #dfdfdf;
    padding: .5rem;
    margin: .5rem
}

.icon-action-parenthesis::after {
    content: "( )";
    padding: 4px 0 0 2px
}

.containerSelectValues {
    min-height: 10rem;
    min-width: 20rem
}

.attributePalette:hover {
    cursor: pointer
}

.paletteOption {
    background: var(--dynamic-color);
    color: #fff
}

.valueAttribute {
    font-weight: bold
}

.listPalettes {
    padding-left: 0
}

.attributeCondition:hover {
    cursor: pointer
}

.contentRestriction {
    min-height: 10rem;
    margin: 1rem;
    min-width: 30rem
}

.conditionOperator {
    font-weight: bold;
    color: #00f
}

.paletteCondition {
    font-weight: bold
}

.valueCompare {
    font-weight: bold;
    color: #198754
}

.color-dark-green {
    color: var(--dynamic-color);
    font-weight: bold !important
}

button.nb-fr {
    float: right !important;
    margin-right: 10px !important
}

.clum-a-calendar {
    float: left;
    width: 100%;
    margin-top: 10px;
    border: 1px solid var(--dynamic-color);
    border-radius: 5px;
    overflow: hidden
}

.header-calendar-restrictions {
    float: left;
    width: 100%;
    border-bottom: 1px solid var(--dynamic-color);
    padding: 5px;
    background: #f5f5f5;
    text-transform: uppercase
}

    .header-calendar-restrictions div {
        float: right
    }

.row-restriction-calendar {
    width: 100%;
    float: left;
    padding: 10px 5px
}

    .row-restriction-calendar:hover {
        background: #ffae1f46
    }

.no-hover:hover {
    background: none !important
}

.col-A-r-c, .col-B-r-c {
    float: left;
    width: 100%;
    max-width: 27.5% !important;
    padding: 0 5px;
    text-align: center
}

    .col-B-r-c b {
        float: left;
        width: 100%;
        vertical-align: middle;
        border: 1px solid var(--dynamic-color);
        padding: 6px 10px;
        cursor: pointer;
        border-radius: 5px;
        background: #fff;
        overflow: auto;
        position: relative
    }

        .col-B-r-c b:hover {
            background: var(--dynamic-color);
            color: #fff
        }

.conditional-operator-r-c, .logical-operator-r-c {
    float: left;
    width: 20%;
    text-align: center;
    padding: 0 5px
}

.logical-operator-r-c {
    width: 20%;
    float: right
}

.remove-r-c {
    float: left;
    width: 5%;
    padding-top: 5px
}

    .remove-r-c span.col-red-bi {
        float: left
    }

.mt-20px {
    margin-top: 10px;
    float: left;
    width: 100%
}

.internal-sep-rc {
    padding: 5px;
    float: left;
    width: 100%
}

.row-html-restriction {
    float: left;
    width: 100%;
    margin: 10px 0
}

    .row-html-restriction div.float-left {
        padding: 0 5px
    }

    .row-html-restriction .border-box {
        padding: 2px 3px;
        border-radius: 5px;
        color: #fff;
        background: var(--dynamic-color);
        min-width: 40px;
        text-align: center;
        font-size: 12px
    }

.attributeCondition:hover {
    background: var(--dynamic-color);
    color: #fff !important
}