// define font face , font icon

@font-face {
    font-family: 'PLF-FONT-ICONS';
    src:url('@{font-path}/PLF-FONT-ICONS.eot?-m9uidt');
    src:url('@{font-path}/PLF-FONT-ICONS.eot?#iefix-m9uidt') format('embedded-opentype'),
    url('@{font-path}/PLF-FONT-ICONS.ttf?-m9uidt') format('truetype'),
    url('@{font-path}/PLF-FONT-ICONS.woff?-m9uidt') format('woff'),
    url('@{font-path}/PLF-FONT-ICONS.svg?-m9uidt#PLF-FONT-ICONS') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'IONIC-FONT';
  src:url('@{font-path}/Ionic/ionicons.eot');
  src:url('@{font-path}/Ionic/ionicons.eot') format('embedded-opentype'),
  url('@{font-path}/Ionic/ionicons.ttf') format('truetype'),
  url('@{font-path}/Ionic/ionicons.woff') format('woff'),
  url('@{font-path}/Ionic/ionicons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

// COMMONS STYLESHEET
//==================================================================
.clearfix {
	.clearfix();	// Reuse Mixin .clearfix() from mixins.less of bootstrap
}

// Block level inputs
.input-block-level{
	.input-block-level();
}

/*============== Action With Label================*/
.uiActionWithLabel {
	.uiActionWithLabel();
}
/*============== actionIcon================*/
.actionContainer{
	.actionContainer();
}

a,a:hover,a:focus {
  color: @linkColor;
  text-decoration: none;
}

table {
	width: 100%;
}

// Dropdown menus
// --------------

// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
  &:before {
    content: '';
    display: inline-block;
    border-left:   0px solid transparent;
    border-right:  0px solid transparent;
    border-bottom: 0px solid @borderColor;

  }
  &:after {
    content: '';
    display: inline-block;
    border-left:   0px solid transparent;
    border-right:  0px solid transparent;
    border-bottom: 0px solid @baseBackground;

  }
}

/***************badge*********************/

.badge {
	background: @borderColor;
	border-radius: 9px 9px 9px 9px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.37) inset, 1px 1px 0 rgba(255, 255, 255, 0.8);
	color: @primaryColor;
	font-size: 11px;
	padding-left: 7px;
	padding-right: 7px;
}

/*************** multiValueContainer *********************/

.multiValueContainer {
	float: left;
	li {
		margin-bottom: 12px;

		[class^="uiIcon"] {
			cursor: pointer;
		}
		input{
			margin-right: 5px;
		}
	}

	li:last-child {
		margin-bottom: 0px;
	}

}

/*************** AjaxLoadingMask *********************/
.ajaxLoadingMask{
	background: @globalLoadingBackground;
	border: 1px solid @globalLoadingBorder;
	border-radius: 0 0 3px 3px;
	.box-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
	padding: 10px 7px 6px 11px;
	top: 0px !important;
	position: fixed !important;
	.loadingProgressBar{
		background: url("@{images-path}/Loading/loadingProgressBar.gif") no-repeat center;
		width: 20px;
		height: 20px;
	}
	.loadingText{
		margin: 0 34px 0 40px;
		color: @globalLoadingColor;
		font-weight: bold;
	}
	.uiIconClose:hover{
		cursor: pointer;
	}
}

/***********************************/

.uiAccessGroup {
	padding: 10px;
	.form-horizontal .control-group .control-label {
		width: 300px;
	}
	.form-horizontal .control-group .controls {
		margin-left: 305px;
	}
}

.controls-nowrap{
	white-space: nowrap;
}

.UICLVPortlet{
	.checkListSetting{
		padding: 15px 10px 10px 85px;
		li{
			margin-right: 50px;
		}
	}
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.uiCheckbox {
			padding: 0px 8px;
		}
	}
	#clvContentTab-tab .controls{
		.uiSelectbox {
			width: 131px;
			.selectbox{ width: 131px;}
		}
	}
	.form-horizontal {
		.control-group {
			.controls {
				input{
					width: 270px;
				}
				.uiCheckbox input{
					width: auto;
				}
				.uiRadio input{
					width: auto;
				}
			}
		}
	}

}

