/* @FileName: portlet.less
 * @Description: Contains css definitions for portlets.
 * @Author: Moonraft
 * @Dependencies: theme less file
 */

@import "retail.less";
.cm-arrow-right {
  width: 0; 
  height: 0; 
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid #000;
  cursor: pointer;
}
.cm-arrow-left {
  width: 0; 
  height: 0; 
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;  
  border-right:3px solid #000; 
  cursor: pointer;
}


/* Mixings */
.box-shadow (@value) {
  -webkit-box-shadow: @value;
  -moz-box-shadow: @value;
  box-shadow: @value;
}
.box-shadow-custom (@value1,@value2) {
  -webkit-box-shadow: @value1,@value2;
  -moz-box-shadow: @value1,@value2;
  box-shadow: @value1,@value2;
}
.gradient(@startColor, @stopColor, @origin: top){
  background: @stopColor;
  background-image: linear-gradient(@origin, @startColor,  @stopColor);
  background-image: -o-linear-gradient(@origin, @startColor,  @stopColor);
  background-image: -moz-linear-gradient(@origin, @startColor,  @stopColor);
  background-image: -webkit-linear-gradient(@origin, @startColor,  @stopColor);
  background-image: -ms-linear-gradient(@origin, @startColor,  @stopColor);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@startColor), to(@stopColor));
  
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=@startColor, endColorstr=@stopColor);
}
.border-radius(@topleft: 3px, @topright: 3px, @bottomleft: 3px, @bottomright: 3px) {
    -webkit-border-radius: @topleft @topright @bottomright @bottomleft;
    -moz-border-radius: @topleft @topright @bottomright @bottomleft;
    border-radius: @topleft @topright @bottomright @bottomleft;
}
.portletBorder{
  border: 1px solid @borderColor;
}
.portletBorderBackground{
  .gradient(#E9E9E9, #ffffff);
}
.portletBackground{
  .gradient(#ffffff, #DCDCDC);
}

/* Calendar Portlet Styles - All Pages*/
.calendar{
  	background:white;
  	.box-shadow-custom(inset 0px 3px 10px -2px #d3d3d3, 
              inset 0px -5px 5px -4px #d3d3d3);
  	.border-radius(0px,0px,0px,0px);
  	padding: 5px;
  	height: 224px;
	div.portlet-content{
	  position:relative;
	}
	div.portlet-calender-wrap {
	  height:222px;
	}
	  div.shortcuts{
	  height: 389px;
	}
	div.shortcuts div.portlet-content{
	  .border-radius;
	  border: none;
	}
	/* Jquery UI Fixes*/
	.ui-icon-circle-triangle-w{
	  .cm-arrow-left;
	}
	.ui-icon-circle-triangle-e{
	  .cm-arrow-right;
	}
	.ui-datepicker .ui-state-disabled span{
		color: @axisFontGray;
		font-size: 11px;
	}
	.ui-datepicker .highlight{
	  .gradient(#f42c78,#b20748); 
	  .box-shadow(inset 0 13px 0 0 rgba(255,255,255,0.2));
	}
	.ui-datepicker .highlight:hover{
	  .gradient(#d50655,#b20748); 
	}
	.ui-datepicker .highlight:active{
	  .box-shadow(inset 0 2px 2px 0 rgba(0,0,0,0.2));
	}
	.ui-datepicker td {
	  padding: 0px 2px;
	  line-height: 26px;
	}
	.ui-state-disabled span{
	  color: @axisFontGray !important;
	}
	.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	  top: 4px;
	}
	.ui-datepicker .ui-datepicker-prev {
	  left: 13px;
	}
	.ui-datepicker .ui-datepicker-prev-hover {
	  top: 4px;
	  left: 13px;
	}
	.ui-datepicker .ui-datepicker-next-hover {
	  top: 4px;
	  right: 2px;
	}
	.ui-datepicker .ui-datepicker-title{
	  .gradient(#f5f5f5,#e7e7e7);
	  .box-shadow(0 1px 2px 0 rgba(0,0,0,0.2));
	  font-size: 11px;
	  margin:0;
	}
	.ui-datepicker td span, .ui-datepicker td a {
	  padding: 0;
	}
	.ui-datepicker table{
	  border-left: 1px solid #e4e4e4;
	  border-right: 1px solid #e4e4e4;
	} 
	 div.portlet{
	  padding: 5px;
	  position:relative;
	  border:none;
	}
	div.portlet-calender-wrap {
	  height:222px;
	}
	  div.shortcuts{
	  height: 389px;
	}
	/* Jquery UI Fixes*/
	div.calendar-events{
	  display:none;
	  height:212px;
	  overflow:hidden;
	  position: absolute;
	  width: 100%;
	  bottom: 0;
	  .gradient(#f9f9f9, #dddddd);
	}
	div.datepicker-return {
		background: url(images/cal_dashboard.png) no-repeat center center;
	  	color: @axisFontGray;
	  	font-size: 9px;
		width: 27px;
		height: 26px;
	  	margin: 0 0 0 186px;
	 	cursor: pointer;
	}
	div.datepicker-return span.iconic-stroke{
	  color: @axisFontGray;
	}
	.ui-datepicker .ui-state-disabled span{
		color: @axisFontGray;
		font-size: 11px;
	}
	.ui-datepicker .highlight{
	  .gradient(#f42c78,#b20748); 
	  .box-shadow(inset 0 13px 0 0 rgba(255,255,255,0.2));
	}
	.ui-datepicker .highlight:hover{
	  .gradient(#d50655,#b20748); 
	}
	.ui-datepicker .highlight:active{
	  .box-shadow(inset 0 2px 2px 0 rgba(0,0,0,0.2));
	}
	.ui-datepicker td {
	  padding: 0px 2px;
	  line-height: 26px;
	}
	.ui-state-disabled span{
	  color: @axisFontGray !important;
	}
	.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	  top: 4px;
	}
	.ui-datepicker .ui-datepicker-prev {
	  left: 13px;
	}
	.ui-datepicker .ui-datepicker-prev-hover {
	  top: 4px;
	  left: 13px;
	}
	.ui-datepicker .ui-datepicker-next-hover {
	  top: 4px;
	  right: 2px;
	}
	.ui-datepicker .ui-datepicker-title{
	  .gradient(#f5f5f5,#e7e7e7);
	  .box-shadow(0 1px 2px 0 rgba(0,0,0,0.2));
	  font-size: 11px;
	  margin:0;
	}
	.ui-datepicker td span, .ui-datepicker td a {
	  padding: 0;
	}
	.ui-datepicker table{
	  border-left: 1px solid #e4e4e4;
	  border-right: 1px solid #e4e4e4;
	} 
	ul.events {
	  padding: 5px 15px;
	  font-weight: bold;
	  text-align: center;
	  position: relative;
	}
	ul.events li{
	  padding: 10px 0 0 0;
	  float: left;
	  width:180px;
	  position:relative;
	}
	.leftarrow{
		background: url(images/calendar-inside-arrow-left.png) no-repeat center center;
		height: 23px;
		width: 23px;
		float: left;
		margin-top: 62px;
		cursor:pointer;
		position:absolute;
		z-index:10;
		display:none;
	}
	.rightarrow{
		background: url(images/calendar-inside-arrow-right.png) no-repeat center 0;
		height: 23px;
		width: 23px;
		float: right;
		margin-top: -96px;
		cursor:pointer;
		position:absolute;
		right:0;
	}
	li.events-template{
	  display:none;
	}
	.eventdate {
		font-size: 12px;
		font-weight: bold;
		margin: 0 auto;
		width: 80px;
		padding: 0 10px;
		line-height:16px;
	}
	div.events-detail{
	  padding: 20px 0 0;
	}
	span.payment-title {
	  	display: block;
		font-size: 11px;
		text-align: center;
		padding: 5px 0;
	}
	.events-detail span.cm-currency {
	  	display: block;
		text-align: center;
		font-size: 16px;
		float:none;
	}
	div.payment-actions {
	 	padding: 20px 10px;
	}
	span.ui-datepicker-year{
		display: none;
	}
	span.ui-datepicker-month{
		margin-right: 25px;
	}
	span.ui-datepicker-year-custom{
		position: absolute;
		top: 6px;
		left: 110px;
		font-size: 11px;
		font-weight: normal;
	}
	.ui-datepicker{
		min-height: 209px;
	}
}
/*Calendar Portlet Styles specific to Dashboard*/
div.portlet-placeholder{
	span.ui-datepicker-year-custom{
		top: 14px;
		left: 106px;
		font-size: 12px;
		font-weight: bold;
	}
	.calendar{
		padding: 0;
		height: auto;
	}
	.ui-icon-circle-triangle-w{
	  display:none;
	}
	.ui-icon-circle-triangle-e{
	  display:none;
	}
	.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{
		height: 22px;
		width: 22px;
	}
	.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-prev-hover{
		top:3px;
		left:3px;
	}  
	.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-next-hover{
		top:3px;
		right:3px;
	}
	.ui-datepicker .ui-datepicker-prev{
		background: url(images/calendar-arrow-left.png) no-repeat center center;
	}
	.ui-datepicker  .ui-datepicker-next{
		background: url(images/calendar-arrow-right.png) no-repeat center center;
	}
	.ui-datepicker .ui-datepicker-header {
		border: 1px solid @borderColor;
		height: 28px;
	}
	.ui-datepicker .ui-datepicker-title {
		line-height: 30px;
		font-weight:700;
		font-size:12px;
	}
	.ui-datepicker th {
		font-size:10px;
		padding: .7em .3em .3em;
	}
	.ui-datepicker td {
		border: 0;
		padding: 0;
		height: 25px;
		line-height: 25px;
		width:28px;
	}
	.ui-datepicker table {
		width:208px;
		background: none;
	}
	.ui-datepicker-calendar thead tr{
		border: 1px solid @borderColor;
		border-top: 0;
	}
	.ui-datepicker table tbody {
		background: none;
	}
	.highlight{
		.gradient(#f02a75,#b5084a);
		border:1px solid #d83f78;
	}
	.ui-datepicker .highlight:hover{
	  .gradient(#d50655,#b20748); 
	}
}

/*Accordion on each page RHS*/
#accordion{
  background: #fff;  
  .border-radius;
  overflow: hidden;
  h3{
    font-family: arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    .gradient(#f7f7f7 ,#ededed);  
    border-bottom: 1px solid rgb(211,211,211);
    padding: 8px 30px;
    &.ui-accordion-header-active {
	    font-weight: 600;  
	    border-radius: 0;  
	}
    &:hover{
		.gradient(#fff ,#f5f5f5);
		border-bottom: 1px solid @bandBorderColor;
		.box-shadow(inset 1px 1px 1px 1px white);
    }
  }
  span.arrow-accordion{
	  display: inline-block;
	  left: 12px;
	  top: 14px;
	  width: 0; 
	  height: 0; 
	  border-top: 5px solid transparent;
	  border-bottom: 5px solid transparent;
	  border-left: 5px solid @portletArrowColor;
	  position: absolute;
  }
  .ui-state-active{
  	span.arrow-accordion{
	  	border-top: 0px;
	  	border-left: 5px solid transparent;
	  	border-right: 5px solid transparent;
	  	border-top: 5px solid @portletArrowColor;
	  	left: 9px;
		top: 16px;	
	}
  }
  #ui-accordion-accordion-header-4[aria-selected="false"]{
	border-radius: 0 0 3px 3px;
	border-bottom: 0;
  }
}

.portlet-calender-wrap .calendar{
td:active{
    .gradient(#f42c78,#b20748); 
      .box-shadow(inset 0 13px 0 0 rgba(255,255,255,0.2));      
  }
  td:active a, .ui-datepicker-current-day a{
    color:#fff !important;     
  }
  td:hover{
    background-color:#d9d9d9;
  }
  .ui-datepicker-current-day
  {
      .gradient(#f42c78,#b20748); 
      .box-shadow(inset 0 13px 0 0 rgba(255,255,255,0.2));
      color:#fff !important;
  }
}
/*styles for Currency Calculator widget*/
div.currCalc{
	tr{
		height: 22px;
	}
	tr.header{
		border-bottom: 1px solid @borderColor;
	}
	.cm-text-small{
		float:left;
	}
	.last{
		float: right;
	}
	.cm-currency{
		float:right;
	}
	table{
		width: 100%;
		font-size:12px;
	}
	.portlet-content{
		padding: 10px; 
	}
	td,th{
		padding: 5px;
	}
}
/*Settings section*/
.cm-portlet-settings-content{
	height: 215px;
	width: 436px;
	background: #4d4d4d;//@portletSettingBgColor;
 	position: relative;
  	cursor:pointer;
	input[type=radio] + label{
		display: inline-block;
		margin: 5px;
		line-height: 20px;
		color: #fff;
		background-image: url('images/radio-dashboard.png');
		padding: 0 0 0 30px;
		background-position: 0 -24px;
		background-repeat: no-repeat;
	}
	input[type=radio]:checked + label {
		background-position: 1px 0px;
	}
	ul{
		padding: 10px 15px;
		font-size: 12px;
		height: 175px;
	}
	.more, .back{
		padding: 0 15px;
		color: @grayText;
		font-size: 12px;
	}
	.more{
		text-align: right;
	}
	.first-list,.second-list{
		float:left;
		width: 218px;
		position: relative;
	}
	.cm-iconic-stroke{
		color: @grayText;
		padding: 0 5px;
	}
}
/*styles for Budget Analysis portlet*/
.budgetAnalysis{
	.sample-img{
		background-image: url('images/barchart-sample.png');
		background-position: 10px 5px;
		background-repeat: no-repeat;
		height: 100%;
	}
}
/*styles for Expense Report portlet*/
.expenseReport{
	.sample-img{
		background-image: url('images/piechart-sample.png');
		background-position: 10px 10px;
		background-repeat: no-repeat;
		height: 100%;
	}
}
/*styles for Offers portlet*/
.offers{
	.sample-img{
		background-image: url('images/offers-dashboard.png');
		background-position: 0 3px;
		background-repeat: no-repeat;
		height: 100%;
	}
}
/*styles for Compose Email portlet*/
.composeEmail{
	.email-wrap{
		margin: 5px;
	}
	.category{
		float: left;
		width: 100px;
		padding-left: 5px;
		&:first-child{
			padding-left:0;
		}
		label{
			line-height: 20px;
			color: @axisFontGray;
  			font-size: 10px;
		}
	}	
	.selectboxit{
		height: 22px;
	}
	.selectboxit-container,.selectboxit-container .selectboxit-btn{
		background: white;
		.border-radius();
	}
	.selectboxit-text{
	  padding:4px 0;
	  font-weight:normal;
	  color:@axisFontBlack;
	}
	.selectboxit-arrow{
	  margin-top:2px !important;
	}	
	.selectboxit-container .selectboxit-options{
	  	width:70px;
	  	min-width:100%;		  	
  	}
  	.selectboxit-container span{
  		font-size:11px;
  	}
  	.cm-input-box, textarea{
		height: 20px;
		font-size: 11px;
		width: 187px;
		margin-top: 10px;
		-webkit-box-shadow: 0px 1px 1px 0px #d3d3d3;
		-moz-box-shadow: 0px 1px 1px 0px #d3d3d3;
		box-shadow: 0px 1px 1px 0px #d3d3d3;
  	}
  	textarea{
  		height: 72px;
  		.border-radius();
  		border:1px solid @borderColor;
  		padding: 4px 8px;
  		resize: none;
  	}
  	.cm-button-red{
  		margin-top: 8px;
  	}
  	.placeholder {
  		color: #3d3d3d;
  	}
}
/*styles for Demat Holdings portlet*/
.dematHoldings{
	tr{
		height: 22px;
		border-bottom: 1px solid @borderColor;
	}
	.cm-text-small{
		float:left;
	}
	.last{
		min-width: 55px;
	}
	.cm-currency{
		float:right;
		margin-top: 0;
		span.cm-ruppee-sym{
			padding-right: 2px;
		}
	}
	table{
		width: 100%;
	}
	.portlet-content{
		padding: 10px; 
	}
	td,th{
		padding: 4px 0 4px 5px;
		vertical-align: bottom;
		font-size: 10px;
		text-align: right;
	}
	td:first-child{
		text-align: left;
	}
	.scripts{
		width: 80px;
		text-align: left;
	}
	.cm-button-red{
  		margin-top: 8px;
  	}
}

/* Coportate Dashboard Styles */
/*styles for Trade Finance and pending Approval portlet*/
.tradeFinance, .pendingApprovals{
	ul{
		padding: 10px 10px 0 10px;
	}
	li{
		font-size: 12px;
		padding: 8px 0px;
		border-top: 1px solid @borderColor;
		&:first-child{
		  border:0;
		}
	}
	a{
		font-size: 12px;
		padding: 0 8px;
		display: block;
		line-height: 18px;
	}
}
/*styles for Corporate common portlets - Open Instruments/Expiring Instruments/Trade Finance*/
.corpCommonPort{
	font-size:12px;
	.portlet-content{
		padding: 5px 10px;
	}
	label{
		line-height: 20px;
		color: @axisFontGray;
		font-size: 10px;
	}	
	.selectboxit{
		height: 22px;
	}
	.selectboxit-container,.selectboxit-container .selectboxit-btn{
		background: white;
		.border-radius(3px,0px,3px,0px);
		float:left;
	}
	.selectboxit-text{
	  padding:3px 0;
	  font-weight:normal;
	  color:@axisFontBlack;
	}
	.selectboxit-arrow{
	  margin-top:2px !important;
	}	
	.selectboxit-container .selectboxit-options{
	  	width:130px;
	  	min-width:100%;		  	
  	}
  	.selectboxit-container span{
  		font-size:11px;
  	}
  	.cm-input-box, textarea{
		height: 20px;
		font-size: 11px;
		width: 187px;
		margin-top: 10px;
		-webkit-box-shadow: 0px 1px 1px 0px #d3d3d3;
		-moz-box-shadow: 0px 1px 1px 0px #d3d3d3;
		box-shadow: 0px 1px 1px 0px #d3d3d3;
  	}
  	table{
  		width: 100%;
  		margin-top: 10px;
  	}
  	td,th{
		padding: 4px 0 4px 5px;
		vertical-align: middle;
		text-align: left;
	}
	tr{
		height: 22px;
		border-bottom: 1px solid @borderColor;
	}
  	.cm-button-red{
  		margin-top: 8px;
  	}
  	.placeholder {
  		color: #3d3d3d;
  	}
  	a.cm-inside-page-button{
  		height: 20px;
		line-height: 20px;
		padding: 0 8px;
  	}
}
.expiringInstruments{
	.portlet-content{
		padding: 5px;
	}
	.selectval{
		padding: 0 5px;
	}
	.guranteeNo{
		width: 55px;
	}
	.expDate{
		padding-right: 20px;
	}
	.OutsAmt{
		width: 65px;
		text-align: right;
	}
}
/* Hide the Header and band in all the pages*/
div.portlet-header, span.cm-axis-border, span.green-band-top{
	display: none;
}
.ui-accordion .bottom-border{
	border-radius: 0 0 3px 3px;
}