ITSSTOOLS/datamodels/2.x/itop-portal-base/portal/web/css/portal.css

/*******************/
/* Global settings */
/*******************/
@media (max-width: 768px){
	body{
		padding-top: 60px;
	}
}
footer{
	margin: 5em 1em;
}

/* Navigation menu */
.navbar-nav .dropdown-menu a .glyphicon,
.user_infos .dropdown-menu a .glyphicon{
	margin-right: 15px;
}
/* Topbar */
#topbar #navbar{
	overflow-y: auto;
}
#topbar .user_infos{
	text-decoration: none;
}
#topbar .user_photo{
	margin-right: 10px;
}
#topbar .user_photo img{
	margin-top: -4px;
	max-width: 100%;
	max-height: 100%;
	height: 25px;
	border-radius: 100%;
}
/* Sidebar */
#sidebar{
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 0px; /* Overriding BS */
	height: 100%;
}
#sidebar .user_card{
	padding: 30px 0px;
	background-color: #F2F2F2; /* TODO : Change this */
	text-align: center;
}
#sidebar .user_card .user_photo{
	margin-bottom: 10px;
}
#sidebar .user_card .user_photo img{
	border-radius: 100%;
	width: 70px;
}
#sidebar .user_card .user_infos{
	font-size: 1em;
}
#sidebar .user_card .user_options.dropdown-menu{
	width: 92%;
	left: 4%;
}
#sidebar .user_card .user_fullname{
	font-weight: 600;
}
#sidebar .menu{
	max-height: 59%;
	overflow-y: auto;
}
#sidebar .logo{
	position: absolute;
	bottom: 15px;
	width: 100%;
	text-align: center;
}
#sidebar .logo img{
	max-width: 100%;
}

/* Overlays*/
.global_overlay{
	z-index: 9999;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
}
#page_overlay .overlay_content{
	margin-top: 20em;
	width: 100%;
	color: white;
}
.overlay_content{
	text-align: center;
}
.content_loader .icon{
	margin-bottom: 0.3em;
	/*width: 52px;*/
	height: 38px; /* 50px; *//* Hack to make loader circle perfectly */
	font-size: 3em; /* 4em; */
	animation: spin 1.2s linear infinite;
	-webkit-animation: spin 1.2s linear infinite;
	-moz-animation: spin 1.2s linear infinite;
	-ms-animation: spin 1.2s linear infinite;
}
.content_loader .message{
	font-size: 1.5em; /* 2em; */
}

.datatables_overlay{
	padding: 5% 0px !important;
	background-color: white;
}

/******************/
/* Global classes */
/******************/
/*@media (min-width: 768px) {
	.row-eq-height-sm {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
}
@media (min-width: 992px) {
	.row-eq-height-md {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
}
@media (min-width: 1200px) {
	.row-eq-height-lg {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
}*/

.vertical-center {
	/* Make it a flex container */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex; 
  
	/* Align the bootstrap's container vertically */
	-webkit-box-align : center;
	-webkit-align-items : center;
	-moz-box-align : center;
	-ms-flex-align : center;
	align-items : center;
  
	/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
	hence the bootstrap's container won't be aligned to the center anymore.
  
	Therefore, we should use the following declarations to get it centered again */
	-webkit-box-pack : center;
	-moz-box-pack : center;
	-ms-flex-pack : center;
	-webkit-justify-content : center;
	justify-content : center;
}

