//out: delos.css, sourcemap: true, compress: false

@import "less/font.less";
 /* rtl-review is this font safe for RTL languages? */

 /* rtl-review */
[dir="ltr"] * { direction: ltr; unicode-bidi: embed; } //bidi-override
[dir="rtl"] * { text-align: right; direction: rtl; unicode-bidi: embed; } //bidi-override

bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }
bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }


/*
/* rtl-review */
/* with specifics imports
add [dir="rtl"] SELECTOR ([dir="ltr"] is default)
to elements with different left/right margin, padding, border, position, float, clear, text-align and, when needed, Background-position.
In theory, you should also invert shadow... but i think we could postpone this to another release...
All parts that aren't checked yet are actually marked with "rtl-review"
*/

@bsbase: "../../node_modules/bootstrap/less/";

// This part should be a copy of the less/bootstrap.less file
// containing all imports needed.
// The variables.less should point to a customized version.

// Core variables and mixins
@import "@{bsbase}variables.less";    // original
@import "@{bsbase}mixins.less";

// Reset and dependencies
@import "@{bsbase}normalize.less";
//@import "@{bsbase}print.less";
@import "@{bsbase}glyphicons.less";

// Core CSS
@import "@{bsbase}scaffolding.less";
@import "@{bsbase}type.less";
@import "@{bsbase}code.less";
@import "@{bsbase}grid.less";
@import "@{bsbase}tables.less";
@import "@{bsbase}forms.less";
@import "@{bsbase}buttons.less";


// Components
@import "@{bsbase}component-animations.less";
@import "@{bsbase}dropdowns.less";
@import "@{bsbase}button-groups.less";
@import "@{bsbase}input-groups.less";
@import "@{bsbase}navs.less";
@import "@{bsbase}navbar.less";
@import "@{bsbase}pagination.less";
@import "@{bsbase}pager.less";
@import "@{bsbase}labels.less";
@import "@{bsbase}badges.less";
@import "@{bsbase}jumbotron.less";
@import "@{bsbase}thumbnails.less";
@import "@{bsbase}alerts.less";
@import "@{bsbase}progress-bars.less";
@import "@{bsbase}media.less";
@import "@{bsbase}list-group.less";
@import "@{bsbase}panels.less";
@import "@{bsbase}responsive-embed.less";
@import "@{bsbase}wells.less";
@import "@{bsbase}close.less";
@import "@{bsbase}breadcrumbs.less";

// Components w/ JavaScript
@import "@{bsbase}modals.less";
@import "@{bsbase}tooltip.less";
@import "@{bsbase}popovers.less";
@import "@{bsbase}carousel.less";

// Utility classes
@import "@{bsbase}utilities.less";
@import "@{bsbase}responsive-utilities.less";

// UI framework
@uibase: "../../src/UI/templates/default/";
@import "@{uibase}Counter/counter.less";
@import "@{uibase}Panel/panel.less";
@import "@{uibase}Card/card.less";
@import "@{uibase}Deck/deck.less";
@import "@{uibase}Dropzone/dropzone.less";
@import "@{uibase}Button/button.less";
@import "@{uibase}Button/tag.less";
@import "@{uibase}Button/toggle.less";
@import "@{uibase}Divider/divider.less";
@import "@{uibase}Dropdown/dropdown.less";
@import "@{uibase}Item/item.less";
@import "@{uibase}ViewControl/viewcontrol.less";
@import "@{uibase}Breadcrumbs/breadcrumbs.less";
@import "@{uibase}Chart/chart.less";
@import "@{uibase}Input/input.less";
@import "@{uibase}Table/table.less";
@import "@{uibase}Listing/workflow.less";
@import "@{uibase}Listing/characteristic_value.less";
@import "@{uibase}MessageBox/messagebox.less";
@import "@{uibase}Modal/modal.less";
@import "@{uibase}Tree/tree.less";
@import "@{uibase}Layout/layout.less";
@import "@{uibase}MainControls/maincontrols.less";
@import "@{uibase}Menu/menu.less";
@import "@{uibase}Symbol/symbol.less";
@import "@{uibase}Link/link.less";

@import "less/variables.less"; //ILIAS Less variables
@import "less/bootstrap-variables.less"; //Boostrap Variales, overwritten by ILIAS

// UI framework components which make use of variables from less/variables.less
// Note: These files need to be imported after less/variables.less
@import "@{uibase}Popover/popover.less";

//Extended color import depending on variables.less
@import "less/color.less";             // customized

.bg-primary {
  color: white;
}

// general multi line cap
@import "less/multi-line-cap.less";

// tab focus ilias mixin
@import "less/focus-mixin.less";

/* flex grid support start */

// solved problem with nested grids by adding width: 100% to mixin from bootstrap's grid-framework.less
 .make-grid-columns() {
  // Common styles for all sizes of grid columns, widths 1-12
  .col(@index) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
	  width: 100%; // this was added for ilias flex grid support
    }
  }
  .col(1); // kickstart it
}

.row-flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.row-flex-wrap {
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	align-content: flex-start;
}

.flex-col {
	display: flex;
	display: -webkit-flex;
	flex-flow: column nowrap;
	height: 100%; // to allow equal height cols inside
}

// omitted .flex-grow for now as it has no effect where it is currently used.

/* flex grid support end */

/* RTL review overwrite some specifics [bootstrap] styles
 *
 * use class "noMirror" to avoid image flip
*/
[dir="rtl"] img:not(.noMirror) {
    transform: scaleX(-1);
}

[dir="rtl"] *[align="left"] {
	text-align: right !important;
}

[dir="rtl"] *[align="right"] {
	text-align: left !important;
}

