/* DARK DESIGN
@mainColor: #2C3234;   
@mainColorL: @mainColor;
@secondaryColor: #D66208; 
@secondaryColorL: desaturate(lighten(@secondaryColor, 70%), 50%); 

@menuFontColor: lighten(@secondaryColor, 100%);
@linksColor: #4F9EFF;
*/

@mainColor: #398DDB;   
@mainColorL: desaturate(lighten(@mainColor, 60%), 0%);
@secondaryColor: #6A9C28; 
@secondaryColorL: desaturate(lighten(@secondaryColor, 70%), 50%); 

@menuFontColor: lighten(@secondaryColor, 100%);
@linksColor: #324239;

.termsconditions
{
	background-color: lighten(@mainColorL, 3);
}
a
{
 	color: @linksColor;
}
a:hover
{
	color: white;
}
#header 
{
	/*background-color: @mainColor;*/
	.headerGradient( desaturate(darken(@mainColor,30%),10%), desaturate(darken(@mainColor, 20%),10%));
	border-bottom: solid 1px @mainColor;
}
#content
{
	border-left: solid 1px @mainColor;
	border-right: solid 1px @mainColor;
	.drop-shadow(0,0,5px,2px,0.1);
}
.masterFooter
{
	border-top: solid 1px @mainColor;
}
.masterFooter a
{
	color: darken(@mainColor,15);
	font-weight: bold;
}
.masterFooter div a
{
    border-right: solid 1px @mainColor;
}
.masterFooter a:hover
{
	color: darken(@mainColor,30);
}
.menu a
{
	color: white;
}
.menu a:hover
{
	color: @mainColorL;
}
.menuArrowUp
{
	border-top: 10px solid darken(@secondaryColor, 35%);
}

ul.subMenu
{
	.headerGradient( desaturate(darken(@mainColor,30%),10%), desaturate(darken(@mainColor, 20%),10%));
	border-color: darken(@mainColor, 10%);
}
.subMenu a:hover
{
	background-color: darken(@mainColor, 10%);
}

.bwNotSupported
{
	background-color: @mainColorL;
	border: solid 1px lighten(@mainColor, 15%);
}
.bwNotSupported a
{
	background-color: lighten(@mainColor, 10%);
	border: solid 1px lighten(@mainColor, 25%);
}
.bwNotSupported a:hover
{
	background-color: lighten(@mainColor, 5%);
}


/*Butoane user panel*/
#userPanel a
{
	background-color: darken(@mainColor, 20%);
	border: solid 1px darken(@mainColor, 30%);
}
#userPanel a:hover
{
	background-color: saturate(@mainColor, 21%);
	border: solid 1px darken(@mainColor, 25%);
}
/*header/footer link buttons*/
a.btnSmall
{
	color: Black;
	border: solid 1px darken(@mainColorL, 30%);
	background-color: @mainColorL;
}
a.btnSmall:hover
{
	color: darken(@mainColorL, 80%);
	background-color: saturate(darken(@mainColorL, 0%), 50%);
}
a.inlineBtn, a.inlineIcoBtn
{
	color: darken(@mainColor,15);
	border: solid 1px darken(@mainColorL, 70%);
}
a.inlineBtn:hover, a.btnSmall:hover, a.inlineIcoBtn:hover
{
	background-color: desaturate(lighten(@mainColor, 60%), 10%);
}
a.inlineBtnLight
{
	color: white;
	background-color: @mainColorL;
	color: @mainColor;
	border: solid 1px darken(@mainColorL, 30%);
	
}

.progressSteps .activeStep span
{
    background-color: @secondaryColor;
    border-color: darken(@secondaryColor, 40);
    color: White;
}


.footerCenterControls a
{
	color: darken(@mainColor,15);
	border: solid 1px darken(@mainColorL, 70%);
}
.footerCenterControls a:hover
{
	background-color: desaturate(lighten(@mainColor, 60%), 10%);
}
.footerCenterControls a:focus
{
	background-color: saturate(darken(@mainColorL, 5%), 80%);
	color: darken(@mainColor, 10%);
	outline: none;
}

.loginButtonControl a
{
	color: white;
	background-color: @secondaryColor;
	border: solid 1px darken(@secondaryColor, 70%);
}
.loginButtonControl a:hover
{
	background-color: saturate(darken(@secondaryColor, 5%), 100%);
}
.loginButtonControl a:focus
{
	background-color: saturate(darken(@secondaryColor, 5%), 100%);
	color: white;
	outline: none;
}
.loginSmallButtons a:hover
{
    color: @mainColor;
}

.submitFormButtonControl a
{
	color: white;
	background-color: @secondaryColor;
	border: solid 1px darken(@secondaryColor, 70%);
}

