a:link,.link, a:visited { color:{mainColor}; }
a:hover, .link:hover,.link.normal:hover,a.normal:hover  { color:{hoverColor};}
::selection { background-color: {mainColor}4D; }
.OnlyTextTips.remember:after{color:{mainColor}}

.Menu{border:none;}
.MDITabCaption:hover{color:{mainColor};background-color:#fafafa;}
.MDITabCaption.active { color:{mainColor};}

.MDITabBar .Button.SpeedButton:hover,
.MenuBar .MenuRootActive,
.MenuBar .MenuRoot.active,
.MenuBar .MenuRoot.Show,
.MenuBar .MenuRoot:hover { background-color: {hoverColor}}

.Menu .MenuItem:hover,
.NormalMenu.Menu .MenuItem:hover {background-color:{hoverColor};color:{fontColor}}

.Menu .MenuItem:hover .MenuShortcut { color:{fontColor}; }

.Menu .MenuItem.MenuText,
.Menu .MenuItem.MenuText:hover .MenuCaption,
.RootMenu.Menu .MenuItem.lockIcon .MenuSpacerRight:before{color:{mainColor};}

.FormBorder,
.Popup.Modal{border-top-color:{mainColor};}
.UISkinIcon:hover,.FormCaption .FormCaptionButton:hover{background-color: {hoverColor};}

.Popup.p-top,.Popup.p-left,.Popup.p-right,.Popup.p-bottom{border-color:{mainColor};}
.Popup.p-top .PopupArrow{border-bottom-color: {mainColor};}
.Popup.p-bottom .PopupArrow{border-top-color: {mainColor};}
.Popup.p-left .PopupArrow{border-right-color: {mainColor};}
.Popup.p-right .PopupArrow{border-left-color: {mainColor};}

.Button:hover, 
.Button.hover,
.Button.SecondButton:hover, 
.Button.SecondButton.hover,
.Button.hasRight:hover,
.Button.hasRight.ShowDrop,
.Buttons .Button:hover{ border-color: {lightColor}; background-color:{lightColor};color:#333;}

.Button:active,.Button.BorderButton:active,.Button.SecondButton:active { border-color: {mainColor}; color: {mainColor}; background-color:{lightColor};}
.Button .RightIcon { border-color: {hoverColor}; }
.Button.hasClick .RightIcon:hover { background-color: {lightColor};color:{mainColor}}
.Button.SpeedButton:hover,.SpeedButton.icononly:hover{color:{mainColor};}
.Buttons .Button.active{border-color: {mainColor}; background-color: {mainColor};color: #fff;}
.Button.SpecialButton.HasLine .RightIcon:after,
.Button.SpecialButton.hasClick .RightIcon:hover{background-color: {hoverColor};color:#fff;}
.Button.SpecialButton.HasLine .RightIcon:after,
.CombEditor .Button.SpecialButton:after {border-color: {hoverColor};}
.Button.SpecialButton.HasLine .RightIcon {background-color: {mainColor};}

.SwitchButton.checked { background-color: {mainColor} }
.SwitchButton.checked.disabled { background-color: {lightColor}; }

.Normal.Buttons .Button.active:after {border-color: transparent transparent {mainColor} transparent;}
.TabNormal.Buttons .Button.active,
.TabNormal.Buttons .Button:hover,
.Border.Buttons .Button.active,
.Normal.Buttons .Button.active { border-color: {mainColor};color:{mainColor}}
.EditBlock .SkinButton:hover { color: {mainColor}; }

.Button.SpecialButton.rightHover.HasLine,
.Grid .Button.SpecialButton,
.Button.SpecialButton{background-color: {mainColor}; border-color:{mainColor};color:#fff;}
.Grid .Button.SpecialButton:hover,
.Button.SpecialButton:hover,
.Button.SpecialButton.hover, 
.Button.SpecialButton:active {background-color: {hoverColor}; border-color: {hoverColor};color:#fff;}
.Button.SpecialButton.ShowDrop{background-color: {mainColor}; border-color: {mainColor};color:#fff;}
.ShowDrop .ArrowCombo:before, 
.ShowPopup .ArrowCombo:before{color:{mainColor};}

.Edit.hover,
.Edit:hover,
.TextArea:hover,
.EditBlock:hover .SkinButton,
.EditBlock:hover .Edit,
.EditBlock:hover .SkinButtonBlock,
.TextEdit:focus,
.TextArea:focus,
.EditBlock.active .SkinButton,
.EditBlock.active .Edit,
.EditBlock.active .SkinButtonBlock { border-color: {mainColor};}


.TreeView .Buttons .Button:hover { background-color: {mainColor};}
.LayoutGroupCaption:before,
.FlexBlock .FlexCaption .text:before,
.FlowPanel .FlowCaption:before{background-color:{mainColor};}

.DropItem.selected,
.TreeNode.selected,
.TreeView.ShowLine .TreeNode.selected,
.TreeTitle:hover,
.CheckBoxListPopup .VertItem:hover, 
.TreeView .TreeNode:hover{color:{mainColor}; background-color:{lightColor}}
.TreeNode .EditorBlock .SkinButton:hover{background-color: {mainColor};}
.TreeNode .EditorBlock{background-color:{lightColor} }


.TabHeader .TabCaption.active,
.TabHeader .TabCaption:hover{ color:{mainColor};}
.PageControl.MaxTab2>.TabHeader .TabCaption.active {background-color: {mainColor};border-color: {mainColor}}
.PageControl.MaxTab>.TabHeader .TabCaption.active {color: {mainColor};border-color: {mainColor};}

.CellIcons div:hover,
.Grid .GridDynamicButtonBody .aicon:hover,
.Grid .SkinButton:hover { color: {mainColor}; }
.Grid .activeEditor { border-color:{mainColor};  box-shadow: 0 0 2px 1px {hoverColor};}

.Grid .GridBodyRow.hover >td,
.Grid .GridBodyRow:hover >td,
.GridBlock.NoBorder .GridBodyRow:hover >td{ background-color:{lightColor};}

.ColorPopup .Title,
.TreeView .Buttons{background-color: {lightColor};}

.Grid .LinkColumn,
.Grid .GridDynamicButtonBody a,
.Grid .GridDynamicButtonBody a:link,
.Grid .GridDynamicButtonBody a:visited { color: {mainColor}; }
.Grid .LinkColumn:hover,
.Grid .GridDynamicButtonBody a:hover { color: {hoverColor}; }
.GridDynamicButtonBody.Normal a:hover { background-color: {mainColor}; color:#fff; }
.Grid .IconRight .GridHeaderCaptionText:hover:before{color:{mainColor};}

.CalendarMain .DayCell.selected { background-color: {mainColor}; }

.CalendarRange .CalendarMain .DayCell.mtCurr:hover,
.CalendarMain .DayCell:hover { background-color: {mainColor};}

.CalendarRange .CalendarMain .DayCell.inRange{background-color: {lightColor};}
.CalendarRange .CalendarMain .DayCell.start, 
.CalendarRange .CalendarMain .DayCell.end {background-color: {mainColor};}
.CalendarMain .CalendarTitle span:hover,
.MonthPopup ._td:hover { color: {mainColor}; }
.CalendarMain .TodayButton:hover{background-color: {mainColor};}
.MonthPopup ._td.selected{background-color: {mainColor}; color:{fontColor};}

.CalculatorPopup .ctorRight>*,.CalculatorPopup .Btn.opt{color:{mainColor};}
.CalculatorPopup .Btn.equalsign{background-color:{mainColor};color:{fontColor};}
.CalculatorPopup .Btn:hover{background-color:{mainColor};color:{fontColor};}
.NavBar .NBGroupHeader:hover { color: {mainColor}; background-color: {lightColor}; }

.ChkBoxStyle:hover:before{border-color:{mainColor};}
.ChkBoxStyle.checked:before { background-color: {mainColor}; border-color:{mainColor};}
.ChkBoxStyle.checked.disabled:before{ color:{mainColor};}
.ChkBoxStyle.half:before{ border-color:{mainColor};color:{mainColor};background-color:#fff;}
.RadioButtonList .ChkBoxStyle.checked:before, 
.RadioButton.ChkBoxStyle.checked:before { border-color:{mainColor};}
.RadioButtonList .ChkBoxStyle.checked.disabled:before, 
.RadioButton.ChkBoxStyle.checked.disabled:before { background-color:{mainColor};}

.HomeMenu {background-color: {mainColor};}

.Workflow.Radius .WorkItem.HasNext,
.Workflow.Radius .WorkItem.HasPrev{background-color:{mainColor} ;border-color:{mainColor}}
.Workflow .WorkResizer .Add{color:{mainColor};border-color: {mainColor};}
.Workflow .WorkResizer .Add:hover{background-color: {hoverColor};color:#fff;}
.Workflow .WorkResizer .FResizer,
.Workflow .WorkItem .WorkResizer{border-color:{mainColor};}
.Wholesale .Workflow .WorkItem:hover{background-color: {mainColor};}
.RetailPage .Workflow .WorkItem:hover:before { background-color: {mainColor}; }
.RetailPage .Workflow .WorkItem:hover { color: {mainColor}; }

.CheckBox.Border:hover,
.CheckBoxList.Border .ChkBoxStyle:hover,
.CheckBoxList.Border .ChkBoxStyle.checked {border-color: {mainColor};}
.LeftButtons.Buttons .Button:hover,
.LeftButtons.Buttons .Button.active{color:{mainColor};}


.Button.BorderButton{border-color: {mainColor};color:{mainColor}}
.Button.BorderButton:hover { border-color: {mainColor}; color: {mainColor}; background-color:{lightColor}; }
.Button.BorderButton.active{border-color:{mainColor}}
.Button.SpeedButton.BorderButton:hover,.Button.BorderButton.NoBorder:hover{color:{hoverColor};}
.ButtonEdit.Buttons .Button {background-color: {lightColor};color: {mainColor};border-color: {mainColor};}
.ButtonEdit.Buttons .Button:hover{background-color:{hoverColor};color: #fff }


.ListGrid .GridBodyRow.active .GridBodyCell:first-child {border-left-color: {mainColor};}
.ListGrid .GridBodyRow:hover .GridBodyCell{color:{mainColor};}

.Pager .PagerButton.active,
.Pager .PagerButton:hover{color:{mainColor};border-color:{mainColor}}

.TipBox,.TipBox:before,.TipBox:after{border-color:{mainColor};}
.TipBox{box-shadow: 3px 4px 2px 4px {lightColor};}

.ProgressBar { background-color: {hoverColor}4D; }
.ProgressBar .ProgressValue {  background-image: linear-gradient(90deg, {mainColor} 0%, {hoverColor} 100%);}

.ProgressBar.hasItems .Item.active{color:{mainColor};}
.ProgressBar.hasItems .Item.active:before{background-color: {mainColor};border-color:{mainColor};}
.Grid .ProgressBar .ProgressValue{background-color: {mainColor};}
.ButtonEdit.Buttons .Button span:hover{color:{mainColor};}
.MoreColumn .GridHeaderCaptionText{color:{mainColor};}

.Grid .GridBodyRow:hover .DefaultEditor.GridBodyCell { box-shadow: inset 0 0 0 1px {mainColor};}
.Grid .RowNoConfigIcon:hover { color: {mainColor}; }
.Popup.Step .Bottom .Label:hover{color:{mainColor}}

.Grid .GridHeaderBar .GridHeader .GridHeaderCaption.focus{border-color:{mainColor}; background-color: {mainColor};color:#fff;}
.Grid .GridFilterBar .GridFilterBlock.focus,
.Grid .GridHeaderBar .GridHeader .GridHeaderCaption.focus,
.Grid .GridBody .GridBodyCell.focus{border-left: 1px solid {mainColor}; border-right: 1px solid {mainColor};}
.Grid .GridBody .GridBodyRow:last-child .GridBodyCell.focus{border-bottom:1px solid {mainColor};}
.PageControl.TabVert > .TabHeader .TabCaption.active{background-color:{mainColor};border-color:{mainColor};}

.RadioView .UI_ListItem:hover{border-color: {mainColor};}
.RadioView .UI_ListItem.active{background: {lightColor};border-color:{mainColor}}
.RadioView .UI_ListItem.active .icon{color:{mainColor}}

.DragGroups .CurDrop{box-shadow:0 0 5px {lightColor}; }

.DragSpacer{border-left-color:{mainColor};}
.DropStyle, .TreeBlock.DropStyle, .GridBlock.DropStyle{box-shadow: 0 0 8px {lightColor};}

.SkinColor, .SkinColorIcon:before{color:{mainColor} !important;}
.SkinColor:hover,.SkinColorHover:hover{color: {mainColor} !important}
.SkinLightBg,.SkinLightBgHover:hover{background-color:{lightColor} !important;}
.SkinBorder,.SkinBorderHover:hover{border-color:{mainColor} !important;}
.SkinBg,.SkinBgHover:hover{background-color:{mainColor} !important;}

.TimePopup .TimeBody .item.selected,
.TimePopup .TimeBody .item:hover{background-color:{lightColor};}
.TimePopup .TimeBody .item.selected{color:{mainColor};}
.CalendarMain .DayCell.Today{border-color: {mainColor}}
.CalendarMain .TodayButton{color:{mainColor};}
.WorkChart .WorkChartItem:hover{background-color:{hoverColor};border-color: {hoverColor};color: #fff}
.MonthPopup .YearArrowRow .DateArrow:hover{background-color:{hoverColor};}
.Popup.Step .StepNums .item.cur{background-color:{mainColor};}

.MDITabCaption.active.homeIcon:before,
.NoBorder.Buttons .Button:hover, 
.NoBorder.Buttons .Button.active{color:{mainColor}}

.CalendarRange .RangeDay,
.CalendarRange .LeftButtons .Button:hover{color:{mainColor};}

.NormalList .UI_ListView .UI_ListItem:hover,
.NormalList .UI_ListView .UI_ListItem.active {background-color:{lightColor}; color: {mainColor}}

@keyframes bgcolor-animation {0% {color: #333;}50% {color: {mainColor}}100% {color: #333;}10%,90% {transform: translate3d(-2px, 0, 0);}20%,80% {transform: translate3d(+3px, 0, 0);}30%,70% {transform: translate3d(-6px, 0, 0);}40%,60% {transform: translate3d(+6px, 0, 0);}50% {transform: translate3d(-6px, 0, 0);}}

.Pager_refresh:before{color:{mainColor}}
.ProgressBar.hasItems.hasText.hasClick .Item:hover {color: {mainColor};}

.TreeBlock.hasTool.NoBorder .TreeToolBar .Button:hover:before{color:{mainColor};}

.PageControl.TabCenter>.TabHeader .TabCaption.active{background-color: {mainColor};}

.PageControl.TabCenter.TabNumber>.TabHeader .TabCaption.active:before {color:{mainColor};}

.Buttons.Group .Button.active {border-color: {mainColor};color: {mainColor}}

.ShowDrop .ArrowCombo:before,
.ShowPopup .ArrowCombo:before,
.ShowPopup.ArrowCombo:before {color: {mainColor};}

.TileContainer>.ChildrenBlock .selected::before { background-color: {mainColor};}

.Grid .GridDynamicButtonBody.NormalText a:hover {color: {mainColor};}
.Buttons .Button.active.disabled {background-color: {mainColor} !important;border-color: {mainColor} !important;}

.ProgressCircle .progress-circle-value {  stroke: {mainColor};}
.GridBodyRow[selected="true"],
.GridBodyRow[selected="true"] .GridBodyRowNoCell {background-color: {lightColor};}

.UI_ListView .UI_ListItem.selected {border-color: {mainColor};background-color: {lightColor};}

.FormCaption {background-color:{mainColor};}

.Button.SpecialButton.ShowDrop, 
.Button.SpecialButton.ShowDrop .RightIcon {background-color: {mainColor};border-color: {mainColor};}

.Grid .GridHeaderBar,
.Grid .ActiveColumn {background-color: rgba({rgb_mainColor}, 0.1);}

.ButtonView .UI_ListItem:hover,
.ButtonView .UI_ListItem.selected {border-color: {mainColor} !important;}
.ButtonView .UI_ListItem.selected:after {border-color: transparent transparent {mainColor} transparent;}


.Splitter{color:{mainColor}}
.HSplitter .Shape {background: linear-gradient(180deg, {lightColor} 0%, #FFFFFF 100%);}
.VSplitter .Shape {background: linear-gradient(-90deg, {lightColor} 0%, #FFFFFF 100%);}
.Splitter .Shape:hover {background-image: none;background-color:{mainColor};border-color: {mainColor};}
.Splitter.hover, .Splitter:hover{border-color: {mainColor};}

.Grid .RowButtons .RowBtn {color:{mainColor};}
.Grid .RowButtons .RowBtn:hover {background-color:{mainColor};}

.TreeDragLine{background-color: {mainColor};}
.TreeDragLine:before {border-left-color: {mainColor};}
.TreeNode.dragChild {box-shadow: inset 0 0 0 1px {mainColor}}

.HSplitter.noShape:hover .Shape {border-color: {mainColor};}
.Button.SpecialButton.HasLine:hover .RightIcon:after {border-color: {hoverColor};}
.Button.NormalLine:hover .RightIcon {border-left-color: {mainColor};}
.Button.NormalLine.rightHover .RightIcon:hover {border-color: {mainColor};}

.TextEdit:focus,.TextArea:focus,.EditBlock.active {box-shadow: 0 0 0 2px rgba({rgb_mainColor}, 0.1);}
.globalLeftBtns.Buttons .Button.active {color: {mainColor}}
.ListBlockItem .UI_ListItem {background: linear-gradient(180deg, {lightColor} 0%, #fff 100%);}

.Button.HintButton {color: {mainColor};}
.Button.HintButton:active,.Button.HintButton:hover {border-color: {mainColor}; color: {mainColor}; background-color:{lightColor};}
.ChkBoxStyle.checked:hover:before {box-shadow: 0 0 0 2px {lightColor};}
.CalendarMain .WeekRow{background-color: {mainColor};}