[dir="rtl"] .navbar-header {
  @media (min-width: @grid-float-breakpoint) {
    float: right;
  }
}

[dir="rtl"] .navbar-brand {
  float: right;
  @media (min-width: @grid-float-breakpoint) {
    .navbar > .container &,
    .navbar > .container-fluid & {
      margin-left: 0;
      margin-right: -@navbar-padding-horizontal;
    }
  }
}

[dir="rtl"] .navbar-toggle {
  float: left;
  margin-right: 0;
  margin-left: @navbar-padding-horizontal;
}


[dir="rtl"] .navbar-nav {
  @media (max-width: @grid-float-breakpoint-max) {
    // Dropdowns get custom display when collapsed
    .open .dropdown-menu {
      > li > a,
      .dropdown-header {
        padding: 5px 25px 5px 15px;
      }
    }
  }

  @media (min-width: @grid-float-breakpoint) {
    float: right;
    margin: 0;

    > li {
      float: right;
    }

    &.navbar-right:last-child {
      margin-right: 0;
      margin-left: -@navbar-padding-horizontal;
    }
  }
}
@media (min-width: @grid-float-breakpoint) {
  [dir="rtl"] .navbar-left  { .pull-right(); }
  [dir="rtl"] .navbar-right { .pull-left(); }
}

[dir="rtl"] .navbar-form {
  @media (min-width: @grid-float-breakpoint) {
    &.navbar-right:last-child {
      margin-right: 0;
      margin-left: -@navbar-padding-horizontal;
    }
  }
}

[dir="rtl"] .navbar-text {
  @media (min-width: @grid-float-breakpoint) {
    float: right;
    &.navbar-right:last-child {
		margin-right: @navbar-padding-horizontal;
		margin-left: 0;
    }
  }
}

[dir="rtl"] form .col-sm-1,
[dir="rtl"] form .col-sm-2,
[dir="rtl"] form .col-sm-3,
[dir="rtl"] form .col-sm-4,
[dir="rtl"] form .col-sm-5,
[dir="rtl"] form .col-sm-6,
[dir="rtl"] form .col-sm-7,
[dir="rtl"] form .col-sm-8,
[dir="rtl"] form .col-sm-9,
[dir="rtl"] form .col-sm-10,
[dir="rtl"] form .col-sm-11,
[dir="rtl"] form .col-sm-12 {
    float: right;
}

[dir="rtl"] .nav-pills > li {
  float: right;
}

// warning inline text
span.ilAlert {
	color: @brand-warning;
}

/* Drop Downs */

.dropdown-header {
	padding: 3px 10px;
	color: @il-text-color;
	background-color: @dropdown-header-bg;
	margin-bottom: 4px;
	border-bottom: 1px solid @il-main-border-color;
	> h2 {
		margin-bottom: 2px;
	}
}
.dropdown-menu {
	background-color: @dropdown-bg;
	font-weight: normal;
	border: 0 none;
    .box-shadow(3px 9px 9px 0 rgba(0,0,0,0.3));
	// Links within the dropdown menu
	li > a {
		display: block;
		clear: both;
		padding: 3px 10px;
		font-weight: normal;
		font-size: @il-font-size-dropdown;
		line-height: @line-height-base;
		background-color: @dropdown-link-bg;
		color: @dropdown-link-color;
		white-space: nowrap; // prevent links from randomly breaking onto new lines
		&:hover,
		&:focus {
			text-decoration: none;
			color: @dropdown-link-hover-color;
			background-color: @dropdown-link-hover-bg;
		}
	}
	img {
		border: 0;
		width: 22px;
		height: 22px;
		margin: 0 3px 0 0;
		display: @il-nav-icons;
	}
}
[dir="rtl"] .dropdown-menu {
	padding: 5px 0;
}
// must be like dropdown-menu img
.ilAdvNoImg {
	display: inline-block;
	width: 22px;
}
.yamm .dropdown-menu {
	li > a {
		white-space: normal;
	}
}

.btn-group.open .dropdown-toggle {
    .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
}

/* BS tables */
.table {
	margin-bottom: 0;
}


/* ILIAS part candidates */

html, body {
	height:100%;
	overflow: hidden;
}
html {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		-webkit-text-size-adjust: none;
	}
}
html, body {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		overflow: initial;
		height: auto;
		min-height: 100vh;
	}
}
/* see bug ILIAS bug #17589 and http://stackoverflow.com/questions/17045132/scrollbar-overlay-in-ie10-how-do-you-stop-that */
body{
	-ms-overflow-style: scrollbar;
}

#ilAll {
	position: relative;
	height: auto !important;
	min-height: calc(~"100% - 1px");
	margin: 0 auto;
}

div#minheight {
	height: 180px;
	clear: both;
	}

div.ilFrame {
	margin-top: -40px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
    .box-shadow(0 0 40px #808080);
	padding-top: 129px;
	background-color: @il-main-dark-bg;
	min-height: 100%;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		margin: 0;
		width: 100%;
	}
}

.ilContainerWidth {
	max-width: 1400px;
	padding: 0 30px;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		padding: 0 15px;
	}
}

/*
	it would be good to limit the content width in some cases
	- for many forms 1400px is too wide
	- but not for all (e.g. question editing if tiny is used)
	- screens that use tables often need the full width
	- screens with (container) item lists often look ugly on 1400px (title <-> action arrow distance)
	1028px is the current max. width of the center column if at least one other column
	is displayed. This or any higher value could be set for the center column as a max-width,
	but not for all screens, options:
	- introduce a limiting class for center col and set this as "default", add another class that deactivates the
	  limit (-> screens that have wide content need to activate this class)
	- keep the current wide center col, introduce only a limiting class (-> screens that want a narrow view need
	  to activate the class)
	- use a limiting class only on some UI elements, e.g. forms and container item lists
*/
#il_center_col {
	/* max-width: 1028px; */
}