/*********************/
/* Global animations */
/*********************/
/* Spin */
@keyframes spin{
	100% {
		transform: rotate(360deg);
	}
}
@-webkit-keyframes spin{
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spin{
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-ms-keyframes spin{
	100% {
		-ms-transform: rotate(360deg);
	}
}

/***************/
/* BS override */
/***************/
@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot');
  src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
label{
	font-weight: bold;
}

/*********************/
/* BS theme override */
/*********************/
.pagination{
	margin: 14px 0px; 
}
.list-group.tree{
	margin-top: 11px;
	margin-bottom: -11px;
}
.list-group-item{
	padding-right: 0px; /* To align all actions on the right without indent */
}
.tooltip-inner{
	max-width: 400px;
	padding: 15px;
}
.nav > li.active > a{
	font-weight: 600;
}

/* Custom "glyphicons" */
.glyphicon-ext-hierarchy:before {
    content: url('../img/icons/hierarchy-white-13px.png');
}

/**********************/
/* BS plugin override */
/**********************/
/* Datatables */
.table-striped > tbody > tr:hover {
	background-color: #fdf5d0;
}

/******************/
/* Modal settings */
/******************/
.modal-content .content_loader{
	margin: 7em 0em;
	text-align: center;
}

@media (min-width: 992px){
	.modal-lg {
		width: 80%;
		max-width: 1200px;
	}
}

/**************************/
/* MagnificPopup settings */
/**************************/
.mfp-bg{
	z-index: 1200;
}
.mfp-wrap{
	z-index: 1210;
}

/********************/
/* Typeahed setting */
/********************/
.twitter-typeahead .tt-menu{
	max-height: 200px;
	overflow-y: auto;
}
@media (min-width: 768px){
	.twitter-typeahead .tt-menu{
		max-height: 300px;
	}
}

.twitter-typeahead .tt-dataset > .content_loader{
	margin: 10px 0px;
	text-align: center;
	font-size: 0.6em;
}
.twitter-typeahead .tt-dataset > .content_loader .icon{
	height: 25px;
}
.twitter-typeahead .tt-dataset .no_result{
	text-align: center;
	font-style: italic;
}

/*****************/
/* Home settings */
/*****************/
.home #main-wrapper{
	padding-top: 15px;
}

.home .tile{
	margin-bottom: 8px;
	min-height: 4em;
	background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #8A8A8A;
    border-radius: 0px;
    text-align: center;
	text-decoration: none;
	white-space: normal;
}
.home .tile .tile_decoration{
	position: absolute;
	top: 3px;
	left: 21px;
}
.home .tile .tile_decoration > img{
	width: 45px;
	max-height: 45px;
}
.home .tile .tile_title{
	font-weight: bold;
	color: #333;
}
.home .tile .tile_description{
	display: none;
	color: #555555;
}
@media (min-width: 768px) {
	.home .tile{
		margin-bottom: 30px;
		min-height: 10em;
	}
	.home .tile .tile_decoration{
		position: absolute;
		top: -30px;
		left: 0px;
		width: 100%;
	}
	.home .tile .tile_decoration > img{
		width: 55px;
		max-height: 55px;
	}
	.home .tile .tile_title{
		font-size: 1.0em;
	}
	.home .tile .tile_description{
		display: block;
		margin: 15px 20px 0px 20px;
		text-align: justify;
	}
}
@media (min-width: 992px) {
	.home .tile{
		min-height: 15em;
	}
	.home .tile .tile_decoration{
		top: -35px;
	}
	.home .tile .tile_decoration > img{
		width: 85px;
		max-height: 85px;
	}
	.home .tile .tile_title{
		font-size: 1.4em;
	}
}

/********************/
/* Modules settings */
/********************/

#main-header-title{
	text-align: center;
}
@media (min-width: 768px) {
	#main-header-title{
		min-height: 6em;
		text-align: left;
	}
}

#main-header-actions > .row{
	margin-top: 20px;
}
@media(max-width: 768px){
	#main-header-actions{
		margin-bottom: 20px;
	}
}

.dataTables_wrapper{
	padding: 10px 10px;
}
#brick_content_toolbar{
	margin: 10px 0px 6px 0px;
}
#brick_content_toolbar > div label{
	font-weight: normal;
	white-space: nowrap;
	text-align: left;
}
#brick_content_toolbar > div label input{
	margin-left: 0.5em;
	display: inline-block;
	width: 130px;
}

/***********************/
/* Brick communication */
/***********************/
/* Home tile */
.home .tile.tile_communication{
    padding: 20px;
	background-color: #EDEDED;
	border: none;
	font-weight: initial;
}
.home .tile_communication .carousel{
	margin-bottom: 0px;
	width: 100%;
	height: 200px;
}

/**********************/
/* Brick user profile */
/**********************/
.home .userprofile-brick{
	background-color: #E8E7E7;
}

/****************/
/* Brick browse */
/****************/
/* - Tree mode  */
/****************/
#brick_content_tree{
	position: relative;
}
.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child{
	margin-bottom: 1px;
}

