html, body {
    color:var(--color_text_default, #4E555C);
}

a.link {
    color:var(--color_primary, #4E555C);
}

.navigator.top {
    border-bottom-color: var(--color_border, #CCCCCC);
    background-color:var(--color_background2, #EEEEEE);
}
.navigator.top .menu > .item,
.navigator.top .menu.userContainer > .item:hover,
.navigator.top .menu.userContainer > .item.active,
.btn-mobile-menu {
    background-color:var(--color_primary, #4E555C);
}
.navigator.top .menu > .item:hover,
.navigator.top .menu > .item.active,
.navigator.top .menu.userContainer > .item,
.btn-mobile-menu:hover,
.btn-mobile-menu.active {
    background-color:var(--color_secondary, #00CD4B);

}

.navigator.top .menu > .item > span,
.navigator.top .menu > .item > a,
.navigator.top .menu.userContainer > .item *[class*="icon"]:before,
.btn-mobile-menu,
.btn-mobile-menu i {
    color:var(--color_text_primary, #FFFFFF);
}
.navigator.top .menu > .item:hover > span,
.navigator.top .menu > .item.active > span,
.navigator.top .menu > .item:hover > a,
.navigator.top .menu > .item.active > a,
.btn-mobile-menu:hover,
.btn-mobile-menu.active,
.btn-mobile-menu:hover i,
.btn-mobile-menu.active i {
    color: var(--color_text_secondary, #FFFFFF);
}

.navigator.top .menu > .item.toggleControl.active > .toggleBlock {
    border:2px solid var(--color_secondary, #00CD4B);
}
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item {
    width:100%;
    line-height:20px;
    background-color:var(--color_primary, #4E555C);
    display:inline-block;
}
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item:hover {
    background-color:var(--color_secondary, #00CD4B);
}
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item > span,
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item > a {
    color:var(--color_text_primary, #FFFFFF);
}

.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item:hover > span,
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item:hover > a {
    color:var(--color_text_secondary, #FFFFFF);
}

.navigator.side {
    background-color:var(--color_background2, #EEEEEE);
    border-right-color:var(--color_border, #CCCCCC);
}

.navigator.side .item > span,
.navigator.side .item > a {
    border-bottom-color:var(--color_border, #CCCCCC);
    color:var(--color_text_default, #4E555C);
}
.navigator.side .item > a {
    background-color: var(--color_background1, #FFFFFF);
    color: var(--color_text_default, #4E555C);
}
.navigator.side .item > a:hover {
    color:var(--color_text_hover, #00CD4B);
}

.bodyContent {
    background-color:var(--color_background1, #FFFFFF);
}
.bodyContent .heading {
    background-color:var(--color_background2, #EEEEEE);
    color:var(--color_text_default, #4E555C);
    border-bottom-color: var(--color_border, #CCCCCC);
}
.bodyContent .heading:not(:first-child) {
    border-top:1px solid var(--color_border, #CCCCCC);
}

.footer {
    border-top-color:var(--color_secondary, #00CD4B);
    background-color:var(--color_primary, #4E555C);
    color:var(--color_text_primary, #FFFFFF);
}
.footer a {
    color:var(--color_text_primary, #FFFFFF);
}


/***** DATA TABLE *****/
.dataTable thead th {
    border-color:var(--color_border, #CCCCCC);
    background-color:var(--color_background2, #EEEEEE);
}
.dataTable thead th span,
.dataTable thead th a {
    color:var(--color_text_default, #4E555C);
}

.dataTable tbody td:first-child {
    border-left-color:var(--color_border, #CCCCCC);
}
.dataTable tbody td:last-child {
    border-right-color:var(--color_border, #CCCCCC);
}
.dataTable tbody td {
    border-bottom-color: var(--color_border, #CCCCCC);
}
.dataTable tbody tr:hover {
    background-color:rgba(78, 85, 92, 0.2);
}
.dataTable tbody td > .icon:before {
    background-color:var(--color_primary, #4E555C);
    color:var(--color_text_primary, #FFFFFF);
}
.dataTable tbody td > .icon:hover:before {
    background-color:var(--color_secondary, #00CD4B);
    color:var(--color_text_secondary, #FFFFFF);
}

.dataTable tbody td > .icon.icon-check-off:before,
.dataTable tbody td > .icon.icon-check-on:hover:before,
.dataTable tbody td > .icon.icon-radio-off:before,
.dataTable tbody td > .icon.icon-radio-on:hover:before {
    color: var(--color_primary, #4E555C);
}
.dataTable tbody td > .icon.icon-check-on:before,
.dataTable tbody td > .icon.icon-check-off:hover:before,
.dataTable tbody td > .icon.icon-radio-on:before,
.dataTable tbody td > .icon.icon-radio-off:hover:before {
    color: var(--color_secondary, #00CD4B);
}

.dataTable tbody td > a {
    font-weight:bold;
    color:var(--color_text_default, #4E555C);
}

.dataTable-filter form input[type=text] {
    border-color: var(--color_border, #CCCCCC);
}
.dataTable-filter form input[type=submit] {
    background-color:var(--color_primary, #4E555C);
    color:var(--color_text_primary, #FFFFFF);
}

.dataTable-filter form input[type=submit]:hover {
    background-color:var(--color_secondary, #00CD4B);
    color:var(--color_text_secondary, #FFFFFF);
}

.dataTable-pages .page-item {
    background-color: var(--color_primary, #4E555C);
    color: var(--color_text_primary, #FFFFFF);
}
.dataTable-pages .page-item:hover,
.dataTable-pages .page-item.active {
    background-color:var(--color_secondary, #00CD4B);
    color: var(--color_text_secondary, #FFFFFF);
}


/***** FORM *****/
form .formRow > span.colorContainer > .box {
    box-shadow: inset 0px 0px 0px 1px rgba(204,204,204,1);
}

form .formRow > input[type=text],
form .formRow > input[type=password],
form .formRow > span.colorContainer > input[type=text]{
    border-color:var(--color_border, #CCCCCC);
}
form .formRow > textarea {
    border-color:var(--color_border, #CCCCCC);
}

form .formRow > input[type=checkbox]:before,
form .formRow > input[type=radio]:before,
.sdff-form input[type=checkbox]:before {
    color:var(--color_primary, #4E555C);
    background-color:var(--color_background1, #FFFFFF);
}
form .formRow > input[type=checkbox]:checked:before,
form .formRow > input[type=radio]:checked:before,
.sdff-form input[type=checkbox]:checked:before {
    color:var(--color_secondary, #00CD4B);
}


form .formRow > select {
    border-color:var(--color_border, #CCCCCC);
}

form .formRow > input[type=submit] {
    background-color:var(--color_primary, #4E555C);
    color:var(--color_text_primary, #FFFFFF);
}
form .formRow > input[type=submit]:hover {
    background-color:var(--color_secondary, #00CD4B);
    color:var(--color_text_secondary, #FFFFFF);
}

.flashMessages .flash {
    border-bottom-color:var(--color_border, #CCCCCC);
}

.sdff-form-root {
    border-color:var(--color_border, #CCCCCC);
}
.sdff-form-languages > .sdff-form-lang {
    background-color: var(--color_background2, #EEEEEE);
    border-color:var(--color_border, #CCCCCC);
}
.sdff-form-block > label,
.sdff-form-list > label,
.sdff-form-list > div > div > label {
    background-color:var(--color_background2, #EEEEEE);
    border-color:var(--color_border, #CCCCCC);
}

.sdff-form-text > input,
.sdff-form-textarea > textarea,
.sdff-form-date > input,
.sdff-form-url > input,
.sdff-form-enum > select,
.sdff-form-condition > input,
.sdff-form-html > .cke {
    border:1px solid var(--color_border, #CCCCCC);
}

.card-group {
    border-bottom:1px solid var(--color_border, #CCCCCC);
}
.card-icon {
    background-color: var(--color_secondary, #00CD4B);
}
.card-icon span:before {
    color: var(--color_text_primary, #FFFFFF);
}
.card .item-qty span {
    color: var(--color_secondary, #00CD4B);
}

.block-head {
    border-bottom:1px solid var(--color_border, #CCCCCC);
}
.inbox .block-head {
    border-bottom:1px solid var(--color_border, #CCCCCC);
}

.block-head .primary *[class*="icon-"]:before,
.block-head .custom *[class*="icon-"]:before {
    color: var(--color_secondary, #00CD4B);
}

.card,
.block.inbox {
    background-color:var(--color_background1, #FFFFFF);
    border:1px solid var(--color_border, #CCCCCC);
}

.btn-primary {
    color: var(--color_text_primary, #FFFFFF);
    background-color: var(--color_primary, #4E555C);
    border-color: var(--color_primary, #4E555C);
}
.btn-primary:hover {
    background-color: var(--color_secondary, #00CD4B);
    border-color: var(--color_secondary, #00CD4B);
}

.btn-primary-outline {
    color: var(--color_primary, #4E555C);
    background-color: transparent;
    border-color: var(--color_primary, #4E555C);
}
.btn-primary-outline:hover {
    color: var(--color_text_primary, #FFFFFF);
    background-color: var(--color_primary, #4E555C);
    border-color: var(--color_primary, #4E555C);
}


.btn-light {
    color: var(--color_text_default, #4E555C);
    background-color:rgba(0,0,0,0.025);
    border-color:rgba(0,0,0,0.1);
    }
.btn-light:hover {
    background-color:rgba(255,255,255,1);
    border-color:rgba(0,0,0,0.25);
    }




/****************/
/* TOTO NIC ... */
/****************/
.rainbowText {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(to bottom, orange 0%,orange 16%, yellow 16%,yellow 32%, green 32%,green 50%, cyan 50%,cyan 66%, blue 66%,blue 82%, violet 82%,violet 100%);
    background-size: 1px 40px;
    animation: rainbowLoop40 0.8s infinite linear;
    font-weight:bold;
}
.rainbowTextH {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
    background-size: 80px 1px;
    animation: rainbowLoop80 0.8s infinite linear;
    font-weight:bold;
}
.rainbowBg {
    background-image: linear-gradient(to bottom, orange, yellow, green, cyan, blue, violet);
    animation: rainbowLoop80 0.8s infinite linear;
    background-size: 80px 80px;
}
.rainbowBgH {
    background-image: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
    animation: rainbowLoop80 0.8s infinite linear;
    background-size: 80px 80px;
}
@keyframes rainbowLoop40 {
    0% {background-position: 0px 0px;}
    100% {background-position: 40px 40px;}
}
@keyframes rainbowLoop80 {
    0% {background-position: 0px 0px;}
    100% {background-position: 80px 80px;}
}

.rainbowX {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 500px 1px;
    animation: rainbowLoopX 20s infinite linear;
    font-weight:bold;
    background-image: linear-gradient(to right,
        /*
        var(--color_text_primary, #FFFFFF) 0%,
        var(--color_text_primary, #FFFFFF) 80%,
        var(--color_text_secondary, #FFFFFF) 85%,
        var(--color_text_default, #4E555C) 90%,
        var(--color_text_hover, #00CD4B) 95%,
        var(--color_text_primary, #FFFFFF) 100%
        */
        var(--color_text_primary, #FFFFFF) 0%,
        var(--color_text_primary, #FFFFFF) 93%,
        orange 94%,
        yellow 95%,
        green 96%,
        cyan 97%,
        blue 98%,
        violet 99%,
        var(--color_text_primary, #FFFFFF) 100%
    );
}
@keyframes rainbowLoopX {
    0% {background-position: 0px 0px;}
    40% {background-position: 0px 0px;}
    50% {background-position: -500px -500px;}
    90% {background-position: -500px -500px;}
    100% {background-position: 0px 0px};
}
/****************/
/****************/
/****************/

/* design-components */
.box,
input:not([type="submit"]) {
    border-color:var(--color_border, #CCCCCC);
    }

.btn-default {
    background-color:var(--color_primary, #4E555C);
    color:var(--color_text_primary, #FFFFFF);
    }
    .btn-default:hover {
        background-color:var(--color_secondary, #00CD4B);
        color:var(--color_text_secondary, #FFFFFF);
        }

a,
.navigator.top .menu .item *[class*="icon"]:before {
    color:var(--color_secondary, #00CD4B);
    }
    .navigator.top .menu .item *[class*="icon"]:hover:before,
    .navigator.top .menu .item.active *[class*="icon"]:before {
        color:var(--color_text_secondary, #FFFFFF);
        }


@keyframes loaderAnimation2 {
    0% {
        box-shadow: inset var(--color_secondary, #00CD4B) 0 0 0 17px;
        transform: rotate(-140deg);
    }
    50% {
        box-shadow: inset var(--color_secondary, #00CD4B) 0 0 0 2px;
    }
    100% {
        box-shadow: inset var(--color_secondary, #00CD4B) 0 0 0 17px;
        transform: rotate(140deg);
    }
}