/* left navigation area (used, e.g. for explorer trees) */
.ilLeftNav {
	top: 0;
	bottom:	0;
	width: 300px;
	float: left;
	position: absolute;
	padding: 5px;
	margin-left: 15px;
	overflow: auto;
	background-color: @il-main-bg;
	border-right: 3px solid lighten(@il-neutral-color, 33%);
	z-index: 100;
	position: fixed;
	top: @il-header-height;
	@media only screen and (max-width: @screen-lg-min) {
		/* at last temporary, since it overlaps content */
        display: none;
    }
}
[dir="rtl"] .ilLeftNav {
	float: right;
	margin-left: 0;
	margin-right: 15px;
	border-right: none;
	//See 20986 with according JF decision
	border-left: 3px solid lighten(@il-neutral-color, 33%);
}

/* --------------------------------------------------------------
	"Classic" delos part
-------------------------------------------------------------- */


/* --------------------------------------------------------------
   GLOBAL STYLES
-------------------------------------------------------------- */

ul, ol, p {
	margin: .8em 0;
}

ol, ul {
	padding-left: 40px;
    list-style-image: none;//mantis #19613: stop the inheritance for nested list until specifically setted
}
[dir="rtl"] ol, [dir="rtl"] ul {
	padding-right: 40px;
	padding-left: 0;
}

ol ul, ul ol,
ul ul, ol ol {
	margin-top: 0;
	margin-bottom: 0
}

small, sub, sup {
	font-size: .8em;
}

em, i {
	font-style: italic;
}

u {
	text-decoration: underline;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

/* see bug #15971 */
sub, sup {
	position: static;
}

strong, b {
	font-weight: bold;
}

a {
	text-decoration: none;
	cursor: pointer;
	/* BEGIN WebDAV: Enable links with AnchorClick behavior for Internet Explorer.
	 * All skins which want to support mounting of Webfolders using Internet Explorer
	 * must explicitly enable AnchorClick behavior.
	 */
	behavior: url(#default#AnchorClick);
	/* END WebDAV: Enable links with AnchorClick behavior for Internet Explorer. */
	&:hover {
		color: @link-hover-color;
		text-decoration: underline;
	}
	
	.il-focus();
}

hr {
	margin-bottom: .8em;
	border: none;
	border-top: 1px solid @il-main-border-color;
}

table {
	font-size: 100%;
}

img {
	vertical-align: middle;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		/* height: auto; messes e.g. survey progress bar */
		max-width: 100%;
	}
	&.olTileImage {
		@media only screen and (max-width: @grid-float-breakpoint-max) {
			// this fixes the open street map images, not the best place to
			// to this. another option would be to not put the
			// max-width behaviour above on every img...
			max-width: none;
		}
	}
}

tr, td {
    vertical-align: top;
	white-space: normal;
    word-wrap: break-word;
}

code {
	font-family: Pragmata, Menlo, 'DejaVu LGC Sans Mono', 'DejaVu Sans Mono', Consolas, 'Everson Mono', 'Lucida Console', 'Andale Mono', 'Nimbus Mono L', 'Liberation Mono', FreeMono, 'Osaka Monospaced', Courier, 'New Courier', monospace;
	font-size: 90%;
	color: @il-text-light-color;
}

::selection {
	background: lighten(@il-main-color, 50%);
}

::-moz-selection {
	background: lighten(@il-main-color, 50%);
}

textarea {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		max-width: 100%;
	}
}

input, select {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		max-width: 100%;
	}
}

//please move to template/default/less/modules/Test when created
div.ilc_Mob img {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		height: auto !important;
	}
}

@media print {
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}

	ul, ol, dl {
		page-break-before: avoid;
	}
}

/* --------------------------------------------------------------
   SPECIAL STYLES
-------------------------------------------------------------- */

body#tinymce, body.mceContentBody {
	height: auto;
}


body#tinymce {
	background-color: white;
	overflow: initial;
}

html.il-no-tiny-bg body#tinymce {
	background-color: transparent;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


.ilHidden {
	visibility: hidden;
}

.ilNoDisplay {
	display: none !important;
}

.ilDisplayBlock {
	display: block;
}

.ilClearFloat {
	clear: both;
}

.ilFloatRight {
  float: right;
}

[dir="rtl"] .ilFloatRight {
  float: left;
}

.ilFloatLeft {
  float: left;
}

[dir="rtl"] .ilFloatLeft {
  float: right;
}

.ilWhiteSpaceNowrap {
	white-space: nowrap;
}

.ilWhiteSpaceNowrap.ilRight {
	a, .btn-group {
		padding-left: @il-padding-small-horizontal;
		border: 1px solid transparent;
	}
}

.ilPositionRelative {
	position: relative;
}

.ilPrintContent {
	padding: 0 15px;
}

.ilCenter {
	text-align: center;
}

.ilRight {
	text-align: right;
}

[dir="rtl"] .ilRight {
	text-align: left;
}

.ilLeft {
	text-align: left;
}

[dir="rtl"] .ilLeft {
	text-align: right;
}

.ilValignMiddle {
	vertical-align: middle;
}

.registration {
  margin: 5px auto 0;
  width: 700px;
}

.fullwidth {
	width: 100%;
}

div.input {
	border: 1px solid @il-main-border-dark-color;
	padding: 3px;
	text-decoration: none;
	font-size: 90%;
	background-color: white;
	overflow: auto;
}
div.input:focus {
	border-color: @il-focus-color;
}
input[type=text].numeric {
	text-align: right;
}