.list-group-item > .list-group-item-actions{
	/*display: none; Displaying actions only when hovering was not unanimous in the team */
	position: absolute;
	top: 10px;
	right: 10px;
}
.list-group-item:hover > .list-group-item-actions{
	display: block;
}
.list-group-item .list-group-item-actions a:not(:first-child){
	margin-left: 10px;
}
.list-group-item .list-group-item-text{
	margin-left: 5px;
	font-size: 1em;
	line-height: 1em;
}
.list-group-item .keep-spinning{
	animation: spin 1s linear infinite;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
}

/* Secondary actions */
table .group-actions{
	position: relative;
}
.list-group-item-actions a.glyphicon-menu-hamburger,
table .group-actions a.glyphicon-menu-hamburger{
	cursor: pointer;
	text-decoration: none;
}
.list-group-item-actions .item-action-wrapper,
table .group-actions .item-action-wrapper
{
	display: none;
	position: absolute;
	z-index: 5;
	bottom: 5px;
	right: 0px;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}
.list-group-item-actions .item-action-wrapper .glyphicon,
table .group-actions .item-action-wrapper .glyphicon{
	margin-right: 0.6em;
}
.list-group-item-actions .item-action-wrapper.collapse.in,
table .group-actions .item-action-wrapper.collapse.in{
	display: block;
}
.list-group-item-actions .item-action-wrapper .panel-body > p,
table .group-actions .item-action-wrapper .panel-body > p{
	white-space: nowrap;
}
.list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
table .group-actions .item-action-wrapper .panel-body > p:last-child{
	margin-bottom: 0px;
}

#brick_content_empty{
	display: none;
    padding: 40px;
	font-size: 1.3em;
    font-style: italic;
}

/* Loader */
#brick_tree_overlay{
	/*z-index: 10;*/
	display: none;
	padding: 8% 0px;
	/*position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	min-height: 130px;*/
	/*background-color: black;*/
	border-radius: 0px 0px 4px 4px;
	/*opacity: 0.5;
	color: white;*/
	font-size: 1em;
}
/****************/
/* - List mode  */
/****************/


/*********/
/* Forms */
/*********/
.form_fields textarea{
	height: 160px;
}
.form_field .form_mandatory .control-label:after{
	content: "\002a";
	position: relative;
	left: 3px;
	color: red; /* TODO : SASS this */
	font-size: 0.9em;
}
/* Subform field */
.subform_field > fieldset{
	margin: inherit;
	margin-bottom: 15px; /* TODO : SASS this from .form-group */
	padding: 10px 15px;
	border: 1px solid #dddddd; /* TODO : SASS this */
	border-radius: 4px; /* TODO : SASS this */
}
.subform_field > fieldset > legend{
	margin: 0px 0px;
	padding: 0px 7px;
	width: inherit;
	border: none;
	font-size: 1em;
	font-weight: bold;
	color: #777777; /* TODO : SASS this */
}
/* CaseLog field */
.caselog_field_entry{
	border: 1px solid #dddddd;
	border-top: none;
}
.caselog_field_entry_header{
	padding: 6px;
	font-size: 1em;
	border-bottom: 1px solid #FFFFFF;
	background-color: #F2F2F2;
}
.caselog_field_entry_button{
	display: block;
	width: 15px;
    height: 15px;
    text-align: center;
	line-height: 15px;
	font-size: 16px;
    border: 1px solid #a6a6a6;
    border-bottom-color: #979797;
}
.caselog_field_entry_button:hover{
	background-color: #cccccc;
}
.caselog_field_entry_button:before{
	content: "▴";
}
.caselog_field_entry_button.collapsed:before{
	content: "▾";
}
.caselog_field_entry_content{
	margin: 10px;
	overflow-x: auto;
}
/* FileUpload */
.fileupload_field_content{
	padding: 8px 23px;
	border: 1px solid #DDDDDD; /* TODO : SASS this */
	background-color: #F9F9F9; /* TODO : SASS this*/
}
.fileupload_field_content > div{
	margin-bottom: 15px;
}
.attachments_container .attachment {
	height: 95px;
	overflow-x: hidden;
	text-align: center;
}
.attachments_container .attachment:hover {
	background-color: #e0e0e0;
}
.attachments_container .attachment .attachment_name{
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.attachments_container .attachment .btn{
	margin-top: 3px;
}
.upload_container input{
	display: inline;
}
.upload_container .loader{
	visibility: hidden;
	margin-left: 7px;
	font-size: 1.2em;
	animation: spin 1.0s linear infinite;
	-webkit-animation: spin 1.0s linear infinite;
	-moz-animation: spin 1.0s linear infinite;
	-ms-animation: spin 1.0s linear infinite;
}
#drag_overlay{
	display: block;
	top: inherit;
	bottom: 0px;
	height: 0px;
}
#drag_overlay .overlay_content{
	margin-top: 5em;
    width: 100%;
    color: white;
}
#drag_overlay .overlay_content .icon{
	font-size: 3em;
}
#drag_overlay .overlay_content .message{
	font-size: 1.5em;
}
/* Attachments drag & drop zone, only for none mobile devices */
@media (min-width: 768px){
	#drag_overlay.drag_in{
		animation: show-drop-zone 0.3s ease-out forwards;
		-webkit-animation: show-drop-zone 0.3s ease-out forwards;
		-moz-animation: show-drop-zone 0.3s ease-out forwards;
		-ms-animation: show-drop-zone 0.3s ease-out forwards;
	}
	#drag_overlay.drag_out{
		animation: hide-drop-zone 0.3s ease-out forwards;
		-webkit-animation: hide-drop-zone 0.3s ease-out forwards;
		-moz-animation: hide-drop-zone 0.3s ease-out forwards;
		-ms-animation: hide-drop-zone 0.3s ease-out forwards;
	}
	@keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@-webkit-keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@-moz-keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@-ms-keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
	@-webkit-keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
	@-moz-keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
	@-ms-keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
}

