@import "../../../assets/css/abstracts/custom-variables.scss";

.date {
  color: $gray-600;
}

//set colour of required asterisk
label .required, p .required, td > .required {
	color: $red-700;
}

// -----------------------------
// -- COMMON LIST - TEXT WRAP
// -----------------------------
//Add this class to an element wrapping a <table> element to wrap text
// in the table and it's table data cells
.table-wrap {
    white-space: normal !important;

	td {
		white-space: normal !important;
	}
}

//disabled <select> element
.select-disabled {
    cursor: not-allowed;
}

//marker bg colour
.marker {
	background-color: $yellow-400;
}

.input-group > select.form-control[multiple="multiple"],
.form-group > select.form-control[multiple="multiple"] {
	min-width: 160px;
}

/* Required to fix z-index issues in IE where document preview appears above higher elements */
.ie .cover {
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -2;
}

// Pre-define the Angular ng-cloak attribute to avoid content being visible before angular.js is loaded.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
}

// making any anchor with name prefix 'anchor' to be located properly not behind header.
a[name^="anchor"] {
	margin-top: -90px;
	padding-top: 90px;
	display:block ;
}

// Helper class to remove text underline on hover for <a> tags
a.no-hover-underline:hover {
    text-decoration: none;
}

//'light' alert
.alert-light {
	color: $gray-600;
	background-color: none;
    border-color: $gray-300;
}

//don't display a dash before a breadcrumb
.breadcrumb-no-slash::before {
	display: none;
}

// --------
//   MOBILE APP HELPER CSS
// --------
/* Allowing iframe in iOS Safari not to overflow but scrollable */
.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
  	overflow-y: auto;
 }

 // --------
 //   COLOUR HIGHLIGHTING
 // --------
.text-dark,
.text-dark * {
    color: $gray-800 !important;
}

.text-light,
.text-light * {
    color: $white !important;
}

// --------
//  Extended text truncate to add Multi Line Ellipsis
// --------
.text-truncate.text-truncate--2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.text-truncate.text-truncate--3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

// --------------------------------------------------------
//  Styles for the helper which truncates the middle of a filename
// --------------------------------------------------------
.filename {
    overflow-wrap: break-word;
    word-break: break-word;

    &-truncated {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
    }
}

// --------
//   HIDE COMPONENTS UNTIL COMPONENT LIBRARY IS LOADED
// --------
.cla-hide-component {
    opacity: 0;
}

// Metadata user picker min-width limit
.metadata-user-picker .picker-input-group {
    min-width: 250px;
}

/** DEPRECATED CLASSES **/
//to be removed in a future major version

//replaced by '.d-none'
.invisible_table_row,
.invisible_table {
    display: none;
}

//replaced by '.invisible'
.not-visible {
    visibility: hidden;
    opacity: 0;
}

//replaced by '.d-none'
.hide, .hidden {
    display: none;
}

//replaced by '.text-nowrap'
.nowrap {
    white-space: nowrap;
}

//replaced by '.text-wrap'
.wrapperize {
    white-space: normal;
}

//replaced by '.clearfix'
.cleared,
.clear {
    clear: both;
}

//replaced by '.text-center'
.Center {
    text-align: center !important;
}

//replaced by '.text-right'
.Right {
    text-align: right !important;
}

//replaced by '.text-left'
.Left {
    text-align: left !important;
}

//replaced by '.text-break'
.commonlist-breaking-link {
    word-break: break-word !important;
}

// --------------------------
// --- SMART NEWS STYLING
// --------------------------
.col-sm-5, .col-md-5, .col-lg-5,
.col-sm-4, .col-md-4, .col-lg-4,
.col-sm-3, .col-md-3, .col-lg-3,
.col-sm-2, .col-md-2, .col-lg-2 {
    .smart-news .media-left,.smart-news .media-body {
        width: 100%;
        display: block;
    }
    .smart-news .media-left {
        margin-bottom: 8px;
    }
}

.anchor {
    display: block;
    height: 45px;
    margin-top: -45px;
}
/**END OF DEPRECATED CLASSES **/
