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

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

/* Navigation menu */
.navbar-nav .dropdown-menu a .glyphicon,
.user_infos .dropdown-menu a .glyphicon{
	margin-right: 15px;
}
.nav > li > a > span.brick_icon{
	margin-right: 20px;
}
/* Topbar */
#topbar .navbar-header{
	position: relative;
	z-index: 2;
}
#topbar .navbar-collapse{
	position: relative;
	z-index: 1;
	overflow-y: auto;
}
#topbar .navbar-collapse > .navbar-nav{
	padding-top: 30px;
}
#topbar .navbar-brand{
	padding: 5px 15px;
}
#topbar .navbar-brand > img{
	max-height: 100%;
}
#topbar .user_infos{
	text-decoration: none;
}
#topbar .user_photo{
	position: absolute;
	display: block;
	top: 5px;
	left: 10px;
	width: 65px;
	height: 65px;
	background-size: 100%;
	background-position: center center;
	background-color: #585653;
	border: 2px solid #FFFFFF;
	border-radius: 100%;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
#topbar .user_fullname{
	margin-left: 85px;
	color: #FFFFFF;
}
/* Sidebar */
@media (min-width: 768px){
	#sidebar{
		position: fixed;
		top: 0px;
		left: 0px;
		padding: 0px; /* Overriding BS */
		height: 100%;
	}
	#sidebar .user_card{
		padding: 30px 0px;
		background-color: #EA7D1E; /* TODO : Change this */
		text-align: center;
		box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
	}
	#sidebar .user_card .user_photo{
		margin: 0px auto 10px auto;
		width: 80px;
		height: 80px;
		background-size: 100%;
		background-position: center center;
		background-color: #585653;
		border: 2px solid #FFFFFF;
		border-radius: 100%;
	}
	#sidebar .user_card .user_infos{
		font-size: 1em;
		color: #FFFFFF;
	}
	#sidebar .user_card .user_infos .dropdown-toggle{
		color: #FFFFFF;
	}
	#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 .menu .nav > li{
		line-height: 3.0em;
	}
	#sidebar .menu .nav > li:after{
		content: "";
		display: block;
		position: relative;
		/*margin-left: 6.8em;
		width: 56%;*/
		color: #FFFFFF;
		border-bottom: 1px solid #7D7D7D;
	}
	#sidebar .menu .nav > li.active{
		box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8) inset;
	}
	#sidebar .menu .nav > li.active:after{
		content: " ";
		position: absolute;
		right: 0px;
		top: 0px;
		border: 30px solid transparent;
		border-right-width: 20px;
		border-right-color: #EDECEC;
	}
	#sidebar .menu .nav > li.active > a{
		margin-top: -1px; /* To mask border from previous li item */
		/*margin-left: 4em;
		padding-left: 1em;*/
	}
	#sidebar .menu .nav > li > a{
		/*padding-left: 3em;*/
		padding-left: 10%;
		overflow-x: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	#sidebar .menu .nav > li > a > .brick_icon{
		width: 1.2em;
		vertical-align: sub;
		text-align: center;
		margin-right: 10px;
	}
	#sidebar .logo{
		position: absolute;
		bottom: 15px;
		width: 100%;
		text-align: center;
	}
	#sidebar .logo img{
	width: 40%;
	max-width: 100%;
}
}
@media (min-width: 992px){
	
}
/* Warning : Not a offical BS breakpoint */
@media (min-width: 1600px){
	#sidebar .user_card .user_photo{
		width: 120px;
		height: 120px;
	}
	#sidebar .menu .nav > li > a > .brick_icon{
		margin-right: 20px;
	}
}

/* Main content */
@media (min-width: 768px) {
	#main-wrapper{
		margin-top: 20px;
	}
}

/* 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 */
/******************/
.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 */
/*********************/
body{
	background-color: #EDECEC;
}
a{
	color: #D46201;
}
a:hover, a:focus{
	color: #C15A02; /* TODO : Darken #D46201 */
}
.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;
}

/* Navbars */
.navbar-fixed-top .navbar-header{
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}