div.ilTableOuter {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		max-width: 100%;
		overflow: auto;
	}
}

.table-responsive .dropdown-menu {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
        position: relative;
    }
}


/* -------------------- table formatting ------------------ */

div.ilCommandRow {
	 text-align: right;
	 padding-right: 1%;
	 margin-bottom: 15px;
}

[dir="rtl"] div.ilCommandRow {
	 text-align: left;
	 padding-right: 0;
	 padding-left: 1%;
}

div.ilCommandRow.one_side_col {
	 padding-right: 22%;
}

[dir="rtl"] div.ilCommandRow.one_side_col {
	 padding-right: 0;
	 padding-left: 22%;
}

div.ilAdminRow {
	margin: 10px 15px 20px 15px;
}

table.std {
	color: @il-text-color;
	background-color: #bbb;
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #9eadba;
}


.fullwidth_invisible {
	color: @il-text-color;
	background-color: @il-main-dark-bg;
	width: 100%;
	border-spacing: 0;
}

table.nobackground {
	color: @il-text-color;
	background-color: inherit;
	border-spacing: 0;
	padding: 3px;
}


.subitem {
  clear: both;
  margin: 0 -10px 0 0;
  padding-top: 5px;
  /* border-top: 1px dotted #c0c0c0; */
}

[dir="rtl"] .subitem {
  clear: both;
  margin: 0 0 0 -10px;
}

td.nobackground {
	color: black;
	background-color: inherit;
	border-spacing: 0;
	border: none;
	padding: 3px;
	vertical-align: top;
}

tr.tbltitle {
	border-bottom: 1px solid #9eadba;
}

tr.std {
	background-color: white;
	color: @il-text-color;
	padding: 3px;
}

th {
	text-align: left;
	vertical-align: bottom;
	font-weight: normal;
}

td.std, th.std {
	padding: 4px 6px;
	text-align: left;
}

[dir="rtl"] th,
[dir="rtl"] td.std, [dir="rtl"] th.std {
	text-align: right;
}

.calstd .btn {
	white-space: normal;
}

th.option, td.option {
	background-color: @il-main-bg;
	color: @il-text-color;
	padding: 3px;
	font-weight : bold;
	vertical-align: top;
	text-align: right;
	border-top: 1px solid #9eadba;
}

[dir="rtl"] th.option, [dir="rtl"] td.option {
	text-align: left;
}

td.sub_option {
	background-color: white;
	color: @il-text-color;
	padding: 3px;
	font-weight : bold;
	vertical-align: top;
	border-top: 1px solid #9eadba;
}

td.option_value {
	background: none white;
	color: @il-text-color;
	padding: 3px;
	vertical-align: top;
	text-align: left;
	border-top: 1px solid #9eadba;
}

[dir="rtl"] td.option_value {
	text-align: right;
}

td.option_value_center {
	background: none white;
	color: @il-text-color;
	padding: 3px;
	vertical-align: top;
	text-align: center;
	border-top: 1px solid #9eadba;
}

td.option_desc, p.option_desc {
	background: none white;
	color: @il-text-color;
	padding: 3px;
	font-style: italic;
	font-weight: normal;
	vertical-align: top;
	text-align: left;
}

[dir="rtl"] td.option_desc, [dir="rtl"] p.option_desc {
	text-align: right;
}

td.boxed {
	border: 1px solid black;
}

/*Link, Visited, Hover, Focus, Activ*/
a.il_ContainerItemCommand2:link, a.il_ContainerItemCommand2:visited,
a.il_ContainerItemCommand:link, a.il_ContainerItemCommand:visited {
	font-size: 80%;
	text-decoration: none;
	margin: 0 3px 0 0;
	white-space: nowrap;
	font-weight: normal;
}

[dir="rtl"] a.il_ContainerItemCommand2:link,
[dir="rtl"] a.il_ContainerItemCommand2:visited,
[dir="rtl"] a.il_ContainerItemCommand:link,
[dir="rtl"] a.il_ContainerItemCommand2:visited {
	margin: 0 0 0 3px;
}

a.il_ContainerItemCommand2:hover,
a.il_ContainerItemCommand:hover {
	text-decoration: underline;
}

div.il_ContainerItemCommands2 {
	text-align: right;
	margin: 0 3px 3px;
}

[dir="rtl"] div.il_ContainerItemCommands2 {
	text-align: left;
}

div.il_ContainerItemCommands {
	padding: 2px 0;
}

h3.il_ContainerItemTitle {
	padding: 0;
	margin: 0;
	font-weight: normal;
	font-size: 100%;
	display: inline;
}

div.il_ContainerItemTitle {
	float: left;
    max-width: calc(~"100% - 40px");
	padding-bottom: 5px;
}

[dir="rtl"] div.il_ContainerItemTitle {
	float: right;
}

div.il_ItemProperties {
	margin: 2px 0 5px;
	text-align: left;
	font-weight: normal;
	font-size: 90%;
}

[dir="rtl"] div.il_ItemProperties {
	text-align: right;
}

div.il_ItemNotice {
	margin: 2px 0 5px;
	text-align: left;
	font-weight: normal;
	font-size: 90%;
	color: green;
}

[dir="rtl"] div.il_ItemNotice {
	text-align: right;
}

a.il_ItemProperty:link, a.il_ItemProperty:visited {
	text-decoration: none;
	font-weight: normal;
}

a.il_ItemProperty:hover {
	color: black;
}

span.il_ItemAlertProperty {
	color: @brand-warning;
}