.form_field .form-control-static img{
	max-width: 100% !important;
	height: initial !important;
}

.form_buttons{
	padding-top: 20px;
	text-align: center;
}
.form_buttons .form_btn_transitions{
	margin-bottom: 20px;
}
.form_btn_regular.sticky{
	display: none;
}
@media (min-width: 768px){
	.form_buttons .form_btn_transitions{
		float: left !important;
	}
	.form_buttons .form_btn_regular{
		text-align: right;
	}
	.form_buttons .form_btn_regular btn{
		width: inherit;
	}
	/* Making regular button sticky */
	.form_btn_regular.sticky{
		display: block;
		position: fixed;
		padding: 15px;
		background-color: #FFF; /* TODO : SASS this to panel bg */
		border: 1px solid #DDD; /* TODO : SASS this to panel border */
		border-radius: 4px; /* TODO : SASS this to panel border */
	}
	/* - For regular layout */
	#main-content .form_btn_regular.sticky{
		bottom: 0px;
		right: 15px; /* TODO : SASS this to col-xs-12 padding */
		transition: bottom 0.3s;
	}
	#main-content .form_btn_regular.sticky.closed{
		bottom: -80px;
	}
	/* - For modal layout */
	.modal.in .form_btn_regular.sticky{
		bottom: 5em;
		right: 15px; /* TODO : SASS this to col-xs-12 padding */
		transition: right 0.3s;
	}
	.modal.in .form_btn_regular.sticky.closed{
		right: -60px;
	}
	.modal.in .form_btn_regular.sticky button{
		display: block;
	}
}

/* CKEditor : Adding BS error feedback */
.form_field div.cke{
    border: 1px solid #dddddd; /* TODO : SASS this */
}
.form_field.has-error div.cke{
	border: 1px solid #D9230F; /* TODO : SASS this */
	border-radius: 3px; /* TODO : SASS this */
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
/* CKEditor : Styling notifications based on BS alerts */
.cke_notification{
    position: relative;
	padding: 15px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 4px;
	background-color: #FFFFFF
}
.cke_notification_close{
	position: absolute;
	top: 2px;
	right: 5px;
}
.cke_notification_message{
	margin-bottom: 0px;
	line-height: 1em;
	font-size: 1em;
}
.cke_notification_success{ /* TODO : SASS this */
	display: none;
	background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}
.cke_notification_warning{ /* TODO : SASS this */
    background-color: #fcf8e3;
    border-color: #fbeed5;
    color: #c09853;
}

/* DataTables : Fit the table in the form */
.form_linkedset_wrapper .dataTables_wrapper{
	margin-bottom: 5px;
	padding: 0px;
}
/* DataTables : Selection inputs */
.dataTable.table td span.row_input{
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}