.navbar-default .navbar-toggle {
    border-top: none;
	border-right: none;
	border-bottom: none;
	border-radius: 0px;
	margin-right: 0px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
	background-color: inherit;
}
.navbar-default .navbar-toggle .icon-bar{
	height: 3px;
}
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form{
	border: none;
}

.navbar-default{
	background-color: #585653;
	border: none;
}
.navbar-default .nav > li > a,
.navbar-default .nav.navbar-nav > li > a{
	color: #FFFFFF;
}
.navbar-default .nav > li > a:focus,
.navbar-default .nav > li > a:hover,
.navbar-default .nav.navbar-nav > li > a:focus,
.navbar-default .nav.navbar-nav > li > a:hover{
	background-color: #FFFFFF;
	color: #EA7D1E;
}
.navbar-default .nav > li.active,
.navbar-default .nav.navbar-nav > li.active > a{
	background-color: #292827; /* TODO Darken #585653 */
	color: #FFFFFF;
	font-weight: 600;
}

/* Dropdowns */
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
	text-decoration: none;
    color: #FFFFFF;
    background-color: #EA7D1E;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a{
	color: #FFFFFF;
    background-color: inherit;
}

/* Buttons */
/* - Default */
.btn-default,
.btn-default:active, .btn-default.active,
.btn-default:hover, .btn-default:focus{
	color: inherit;
    background-color: #FFFFFF;
	background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.btn-default:hover, .btn-default.active:focus{
	background-color: #FAFAFA; /* TODO : Darken white */
}
.btn-default:active, .btn-default.active{
	background-color: transparent; /* Body background */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
	border: none;
	border-bottom-color: #EBEAEA;
}
.btn-default:active:hover, .btn-default.active:hover, 
.btn-default:active:focus, .btn-default.active:focus,
.btn-default:active.focus, .btn-default.active.focus {
	color: inherit;
    background-color: #EAEAEA; /* Darken body background */
	border: inherit;
}
/* - Primary */
.btn-primary,
.btn-primary:active, .btn-primary.active,
.btn-primary:hover, .btn-primary:focus{
	color: #FFFFFF;
    background-color: #EA7D1E;
	background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
.btn-primary:hover,
.btn-primary:active:hover, .btn-primary.active:hover, 
.btn-primary:active:focus, .btn-primary.active:focus, 
.btn-primary:active.focus, .btn-primary.active.focus{
	background-color: #DA751C; /* TODO : Darken #EA7D1E */
}

/* Button groups */
.btn-group.btn_group_explicit{
	padding: 7px;
	background-color: #292827;
	border: 1px solid #EBEAEA;
	border-radius: 30px;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4) inset;	
}
.btn-group.btn_group_explicit .btn{
	color: #FFFFFF;
	background-color: transparent;
	border: none;
}
.btn-group.btn_group_explicit .btn.active{
	color: #6B6965;
	background-color: #EDECEC;
	border-radius: 37px !important;
	box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4);
}

/* Panels */
.panel{
	border: none;
	border-radius: 0px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

/* Forms */
.form-control{
	border-radius: 0px;
}

/* Pagination */
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #EA7D1E;
    border-color: #EA7D1E;
}
.pagination>li>a:hover,
.pagination>li>span:hover, 
.pagination>li>a:focus, 
.pagination>li>span:focus {
    background-color: #EA7D1E;
    border-color: #EA7D1E;
}

/* Modal */
.modal-content{
	border-radius: 0px;
}