/* Table Links */
/* --- description text ---*/
div.il_Description, td.il_Description {
	margin: 2px 0 5px;
	font-size: 90%;
	font-weight: normal;
	text-align: left;
}

[dir="rtl"] div.il_Description,
[dir="rtl"] td.il_Description {
	text-align: right;
}

div.il_Description_no_margin, td.il_Description_no_margin {
	font-size: 90%;
	font-style: italic;
	text-align: left;
}

[dir="rtl"] div.il_Description_no_margin,
[dir="rtl"] td.il_Description_no_margin {
	text-align: right;
}

div.il_info {
	font-size: 90%;
	text-align: left;
}

[dir="rtl"] div.il_info {
	text-align: right;
}


/* ---------------- headlines ------------------ */

a#il_mhead_t_focus {
	color: darken(@il-secondary-color, 20%);
	vertical-align: middle;
	font-size: 26px;
    cursor: default;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
        font-size: 20px;
    }
    &[href] {
        cursor: pointer;
    }
}

h1.ilHeader {
	padding: 10px 0 0;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
        padding-top: 5px;
    }
}

h2.ilHeader {
	font-weight: normal;
	padding: 0;
	margin: 0;
	display: inline;
	font-size: @font-size-h3;
	color: @il-neutral-color;
}

#headerimage {
	width: 45px;
	height: 45px;
	margin-top: 3px;
	margin-right: 10px;
	float: left;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
        width: 35px;
		height: 35px;
		margin-top: 2px;
		margin-right: 7px;
    }
}

[dir="rtl"] #headerimage {
	margin-right: 0;
	margin-left: 10px;
	float: right;
}

div.ilHeadAction {
	float: right;
	margin: 8px 0 5px; /* bottom 5px blog fullscreen */
}

[dir="rtl"] div.ilHeadAction {
	float: left;
}

div.ilHeadAction .prop {
	padding-right: 10px;
}

[dir="rtl"] div.ilHeadAction .prop {
	padding-right: 0;
	padding-left: 10px;
}

div.ilHeadAction a:hover {
	text-decoration: none;
}

div.ilHeaderDesc {
	font-size: 90%;
	padding: 0;
	color: @il-text-color;
	font-weight: 300;
}

div.ilHeaderAlert {
	font-size: 90%;
	padding: 0;
	font-weight: 300;
	color: @brand-warning;
}

div.il_HeaderInner {
	padding: 15px;
	margin-bottom: 5px;
	overflow: visible;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		color: @il-text-color;
	}
	&.media {
		margin-top: 0;
	}
}

div.il_TreeIcons {
	padding: 15px 15px 0 0;
	margin: 0;
	float: right;
}

[dir="rtl"] div.il_TreeIcons {
	padding: 15px 0 0 15px;
	float: left;
}

/* ----------------- permanent link  ------------- */
#current_perma_link {
	color: @il-text-color;
	font-size: 90%;
	
	&:focus-visible {
		outline: @il-focus-outline-inner-width solid @il-focus-protection-color;
		outline-offset: @il-focus-outline-outer-width;
	}
}
a.permalink_label {
	> span.glyphicon {
		display: none;
	}
}

.ilPermalinkContainer {
	width: 100%;
}

div.ilPermanentLinkWrapper {
	clear: both;
	margin-top: 10px;
	display: inline-block;
	width: 100%;
	a.permalink_label {
		> span.glyphicon {
			@media only screen and (max-width: @grid-float-breakpoint-max) {
				display: inline;
			}
		}
	}
	.ilPermalinkContainer {
		table-layout: fixed;
		line-height: 22px;
		@media only screen and (max-width: @grid-float-breakpoint-max) {
			padding-right: 0;
		}
		> label {
			width: 150px;
			display: table-cell;
			vertical-align: middle;
			@media only screen and (max-width: @grid-float-breakpoint-max) {
				padding-right: 0;
				width: 24px;
			}
		}
		> input, .btn-group {
			z-index: 0;		/* see bug #24567 */
		}
		.input-group-btn {
			width: 28px;
		}
	}
}

div.il_Footer {
	padding: 10px 0;
	font-size: 90%;
	text-align: center;
}

footer.ilFooter {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px !important;
	font-size: 0.9em;
	height: 70px;
	margin: 0 auto;
	padding: 20px 0 0;
	text-align: left;
	background-color: @il-footer-bg-color;
	color: @il-footer-color;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		height: auto;
	}
	div.ilFooterContainer {
		color: @il-footer-color;
		//float: left;
		line-height: 1.75;
		padding: 0 15px;
	}
	a.permalink_label,
	div.ilFooterContainer > a {
		color: @il-footer-color;
		white-space: nowrap;
		&:hover {
			color: @il-footer-color;
		}
	}
	a.permalink_label {
		> span.glyphicon {
			@media only screen and (max-width: @grid-float-breakpoint-max) {
				display: inline;
			}
		}
	}
	.ilPermalinkContainer {
		width: auto;
		> label {
			display: table-cell;
			vertical-align: middle;
			padding-right: 5px;
			@media only screen and (max-width: @grid-float-breakpoint-max) {
				padding-right: 0;
				width: 24px;
			}
		}
		padding-right: 5px;
		line-height: 22px;
		@media only screen and (max-width: @grid-float-breakpoint-max) {
			padding-right: 0;
		}
	}
}

[dir="rtl"] footer.ilFooter {
	text-align: right;
}

/* ----------------- invisible border ------------- */
div.invisible_border {
	margin: 15px;
}

.ilInvisibleBorder {
	padding: 15px;
}

/* ------- Helptext --------- */
span.il_Helptext {
	font-size: 90%;
	font-weight: normal;
}