.UISingleContentViewerPortlet{
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.uiCheckbox {
			padding: 0px 8px;
		}
	}
	.uiContentSearchForm{
		.form-horizontal{
			.uiRadio{
				width: 19px;
			}
		}
	}

	.form-horizontal{
		li{
			margin-left: 50px;
		}

		.uiRadio{
			width: 190px;
			margin-left: 15px;
		}

		.control-group{
			margin-bottom: 20px;
		}

		.controls-full .scv-by {
			line-height: 28px;
      margin: 0px 5px 0px 15px;
		}
	}
}

/*================================*/

.UIForm{
	.UIPDFViewerContainer {
		min-width: 530px;
		.PDFViewerBar {
			.ControlButton {
                color: #333; //fix code
				.PageNumber input{
					border: 1px solid @borderColor;
					text-align: center;
					width: 30px; height: 20px;
				}
				.uiSelectbox, select.selectbox{
					width: 75px;
					height: 22px;
				}
				.uiSelectbox{
					margin-top: -4px;
				}
			}
		}
	}
}

@media (max-width: 767px) {
	.uiForm {
		#UICommentForm {
			.btn:first-child {
				margin-left: 35% !important;
			}
			.btn:nth-child(2) {
				margin-left: 1%!important;
			}
			.btn {
				float: left;
				width: initial !important;
			}
		}
	}
}

.actionIcon, .actionIconSmall{
	.actionIcon();
}

.actionIconSmall {
	padding: 0;
    line-height: @baseLineHeight - 5;
	[class^="uiIconMini"],[class^="uiIconCalSimple"] {
        top: -1px;
	}
}

/*============== error, noticeEmpty ================*/
.error,
.noticeEmpty {
  .error();
}
.noticeEmpty {
  .noticeEmpty();
}

/*======== Title================*/
.titleWithBorder {
	.titleWithBorder();
}

/******uibox*****/
.uiBox {
	.uiBox();
}

/*============== Gray Light Box================*/
.uiGrayLightBox{
	.uiGrayLightBox();
}
.center {
	.center();
}

/******avatar*****/
.avatarCircle {
  .avatarCircle();
}

.avatarSmallCircle {
  .avatarSmallCircle();
}

.avatarMiniCircle {
  .avatarMiniCircle();
}

.avatarXLarge {
  .avatarXLarge();
}

.avatarLarge {
  .avatarLarge();
}

.avatarXMedium {
  .avatarXMedium();
}

.avatarMedium {
  .avatarMedium();
}

.avatarXSmall {
  .avatarXSmall();
}

.avatarSmall {
  .avatarSmall();
}

.avatarMini {
  .avatarMini();
}

.avatarTiny {
  .avatarTiny()
}

.avatarLargeWithBorder {
  .avatarLargeWithBorder();
}

.avatarXLargeWithBorder {
  .avatarXLargeWithBorder();
}
/*
Round corner box with title
  - border: 1px solid @tableBorder;
  - Title:
    + gray background (@primaryBackground)
    + round corner at left-top and right-top
    + text title is bold, class name is "titleBox", color is @@baseColorDark
  - content box:
    + background: @baseBackground
    + round corner at the bottom-left and bottom-right
*/
.roundCornerBoxWithTitle{
	.roundCornerBoxWithTitle();
}