/* 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{
	display: block;
	margin-bottom: 8px;
	padding: 0em 1em;
	min-height: 4em;
	background-color: #FFFFFF;
    background-image: none;
    border: none;
	border-radius: 0px;
    text-align: center;
	text-decoration: none;
	white-space: normal;
	line-height: 4em;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.home .tile .tile_decoration{
	position: absolute;
	top: 0.3em;
	left: 2.5em;
}
.home .tile .tile_title{
	font-weight: bold;
	color: #333;
}
.home .tile .tile_description{
	display: none;
	color: #555555;
}
@media (min-width: 768px) {
	.home .tile{
		display: block;
		margin-bottom: 25px;
		padding: 40px 40px 30px 40px;
		min-height: 10em;
		text-align: left;
		transition: all 0.2s linear;
	}
	.home .tile:hover{
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.10);
	}
	.home .tile .tile_decoration{
		display: block;
		position: relative;
		float: left;
		top: 1.5em;
		left: initial;
		margin: 0px 30px 15px 0px;
	}
	.home .tile .tile_body{
		display: block;
		text-align: left;
		line-height: 1.5em;
	}
	.home .tile .tile_title{
		margin-bottom: 1em;
		font-size: 1.0em;
	}
	.home .tile .tile_description{
		display: block;
		text-align: justify;
	}
}
@media (min-width: 992px) {
	.home .tile{
		min-height: 14em;
		padding: 30px 40px 30px 40px;
	}
	.home .tile .tile_decoration > span.icon{
		font-size: 4em;
	}
	.home .tile .tile_title{
		font-size: 1.4em;
	}
	.home .tile .tile_description{
		font-size: 1.2em;
	}
}
@media (min-width: 1200px) {
	.home .tile{
		margin-bottom: 40px;
		min-height: 15em;
		padding: 40px 50px 30px 50px;
	}
	.home .tile .tile_decoration{
		margin: 0px 40px 15px 0px;
		top: 1.5em;
	}
	.home .tile .tile_decoration > span.icon{
		font-size: 6em;
	}
	.home .tile .tile_title{
		font-size: 1.5em;
	}
	.home .tile .tile_description{
		font-size: 1.2em;
	}
}

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

#main-header{
	text-align: center;
}
#main-header-title{
	margin-bottom: 15px;
}

#main-header-actions{
	margin-bottom: 15px;
}
#main-header-actions .btn-group .btn{
	padding: 0em 1.5em;
	line-height: 2.8em;
	font-size: 14px;
}
@media (min-width: 768px) {
	#main-header:after{
		clear: both;
	}
	#main-header-title{
		float: left;
		margin-bottom: 0px;
		min-height: 6em;
		text-align: left;
	}
	#main-header-actions{
		float: right;
		margin-bottom: 0px;
	}
}

.dataTables_wrapper{
	padding: 10px 10px;
}
#brick_content_toolbar{
	/* margin: 10px 0px 6px 0px; */
	padding: 10px;
}
#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;
}
/* LinkedSet*/
.form_linkedset_toggler,
.form_linkedset_toggler:hover,
.form_linkedset_toggler:focus{
	margin-left: 0.4em;
	text-decoration: none;
	color: inherit;
}
.form_linkedset_toggler > .text:before{
	content: "(";
}
.form_linkedset_toggler > .text:after{
	content: ")";
}
.form_linkedset_toggler > .glyphicon{
	margin-left: 0.5em;
	font-size: 0.85em;
	color: #EA7D1E; /* TODO : SASS this to primary color */
	transition: transform 0.2s linear;
}
.form_linkedset_toggler > .glyphicon.collapsed{
	transform: rotateZ(-90deg);
}
/* - DataTables : Loader */
.form_linkedset_wrapper .datatables_overlay{
	padding: 8px !important;
}
.form_linkedset_wrapper .overlay_content{
	font-size: 0.6em;
}
.form_linkedset_wrapper .content_loader{
	margin: 0px;
}
.form_linkedset_wrapper .content_loader .icon{
	height: 23px;
}
/* - DataTables : Fit the table in the form */
.form_linkedset_wrapper .dataTables_wrapper{
	margin-bottom: 5px;
	padding: 0px;
}
/* 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_buttons .btn .glyphicon{
	margin-right: 0.5em;
}
.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;
		bottom: 5em;
		right: -2px; /* TODO : SASS this to col-xs-12 padding */
		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 */
		transition: right 0.3s;
	}
	.form_btn_regular.sticky.closed{
		right: -75px;
	}
	.form_btn_regular.sticky button{
		display: block;
	}
	.form_btn_regular.sticky button:first-child{
		margin-bottom: 4px;
	}
	/* - Adjustments for modal sticky buttons */
	.modal.in .form_btn_regular.sticky{
		/*right: 15px;*/ /* TODO : SASS this to col-xs-12 padding */
	}
}

/* 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 : Selection inputs */
.dataTable.table th span.row_input,
.dataTable.table td span.row_input{
	display: inline-block;
	width: 100%;
	text-align: center;
}