/* ----------------- alternative text styles ------------- */
.small {
	text-decoration: none;
	font-size: 90%;
}

.xsmall {
	text-decoration: none;
	font-size: 80%;
}

.smallgreen {
	text-decoration: none;
	font-size: 90%;
	color: green;
}

.smallred {
	text-decoration: none;
	font-size: 90%;
	color: @il-danger-color;
}

.obligatory {
	font-weight: normal;
	color: #800000;
	font-variant: normal;
}

.warning {
	text-decoration: none;
	font-weight: bold;
	color: @il-danger-color;
}

div.Access {
	text-decoration: none;
	font-weight: bold;
	text-decoration: underline;
	color: @il-danger-color;
}

.asterisk {
	color: @il-danger-color;
	font-size: 90%;
}

.default {
	text-decoration: none;
	font-weight: normal;
}


.quote {
	font-style: italic;
	font-weight: normal;
}

.subtitle {
	font-style: italic;
	font-weight: normal;
	font-size: 90%;
}

.questiontext {
	font-weight: bold;
}

.bold {
	font-weight: bold;
}

.light {
	color: @il-text-light-color;
}

/* ----------------- normal links ------------- */
a.light:link, a.light:visited {
	text-decoration: none;
	color: #35b;
}

a.light:hover {
	color: black;
}

/* Messages */
/* ------------------ blind image - spacer gif --------------
   please use this style class always when using this blind image */
img.spacer {
	display: block;
}

div#agreement {
	width: 100%;
	height: 375px;
	overflow: auto;
	overflow-x: hidden;
}

/* bottom center area (optional bottom area, used e.g. in learning modules) */
div#bot_center_area {
	bottom:	0;
	height: 300px;
	position: fixed;
	padding: 5px;
	background-color: @body-bg;
	border-top: 3px solid @il-main-border-color;
	-webkit-overflow-scrolling: touch; /* Bug 11209 */
	overflow: auto; /* Bug 11209 */
}

div#bot_center_area iframe {
	-webkit-overflow-scrolling: touch; /* Bug 11209 */
	overflow: auto; /* Bug 11209 */
	border: none;
	width: 100%;
	height: 100%;
}

div#bot_center_area_drag {
	left: 0;
	right: 0;
	height: 4px;
	cursor: row-resize;
	margin-top: -8px;
	position: absolute;
}

#drag_zmove {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 7;
	display: none;
}

div#bot_center_area_drag:hover {
	background: none #fa9;
}


.ilLeftNavSpace {
	/* padding: 0 20px 0 310px; */
	margin-left: 315px !important;
	@media (max-width: @screen-lg-min) {margin-left: 0 !important;}
}


[dir="rtl"] .ilLeftNavSpace {
	margin-left: 0 !important;
	margin-right: 315px !important;
	@media (max-width: @screen-lg-min) {margin-right: 0 !important;}
}

/* see #27399 (should be finally tackled in PLR2) */
div.ilContentFixed {
	padding-bottom: 20px;
}

/* right panel (e.g. notes, comments) */
div.ilRightPanel {
	overflow: auto;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: 500px;
	left: auto !important;
}

[dir="rtl"] div.ilRightPanel {
	right: auto !important;
	width: 500px;
	left: 0 !important;
}

#ilRightPanelClose {
	display: block;
	float: right;
}

[dir="rtl"] #ilRightPanelClose {
	float: left;
}


/* Overlays, Blocks */
.ilOverlay {
	background-color: white;
	border: 1px solid @il-main-border-color;
	text-align: left;
	position: absolute;
    .box-shadow(2px 2px 4px #c0c0c0);
}

[dir="rtl"] .ilOverlay {
	text-align: right;
}

.ilAccHeadingHidden, .ilAccHidden, .ui-helper-hidden-accessible {
	position: absolute;
	left: -2000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

[dir="rtl"] .ilAccHeadingHidden, [dir="rtl"] .ilAccHidden, [dir="rtl"] .ui-helper-hidden-accessible {
	left: auto; /* may causes a scrollbar when omitted */
	right: -2000px;
}

a.ilAccAnchor, a.ilAccAnchor:hover {
	text-decoration: none;
	color: inherit;
}

/* revised 4.1 */


/* Fixed Frame Width */
div.ilFrameFixedWidth, .ilFrameFixedWidth #mainscrolldiv {
	/* max-width: 1370px; */
	margin: 0 auto;
}

.ilFrameFixedWidth #mainscrolldiv {
	margin: 0 auto;
}

div.ilFrameFixedWidthHeader {
	margin: 0 auto;
	padding: 0;
}

.ilFrameFixedWidthHeader div.ilHeaderBanner {
	overflow: hidden;
	padding: 0 15px;
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		max-width: 100%;
		height: 40px !important;
		padding: 0;
	}
}

div.ilHeaderBanner img.ilHeaderImg {
	width: 100%;
}

.ilFrameFixedWidth div.ilHeaderDesc {
	padding-left: 0;
}

[dir="rtl"] .ilFrameFixedWidth div.ilHeaderDesc {
	padding-left: inherit;
	padding-right: 0;
}

div.ilBox {
	background: url("@{il-background-images-path}FramedBack.png") repeat-x;
	border: 1px solid @il-main-border-color;
	padding: 10px;
	margin-bottom: 20px;
}

/* Top-Bar */
div.ilTopBar {
	background-color: @il-top-bar-bg;
	color: @il-top-bar-color;
	padding: 5px 10px;
	a {
		color: @il-top-bar-link-color;
			&:hover,
			&:active,
			&:focus {
				color: @il-top-bar-link-hover-color;
		}
	}
}

div.ilTopBarLeft {
	float: left;
}