/************ mask layer **********/
#UIMaskWorkspace {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
	text-align: center;
	position: fixed!important;
}
.UIMaskWorkspace {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: solid 8px #c5c5c5;
	width: 650px;
	-moz-box-shadow: 0px 0px 5px #909090;
	-webkit-box-shadow: 0px 0px 5px #909090;
	box-shadow: 0px 0px 5px #909090;
	background: #c5c5c5;
	display: inline-block;
	text-align: left;
	.form-horizontal {
		padding-top: 0;
		padding-bottom: 5px;
		.control-group {
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.uiAccessGroup {
		padding: 0;
	}
	.uiDashboardPortlet {
		padding: 0 0 15px;
	}
	.resizable {
		margin: -15px;
		padding: 15px;
	}
}

.UIMaskWorkspace .MaskContainer {
	background: @primaryBackgroundLight;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 10px;
	.uiAction.uiActionBorder {
		padding-bottom: 0;
		margin-left: -15px;
		margin-right: -15px;
	} 
	.uiBox {
		margin-bottom: 15px;
		.uiContentBox {
			padding: 15px;
			+ .uiAction.uiActionBorder {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}
}

.UIVirtualList {
	margin-bottom: 15px;
	.table {
		margin-bottom: 0;
	}
}

.MaskLayer {
	background: black;
	text-align: center;
	position: fixed;
	left: 0!important;
	right: 0!important; 
	bottom: 0!important;
	top: 0!important;
	width: auto!important;
	height: auto!important;
}

.uiHelpPLFToolbarPortlet .tooltip {
	right: 0px !important;
	left: auto !important;
}

.uiGrayLightBox label {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

// Quote
.postContent .contentQuote{
  background-color: @quotePrimaryBackground;
  .border-radius(2px);
  font-style: italic;
  margin: 10px 0px 10px 10px;
  padding: 15px 15px 15px 20px;
  word-wrap: break-word;
  .titleQuote {
    font-weight: bold;
    margin: 15px 0;
    font-style: normal;
    color: @quotecolor;
    line-height: 16px;
  }
  .contentQuote,quote {
    background: none;
    border-left: 5px solid @quotePrimaryBorder;
    padding: 0 0 0 15px;
    margin: 15px 0;
    width: auto;
    color:@quotecolor;
    font-style: italic;
    display: block;
  }
  &.quoteDefault {
    background-color: @quoteBackgound;
    .contentQuote,quote {
      border-left: 5px solid @quoteBorder;
    }

  }
}

// Footer WLC
.footerWLC {
    bottom: 0;
    color: #FFFFFF;
    font-weight: bold;
    left: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    padding: 6px 0;
    z-index: 1;
    .btn {
        font-weight: bold;
        margin-left: 12px;
      line-height: 16px;
      .buttonBackground(rgba(255, 255, 255, 0.3), rgba(180, 180, 180, 0.3), #333333, 0 0 0 transparent);
      border: none;
      .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
    }
    .btn:hover  {
        color: @linkColor;
      background-position: center;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .btn:active {
      color: @linkColor;
      .box-shadow(~"inset 0 3px 8px rgba(0, 0, 0, 0.2),1px 1px 0 rgba(255, 255, 255, 0.4)");
    }
    & > form {
        font-size: 14px;
        font-weight: bold;
        button {
            font-size: 13px;
        }
    }
	&.backOutdated {
      background: rgba(212, 0, 0, 0.4);

	}
	&.backNotOutdated {
      background: rgba(0, 0, 0, 0.4);
	}
}
/* Create Margin and Padding Utilities Class */
.marginAndPadding(20);
.baseColorLight,.empty,.time,.date{
  .baseColorLight();
}

.resize-bar{
  .resize();
}

hr {
  border-color: @borderColor  transparent transparent;
}

.uiAccordion {
  background-color: @primaryBackground;
  border: 1px solid @borderColor;
  margin-bottom: 15px;
  .border-radius(@baseBorderRadius);
    .accordion-heading{
      background-color: @primaryBackground;
      border-bottom: 1px solid @borderColor;
      border-top: 1px solid @borderColor;
      &:first-child {
        border-top: none;
      }
    &.collapsed {
      & > * {
          border-bottom: none;
      }
    }
      .box-shadow(0 0 3px 0 rgba(0, 0, 0, 0.1));
      &:hover,&.open,&.active {
        background-color: @primaryBackgroundLight
      }
    }
    .accordion-body {
      > * {
        background:@baseBackground ;
        padding: 6px 20px 6px 20px;
      }
      &:hover {
        > td,> *  {
          #gradient > .vertical(@primaryBackground, @primaryBackgroundLight);
        }
      }
    }
    .accordion-active {
      > * {
        #gradient > .vertical(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
      }
    [class^="uiIcon"] {
        color: @dropdownLinkColorActive;
    }

      &:hover {
        > td,> *  {
          #gradient > .vertical(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
        }
      }
      color: @btnPrimaryColor;
    }
}

.uiAccordion.leftPanel {
	.accordion-heading {
		border-bottom: none;
		background-color: @primaryBackgroundLight;
		box-shadow: none;
        &.collapsed {
            & > div{
                border-bottom: none;
            }
        }
		&:first-child {
			border-radius: @baseBorderRadius @baseBorderRadius 0 0;
		}
		&:last-child {
			border-radius: 0 0 @baseBorderRadius @baseBorderRadius;
			border-bottom: none;
		}
		&:nth-child(2) {
           // border-top: medium none;
        }
		&:hover {
			background-color: @primaryBackground;
		}
		&.open, &.active {
			background-color: @primaryBackgroundHover;
		}
		a.project-name, a.label-name {
			padding: 8px 20px;
			display: block;
			font-weight: bold;
			color: @textColor;
			outline-style: none;
            .text-overflow() ;
            max-height: 32px;
		}
		.item {
			border-bottom: 1px solid @borderColor;
		}
		a.dropdownIcon {
			margin: 8px 10px 0 0;
		}
		.list-projects, .list-labels {
			background-color: @baseBackground;
			input{
				width: 90%;
				margin: auto;
			}
		}
		.sub-item {
			border-bottom: 1px solid @white;
			margin-left: 1px;
			position: relative;
			white-space: nowrap;
			&:hover {
				background-color: @primaryBackgroundLight;
				.iconGreater {
					display: inline-block;
					color: @white;
				    background: @baseColorLight;
				}
				> a.dropdown-toggle {
					display: block;
				}
			}
			.project-name, .label-name {
				display: block;
    			padding: 6px 30px;
    			font-weight: normal;
    			max-width: 100%;
    			.text-overflow;
    			.box-sizing(border-box);
			}
			> a {
				color: @textColor;
				outline-style: none;
				&.dropdown-toggle {
					display: none;
					margin: 6px 12px 0 0;
					position: relative;
				}
			}
		}
		.project-item, .label-item {	
			&.active, &.open {
				> .sub-item {
					#gradient > .vertical(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
					.project-name, .label-name, .collapseSubProject, .collapseSubLabel {
						color: @white;
						[class^="uiIcon"] {
                            color: @colorIconSecondary
						}
					}
					> a.dropdown-toggle {
						display: block;
						[class^="uiIcon"] {
                            color: @colorIconSecondary
						}	
					}
				}
			}
			.colorPie {
				width: 5px;
				height: 32px;
				display: inline-block;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		.item, .sub-item {
			position: relative;
			.project-menu {
				left: calc(100% - 30px);
    			top: 30px;
			}
		} 
		.noLabel {
		  background: @baseBackground;
          border-radius: 0 0 3px 3px;
          padding: 10px;
          input {
          	max-width: 100%;
          	.box-sizing(border-box);
          	margin-bottom: 0;
          }
		}
	}
}



//uiAutoComplete

.uiAutoComplete {
  left: 0;
  top: 40px;
  position: absolute;
  min-width: 310px;
  border: 1px solid @dropdownBorder;
  background-color:  @dropdownBackground;
  .box-shadow(0 2px 6px 0 rgba(0, 0, 0, .12));
  .border-radius(3px);
  padding: 5px 0px;
  .item {
    padding: 5px 10px 5px 10px;
    color: @dropdownLinkColor;
    * {
      color: @dropdownLinkColor;
    }
    &:hover,&.selected {
      #gradient > .vertical(@dropdownLinkBackgroundHover, @dropdownLinkBackgroundHoverDark);
        * {
          color: @dropdownLinkColorHover;
        }
    }
  }
}


.content-display  {
  .dropdown-menu{
    margin: 2px 0 0;
    padding: 5px 0;
  }
  .nav {
    margin: 0 10px 0 0;
    padding: 0;
  }
  .nav-tabs ,.pagination ul,.breadcrumb{
    margin: 0;
    padding: 0;
  }
  ul,ol,dl {
    padding: 0 0 0 40px;
    margin: 15px 0;
    ul,ol,dl {margin: 0;}
    li {
      list-style-type: disc;
    }
  }

  ol li{
    list-style-type: decimal;
    ul li { list-style-type: disc;}
  }
}

.nav-tabs  li,.nav li ,.pagination ul > li ,.breadcrumb li{
  list-style: outside none none !important;
}

.primaryBackground {
	background-color: @primaryBackground!important;
}

.uiEditableInline {
	.uiIconClose {
		display: none;
	}
	&.active {
	    .editable-element {
	        display: none;
	    }
	    .editable-input {
	    	input {
		    	height: 31px;
		    	&.blackLarge {
		    		height: 36px;
		    		padding: 0 9px;
		    	}
		    }
		     textarea {
			    padding: 4px 9px;
			}
	    }
	    .hoverStatus.editableField  {
	    	border:1px solid  @inputFocusBorder;
			.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px @{inputFocusShadow}");
	    }
	}
	position: relative;
	> [class^="uiIcon"] {
		vertical-align: middle;
		+ .hoverStatus:not(.editableField){
			padding-left: 0;
			padding-right: 0;
		}
	}
	.view-value {
		display: inline-block;
		height: @baseLineHeight;
		padding: 3px 6px;
		font-size: @baseFontSize;
		line-height: @baseLineHeight;
		color: @gray;
		.border-radius(@inputBorderRadius);
		vertical-align: middle;
		border: 1px solid transparent;
		&:hover {
			border: 1px solid @inputBorder;
		}
		&:focus, &.active {
			border-color: rgba(82,168,236,.8);
			outline: 0;
			outline: thin dotted \9; /* IE6-9 */
		}
	}
	.input-value, .input-value:focus {
		margin: 0;
		padding-left: 5px;
		padding-right: 5px;
		box-shadow: none;
		background: none;
		border-color: transparent;
		&:hover {
			border: 1px solid @inputBorder;
		}
	}
	.view-value, .input-value, .text-label {
		float: left;
	}
	.text-label:empty {
		display: none;
	}
	.popover {
		line-height: 20px;
		max-width: none;
	//	min-width: 497px;
		.row-fluid.center [class*="span"] {
			min-height: 0;
		}
		.uiCalendarComponent {
			margin-bottom: 10px;
		}
		
	}
	.hoverStatus {
		display: inline-block;
		cursor: pointer;
		vertical-align: middle;
		&.hoverStatusBlock {
			display: block;
		}
		> * {
			//vertical-align: middle;
		}
		&.editableField {
			.view-value:hover, .input-value:hover {
				border-color: transparent;
				box-shadow: none;
			}
		}
		&:not(.editableField) {
			.view-value, .input-value {
				&:hover, &:focus {
					background-color: @inputBackground;
				}
			}
		}
		&:hover {
			.uiIconClose {
				display: inline-block;
			}
		}
	}
	&.edit {
		.hoverStatus {
			cursor: default;
		}
		.hoverStatus.editableField{
			&:hover {
				border-color: transparent;
				box-shadow: none;
			}
			.view-value, .input-value {
				border-color: @inputFocusBorder;
				outline: 0;
				.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px @{inputFocusShadow}");
			}
		}
		/*.text-label {
			margin-right: 3px;
		}*/
		.view-value, .input-value {
			background-color: @inputBackground;
			border-color: @inputFocusBorder;
			outline: 0;
			.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px @{inputFocusShadow}");
		}
	}
	.choose-time {
		[class*="span"] {
			min-height: 0;
		}
		.span5.center {
			&:first-child {
				.form-dropdown {
					margin-left: 39px;
				}
			}
			&:last-child {
				.form-dropdown {
					margin-right: 39px;
				}
			}
		}
		.uiCheckbox {
			margin-top: 2px;
		}
		.form-dropdown {
			.dropdown-menu {
				text-align: left;
				min-width: 75px;
				max-height: 180px;
				overflow: auto;
			}
		}
	}
}
.hoverStatus *:last-child {
	margin-bottom: 0;
}
.form-dropdown {
	position: relative;
	display: inline-block;
	input, select, textarea {
		margin-bottom: 0;
		text-align: center;
	}
}

// Reset some component for Task
#taskManagement {
	.uiAccordion.leftPanel .accordion-heading .item {
		border-bottom: none;
	}
	.uiAccordion.leftPanel .accordion-heading .item + .list-projects {
		border-top: 1px solid @borderColor;
	}
	.uiAccordion.leftPanel .accordion-heading .sub-item {
		border-bottom: none;
		+ .sub-menu {
			border-top: 1px solid @white;
		}
	}
}

// Reset line-height for ECME Product Template
.ProDetailPage [style*="font-size: 24"],
.ProDetailPage [style*="font-size: 26"],
.ProDetailPage [style*="font-size: 28"],
.ProDetailPage [style*="font-size: 32"],
.ProDetailPage [style*="font-size: 36"],
.ProDetailPage [style*="font-size: 48"],
.ProDetailPage [style*="font-size: 72"] {
 line-height: 1.2;
}

/* Define Utitlites class */
/* Align Horizontal*/
.align-top {
    text-align: top;
}
.align-center {
    text-align: center;
}
.align-bottom {
    text-align: bottom;
}
.valign-top {
    vertical-align: top;
}
/* Align Vertical*/
.valign-middle {
    vertical-align: middle;
}
.valign-bottom {
    vertical-align: bottom;
}
.width-full {
    width: 100%;
}

#auto-versioning-actions.alert {
    padding-right: 14px;
}

#auto-versioning-actions {
    margin-top: 0;
    margin-bottom: 15px;
    .fileNameBox {
        border-bottom: 1px dotted rgba(0, 0, 0, 0.4);
        display: block;
        margin-bottom: 5px;
        padding-bottom: 5px;
        .fileName {
            display: block;
            font-weight: bold;
            margin-top: 3px;
        }
    }
}
.uiPopupContentSelector {
    .ActionContainer {
        margin: 15px auto 0;
        td:last-child {
            width: 1%;
            white-space: nowrap;
        }
        td {
            vertical-align: top;
        }
        .Delete {
            background: none;
        }
    }
    .UploadInfo {
        .progress {
            margin-bottom: 10px!important;
            margin-top: 2px;
        }
    }
}

.uiPopupContentSelector .ActionContainer  {
    input,select,textarea {
        width: 100%;
    }
}
.uiPopupContentSelector .ActionContainer .UploadInfo .Abort,
.uiPopupContentSelector .ActionContainer .UploadInfo .Delete {
    display: inline-block;
}


.sharePrjDialog {
	.uiAction .btn:first-child {
		.btn;
	}
}
.sharePrjDialog {
	.uiAction .btn:last-child {
		.btn;
	}
}
#tiptip_holder {

    blockquote {
        background: url("@{images-path}/social/skin/Activity/right-quote.png") no-repeat right bottom;
        padding-right: 15px;
        padding-left: 25px;
        color: @baseColorLight;
        border-left: medium none;
        width: 120px;
        word-wrap: break-word;
        position: relative;
        margin-right: 0;
    }

    blockquote:after {
        background: url("@{images-path}/social/skin/Activity/left-quote.png") no-repeat left top;
        .size(13px,15px);
        position:absolute;
        top:2px;
        left: 0;
    }
}
.ellipsis-reverse {
    display: flex;
    flex-direction: row !important;
    text-overflow: clip !important;
}
.ellipsis-reverse-content {
    flex: 0 12px;
    height: 20px;
    padding-right: 5px;
    margin: auto;
    display: inline-flex;

    &.hidden {
      /* Used to force width = 0 on flex items for IE */
      position: absolute;
      flex: 0 0 0px;
      width: 0;
    }
}
.ellipsis-reverse-apply {
    overflow: hidden;
    position: relative;
    flex: 1 auto;
    height: 20px;
    width: 100%;
    direction:rtl;
    max-width: 100%;
    margin: auto;
}