/*contentBox Colors*/
.contentBoxTop, .contentBoxBottom
{
    background-color: darken(@mainColor, 15%);
}
.contentBoxContent 
{
	
}
.contentBoxBottom a
{
	background-color: White;	
}
.counter span
{
	border-bottom: solid 1px @mainColorL;
}
.rightSideOfSubMenu div.contentBoxTop, .rightSideOfSubMenu div.contentBoxBottom
{
	border-top: solid 1px darken(@mainColor, 15%);
}


.xScrollContainer
{
	background-color: @mainColorL;
}
.surveyParticipantsProgress th
{
	background-color: darken(@mainColor, 20);
	color: white;
}

/*Main Table Colors*/
body
{
	background-color: lighten(@mainColor, 40);
}

.contentBoxContent tr, .contentText tr
{
	border-bottom: solid 1px @secondaryColor;
}
tr.disabledRow, .disabledRow td
{
    background-color: desaturate(darken(@mainColorL, 5), 30);
	color: red;
}

tr.gridSelectedRow
{
    background-color: darken(@mainColorL,5);
	border-left: solid 3px @mainColor;
}
tr.gridSelectedRow:hover
{
    background-color: darken(@mainColorL, 5) !important;
}
.ucQuestionControls
{
	background: darken(@mainColorL,5);
	border-color: darken(@mainColorL,25);
	margin-left: 10px;
	padding: 7px 15px;
}

.surveyCategoryScoresContainer
{
	background-color: @mainColorL;
	border: solid 1px darken(@mainColor, 10);
}

.contentBoxContent tr:hover
{
	background-color: lighten(@secondaryColor, 43);
}
div.zonaRaspuns tr:hover
{
	background-color: @mainColorL;	
}
div.zonaRaspuns label:hover
{
	background-color: darken(@mainColorL, 10%);
}
.contentBoxContent th
{
    background-color: darken(@secondaryColor, 7%);
}
tr.pagerRow:hover, tr.pagerRow:hover tr
{
    background-color: @mainColorL;
}
th.tableActiuniHeader
{
	color: @mainColorL;
}

/*Alternate box styles*/
@rightcontainerBorder: darken(@secondaryColor,20);
.ucEditRightContainer, .ucEditRightContainer2, .specialContainerLight
{
	border: solid 1px @rightcontainerBorder;
    background-color: desaturate(lighten(@secondaryColor, 40), 10);
}
li.ucEditRightContainerHeader
{
	background-color: @secondaryColor;
    border-left: solid 1px @rightcontainerBorder;
    border-right: solid 1px @rightcontainerBorder;
    border-bottom: solid 1px @rightcontainerBorder;
}

/* Tabel monitorizare pacienti*/
td.suProgress0
{
    background-color: lighten(@mainColorL, 5%);
}
td.suProgress1
{
	background-color: #B2F2A2;
}
td.suProgress2
{
	background-color: #E0D688;
}
td.suProgress3
{
	background-color: #C1C1C1;
}

/*Side Column Content Box*/
.sideBox
{
	background-color: darken(@mainColorL, 5%);
	box-shadow: inset 0px 0px 10px @mainColor; 
}

.sideBoxTop, .sideBoxBottom
{
    
}
.sideBoxContent 
{
	background-color: @secondaryColorL;
}
.sideBoxContent tr
{
	border-bottom: solid 1px @secondaryColor;
}
.sideBoxContent tr:hover
{
	background-color: lighten(@secondaryColor, 43);
}
.sideBoxContent th
{
    background-color: darken(@secondaryColor, 7%);
}
tr.pagerRow:hover, tr.pagerRow:hover tr
{
    background-color: @mainColorL;
}

/*edit pages*/
.editArea input[type=text], .editArea textarea, .editArea input[type=password], .richTb iframe, .editAreaQuestion iframe
{
	border: solid 1px darken(@mainColor, 20%);
	background-color: lighten(@mainColorL, 10%);
}
.editArea input[type=text]:focus, .editArea textarea:focus, .editArea select:focus, .editArea input[type=password]:focus, .richTb iframe:focus
{
    border: solid 1px darken(@mainColor, 10%);
	background-color: white;
	box-shadow: 0 0 3px black;
	outline: none;

}
.editArea select
{
    border: solid 1px darken(@mainColor, 10%);
}

.specialContainer
{
	background-color: darken(@mainColorL, 5%);
	border: solid 1px @mainColor;
}
#legendaParticipantsProgress
{
	background-color: lighten(@secondaryColor, 30%);
	border: solid 1px @secondaryColor;
}
#legendaParticipantsProgress li
{
	border-bottom: solid 1px @secondaryColor;
}
.legenda h3
{
	color: darken(@mainColor, 20);
}
.legenda li
{
	border-bottom: solid 1px @mainColor;
}

/*Login page*/
.loginLeft
{
	border: solid 1px @mainColor;
	
	
}
.loginLeft p
{
	color: darken(@mainColor, 15%);
}


/*MIXINS*/
.headerGradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}