[dir="rtl"] div.ilTopBarLeft {
	float: right;
}

div.ilTopBarRight {
	float: right;
}

[dir="rtl"] div.ilTopBarRight {
	float: left;
}

div.ilTopBarRight span#ilAdvSelListAnchorElement_asl {
	margin-right: 25px;
	color: black;
}

[dir="rtl"] div.ilTopBarRight span#ilAdvSelListAnchorElement_asl {
	margin-right: 0;
	margin-left: 25px;
}

div.ilSideBarHead{
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 5px;
}

div.ilSideBarHead h3, div.ilSideBarHead h1 {
	font-size: 110%;
	color: @il-text-color;
	display: inline;
	padding: 0;
}

div.ilSideBarContent{
	padding: 5px;
}

/* jquery ui autocomplete */
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	float: left;
	background-color: @dropdown-bg;
	border: 1px solid @il-main-border-color;
	font-size: 90%;
	z-index: 5;
    .box-shadow(2px 2px 4px #c0c0c0);
	.ui-menu-item {
		margin: 0;
		padding: 0;
		zoom: 1;
		float: left;
		clear: left;
		width: 100%;
		> * {
			text-decoration: none;
			display: block;
			padding: 2px 4px;
			line-height: 1.5;
			color: @dropdown-link-color;
			background-color: @dropdown-link-bg;
			&:hover, &.ui-state-hover, &.ui-state-active {
				background-color: @dropdown-link-hover-bg;//@il-highlight-bg;
				color: @dropdown-link-color;
			}
		}
		a {
			color: @dropdown-link-color;
			&:hover {
				color: @dropdown-link-hover-color;
			}
		}
	}
	.ui-menu-category {
		margin: 0;
		padding: 2px;
		zoom: 1;
		float: left;
		clear: left;
		width: 100%;
		font-weight: bold;
	}
	.ui-menu-more {
		display: block;
		zoom: 1;
		color: #03a;
		cursor: pointer;
		float: left;
		clear: left;
		width: 100%;
		span {
			padding: 2px;
		}
		&:hover {
			background-color: white;
		}
	}
}

[dir="rtl"] .ui-menu {
	float: right;
	.ui-menu-item {
		float: right;
		clear: right;
	}
	.ui-menu-category {
		float: right;
		clear: right;
	}
	.ui-menu-more {
		float: right;
		clear: right;
	}
}

.ui-autocomplete {
	max-height: 400px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;

	li.ui-menu-item {
		cursor: pointer;
	}
}

/* Icon Default */
img.ilIcon {
	width: 32px;
	height: 32px;
}

/* Icon small */
img.ilSmallIcon {
	width: 22px;
	height: 22px;
}

/* PreventBreakOut, see https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */
.ilPreventBreakOut {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Component Imports */

@import "less/Services/Accordion/delos.less";
@import "less/Modules/ScormAicc/delos.less";
@import "less/Services/Form/delos.less";
@import "less/Services/UIComponent/Explorer2/delos.less";
@import "less/Modules/Forum/delos.less";
@import "less/Services/Mail/delos.less";
@import "less/Services/COPage/delos.less";
@import "less/Services/Calendar/delos.less";
@import "less/Modules/Wiki/delos.less";
@import "less/Services/MainMenu/delos.less";
@import "less/Services/UIComponent/Tabs/delos.less";
@import "less/Services/UIComponent/GroupedList/delos.less";
@import "less/Services/Table/delos.less";
@import "less/Services/Notes/delos.less";
@import "less/Modules/Blog/delos.less";
@import "less/Services/Skill/delos.less";
@import "less/Modules/Poll/delos.less";
@import "less/Services/Search/delos.less";
@import "less/Services/Help/delos.less";
@import "less/Modules/DataCollection/delos.less";
@import "less/Modules/Bibliographic/delos.less";
@import "less/Services/MediaObjects/delos.less";
@import "less/Services/Chart/delos.less";
@import "less/Services/Captcha/delos.less";
@import "less/Services/User/delos.less";
@import "less/Services/Style/delos.less";
@import "less/Modules/Course/delos.less";
@import "less/Modules/Chatroom/delos.less";
@import "less/Services/Container/delos.less";
@import "less/Modules/LearningModule/delos.less";
@import "less/Services/UIComponent/AdvancedSelectionList/delos.less";
@import "less/Services/Object/delos.less";
@import "less/Services/Navigation/delos.less";
@import "less/Services/Block/delos.less";
@import "less/Services/UIComponent/Lightbox/delos.less";
@import "less/Services/Membership/delos.less";
@import "less/Modules/BookingManager/delos.less";
@import "less/Services/InfoScreen/delos.less";
@import "less/Services/Init/delos.less";
@import "less/Services/Bookmarks/delos.less";
@import "less/Services/UIComponent/Toolbar/delos.less";
@import "less/Services/UIComponent/Tooltip/delos.less";
@import "less/Services/Rating/delos.less";
@import "less/Modules/Excercise/delos.less";
@import "less/Services/UIComponent/ProgressBar/delos.less";
@import "less/Services/News/delos.less";
@import "less/Modules/Survey/delos.less";
@import "less/Modules/MediaPool/delos.less";
@import "less/Services/Tags/delos.less";
@import "less/Services/UIComponent/Checklist/delos.less";
@import "less/Modules/WorkspaceFolder/delos.less";
@import "less/Services/FileUpload/delos.less";
@import "less/Modules/Portfolio/delos.less";
@import "less/Services/Awareness/delos.less";
@import "less/Services/OnScreenChat/delos.less";
@import "less/Services/Certificate/delos.less";
@import "less/Services/TermsOfService/delos.less";
@import "less/Services/UIComponent/Modal/delos.less";
@import "less/Services/Badge/delos.less";
@import "less/Services/Calendar/bootstrap-datetimepicker.less";
@import "less/Modules/OrgUnit/delos.less";
@import "less/Modules/LTIConsumer/delos.less";
@import "less/Services/Like/delos.less";
@import "less/Modules/LearningSequence/delos.less";
@import "less/Services/LearningHistory/delos.less";
@import "less/Services/Preview/delos.less";
@import "less/Services/WebDAV/delos.less";
@import "less/Modules/Test/delos.less";

.noMargin {
	margin: 0;
}

div.editLink {
	padding-right: 1em;
}

[dir="rtl"] div.editLink {
	padding-right: 0;
	padding-left: 1em;
}

img[src$="icon_checked.svg"] {
	height: 11px;
    margin: 0 6px 0 5px;
    opacity: 0.5;
    width: 11px;
}

[dir="rtl"] img[src$="icon_checked.svg"] {
    margin: 0 5px 0 6px;
}

.glyphicon-ok {
    font-size: 11px;
	text-align: center;
}

.pdMailRow {
	.imageSpace {
		margin-left: 40px;
	}
	> img {
		margin: 2px 0;
		max-width:30px;
	}
}

[dir="rtl"] .pdMailRow {
	.imageSpace {
		margin-left: 0;
		margin-right: 40px;
	}
}

[dir="rtl"] .radio label, [dir="rtl"] .checkbox label {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .radio input[type="radio"],
[dir="rtl"] .radio-inline input[type="radio"],
[dir="rtl"] .checkbox input[type="checkbox"],
[dir="rtl"] .checkbox-inline input[type="checkbox"] {
    margin-left: 0;
    margin-right: -20px;
}

.il_InfoScreenSection {
	padding: 10px 10px 0;
	> .ilFloatRight {
		padding-bottom: 4px;
		padding-right: 4px;
	}
}

[dir="rtl"] .il_InfoScreenSection {
	> .ilFloatRight {
		padding-right: 0;
		padding-left: 4px;
	}
}

.yui-panel-container {
	color: @il-text-color;
}
.mceEditor, .mceLayout {
	width: 100% !important;
}

table.mceLayout {
	table-layout: fixed;
}

.mceIframeContainer iframe {
	max-width: 100%;
}

table.mceToolbar {
	table-layout: fixed;
	display: inline-block;
	float: left;
	height: auto !important;
	max-width: 100%;
	tbody, tr, td {
		display: inline-block;
		white-space: normal !important;
	}
}

.alert {
	> a {
		text-decoration: underline;
	}
}
.alert {
	> a.btn {
		text-decoration: none;
	}
}


//Horizontal Scroll Bar for Code, see: #27132
.code-container{
	display: grid;
}

div.ilGoogleMap {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
        max-width: 100%;
     }
}

.navbar-nav {
	@media only screen and (max-width: @grid-float-breakpoint-max) {
		//no idea why needed, but this one fixes the drop downs in the small media view (e.g. main menu)
        margin: 7.5px 0px;
     }
}

.yui-skin-sam {
	&.form-inline .form-control {
		vertical-align: top;
	}
	.yui-button button {
		line-height: 23px;
		min-height: 23px;
	}

}
/* basic responsiveness (beta)
	no more specific section. no more delos_sm.less data (treated as bug)
	"Responsive" code has to be inserted like:
	.myClass {
		...
		@media only screen and (max-width: @grid-float-breakpoint-max) {
			...
		}
	}
*/


/* print css */
@media print {
    //bootstrap print.less
    * {
		/* see bug 0022342 */
        /* text-shadow: none !important;
        color: black !important; // Black prints faster: h5bp.com/s
        background: transparent !important;
        box-shadow: none !important; */
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    // Don't show links for images, or javascript/internal links
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid @il-main-border-dark-color;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; // h5bp.com/t
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
    // Once fixed, we can just straight up remove this.
    select {
        background: white !important;
    }

    // Bootstrap components
    .navbar {
        display: none;
    }
    .table {
        td,
        th {
            background-color: white !important;
        }
    }
    .btn,
    .dropup > .btn {
        > .caret {
            border-top-color: black !important;
        }
    }
    .label {
        border: 1px solid black;
    }

    .table {
        border-collapse: collapse !important;
    }
    .table-bordered {
        th,
        td {
            border: 1px solid @il-main-border-color !important;
        }
    }

    //i also duplicate the selectors  untill the class hidden-print is used
    #ilTopBar,
    .osdNotificationContainer,
    .ilMainHeader,
    .ilMainMenu,
    .ilTreeView,
    .btn,
    #ilTab,
    #ilSubTab,
    #minheight,
    #ilFooter {
        display: none;
    }
    #mainspacekeeper {
        padding: 0;
    }
    .ilLeftNavSpace {
        margin-left: 0 !important;
    }
	div.ilTabContentOuter {
		border: none;
	}

	div.ilFileDropTargetOverlay {
		display: none;
	}

	// overwrite bootstrap href printing
	a[href]:after {
		content: "";
	}
}

// show more text
.read-more-state {
	display: none;
}

.read-more-target {
	opacity: 0;
	max-height: 0;
	font-size: 0;
	transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
	opacity: 1;
	font-size: inherit;
	max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
	content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
	content: 'Show less';
}

.read-more-trigger {
	cursor: pointer;
	display: inline-block;
	padding: 0 .5em;
	color: @il-neutral-light-color;
	font-size: .9em;
	line-height: 2;
	border: 1px solid @il-main-border-color;
	border-radius: .25em;
}
