/******************************************************
 * padding for navbar and footer
 ******************************************************/
body {
	padding-top: 65px;
}

.smallTopPadding {
	padding-top: 10px;
}

/******************************************************
 * Allow angular.js to be loaded in body, hiding cloaked elements until
 * templates compile.  The !important is important given that there may be
 * other selectors that are more specific or come later and might alter display.
 ******************************************************/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/******************************************************
 * fix form modal bottom margin
 ******************************************************/
.modal>form {
	margin: 0;
}

/* bigger modal */
@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

/******************************************************
 * fix form modal scroll wheel
 * possible causing problems with safari<7.1
 * https://github.com/twbs/bootstrap/issues/16297
 ******************************************************/
.modal.fade.in {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

/******************************************************
 * reduce space in between form elements
 ******************************************************/
.form-horizontal .control-group {
	margin-bottom: 17px;
}

/******************************************************
 make text pink
 ******************************************************/

.text-pink {
  color: pink;
}

/******************************************************
 make text bold
 ******************************************************/
.text-bold {
	font-weight: bold;
}

/******************************************************
 underline text
 ******************************************************/
.text-ins {
	text-decoration: underline;
}

/******************************************************
 strikethrough text
 ******************************************************/
.text-strike {
    text-decoration: line-through;
}

/******************************************************
 underline text
 ******************************************************/
.text-italic {
	font-style: italic;
}

/******************************************************
 * hide scrollbar on tab content
 ******************************************************/
.tab-content {
	overflow: hidden;
}

/******************************************************
 * prevent tooltip from wrapping and accept new lines with <br>
 * http://stackoverflow.com/questions/13338780/how-to-make-twitter-bootstrap-tooltips-have-multiple-lines
 ******************************************************/
.tooltip-inner {
	white-space: pre;
	max-width: none;
}

/******************************************************
 * UI Bootstrap documented mouse pointer fix
 * http://angular-ui.github.io/bootstrap/#/getting_started
 ******************************************************/
.nav, .pagination, .carousel, .panel-title a {
	cursor: pointer;
}

/* and to counter that fix ... what am i doing... */
.auto-pointer {
	cursor: auto !important;
}

.section {
	margin-bottom: 50px;
}

/******************************************************
 * Main navigation
 * Turn the `.navbar` at the top of the docs purple.
 ******************************************************/
.purple-nav {
	/*text-shadow: 0 -1px 0 rgba(0,0,0,.15);*/
	background-color: #563d7c;
	border-color: #463265;
	box-shadow: 0 1px 0 rgba(255,255,255,.1);
}
.purple-nav .navbar-collapse {
	border-color: #463265;
}
.purple-nav .navbar-brand {
	color: #fff;
}
.purple-nav .navbar-nav > li > a {
	color: #cdbfe3;
}
.purple-nav .navbar-nav > li > a:focus,
.purple-nav .navbar-nav > li > a:hover {
	color: #fff;
}
.purple-nav .navbar-nav > .active > a,
.purple-nav .navbar-nav > .active > a:focus,
.purple-nav .navbar-nav > .active > a:hover {
	color: #fff;
	background-color: #463265;
}
.purple-nav .navbar-nav > .open > a,
.purple-nav .navbar-nav > .open > a:focus,
.purple-nav .navbar-nav > .open > a:hover {
	color: #fff;
	background-color: #463265;
}
.purple-nav .navbar-toggle {
	border-color: #563d7c;
}
.purple-nav .navbar-toggle:focus,
.purple-nav .navbar-toggle:hover {
	background-color: #463265;
	border-color: #463265;
}

/******************************************************
 * fullcalendar
 ******************************************************/
/* weekend background */
.fc-sat, .fc-sun {
	background-color: #EFEFEE;
}
/* better highlighting bg-color for current day */
.fc-today {
	background-color: #F5E9A9;
}
/* since v2 only href events and draggable events get pointer, fixing this */
.fc-event{
	cursor: pointer;
}
/******************************************************
 * fullcalendar multiline events
 * http://stackoverflow.com/questions/25272132/multiline-titles-in-fullcalendar-2-1-0-beta1-2-in-day-grid
 ******************************************************/
.fc-day-grid-event > .fc-content {
	white-space: normal;
}

/******************************************************
*	make tooltip in modal appear correct after applying:
*		attribute tooltip-append-to-body="true"
 ******************************************************/
.tooltip {
	z-index: 10300000;
}

/* bigger glyphicons for login page */
span.glyphicon-login {
	font-size: 35px;
}

/* spacers */
.spacer5 { height: 5px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer10 { height: 10px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer15 { height: 15px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer20 { height: 20px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer25 { height: 25px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer30 { height: 30px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer35 { height: 35px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer40 { height: 40px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer45 { height: 45px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer50 { height: 50px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer60 { height: 60px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer80 { height: 80px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer100 { height: 100px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }
.spacer200 { height: 200px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: flex; }

/* remove top border from tables */
table.table > tbody > tr:first-child > td {
	border-top: 0;
}
td.no-top-border {
	border-top: 0 !important;
}
tr.no-top-border > td {
	border-top: 0 !important;
}

/* stretch button to full width */
button.stretch {
	width: 100%;
}

/* remove default bootstrap grid padding */
.nopadding {
	padding: 0 !important;
	margin: 0 !important;
}

.nomargin {
	margin: 0 !important;
}

/* tables without borders */
.table-borderless tbody tr td, .table-borderless thead tr th {
	border: none;
}

.table-nobottommargin {
	margin-bottom: 0px;
}

.table-transparent {
	background-color: transparent !important;
}

.table-very-condensed > thead > tr > th,
.table-very-condensed > tbody > tr > th,
.table-very-condensed > tfoot > tr > th,
.table-very-condensed > thead > tr > td,
.table-very-condensed > tbody > tr > td,
.table-very-condensed > tfoot > tr > td {
	padding: 1px;
}

/* hidden onscreen and viewed when printing */
.yes-print, .yes-print * {
	display: none;
}

/* smaller font for screen */
.screen-custom-font-size {
	font-size: 70%;
}

@media print {
	.table-borderless tbody tr td, .table-borderless thead tr th {
		border: none !important;
	}
	.no-print, .no-print * {
		display: none !important;
	}
	.yes-print, .yes-print * {
		display: inline !important;
	}
	body {
		padding-top: 10px;
	}

	/* normal font size for printing */
	.normal-print-font-size {
		font-size: 85%;
	}

	/* small font size for printing */
	.small-print-font-size {
		font-size: 60%;
	}

	/* small font for screen printing */
	.screen-custom-font-size {
		font-size: 60%;
	}

	/* smaller font for activityreport */
	.activityReport-custom-font-size {
		font-size: 85%;
	}

	.ciks {
		font-size: 70%;
	}
	.table-striped > tbody > tr:nth-child(odd) {
		background-color: #f9f9f9 !important;
	}
	/* copied from bootstrap (only the bear necessities) //--> bear necessities, get it?! :)
	 * so with every new bootstrap version, we need to remove the '@media print' part
	*/
	img {
		page-break-inside: avoid;
	}
	.panel {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	.navbar {
		display: none;
	}
	.text-danger {
		color: #a94442 !important;
	}
	.text-warning {
		color: #8a6d3b !important;
	}
}

/* some form-groups don't need a bottom margin */
.no-bottom-margin {
	margin-bottom: 0px;
}

/* pointer for clickable items */
.clickable {
	cursor: pointer;
}

/* pointer for not-clickable items */
.not-clickable {
	cursor: not-allowed;
}

/* override ui-select centered texts
 * (test for 0.9.6, bootstrap theme still not fixed)
 */
/*
.ui-select-toggle {
	text-align: left !important;
}
*/

/* mirror whatever */
.mirrored {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

/* Side notes for calling out things
-------------------------------------------------- */

/* Base styles (regardless of theme) */
.bs-callout {
	margin: 20px 0;
	padding: 15px 30px 15px 15px;
	border-left: 5px solid #eee;
}
.bs-callout h4 {
	margin-top: 0;
}
.bs-callout p:last-child {
	margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
	background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
	background-color: #fcf2f2;
	border-color: #dFb5b4;
}
.bs-callout-warning {
	background-color: #fefbed;
	border-color: #f1e7bc;
}
.bs-callout-info {
	background-color: #f0f7fd;
	border-color: #d0e3f0;
}

.table tbody>tr>td.vert-align {
	vertical-align: middle;
}

/* label as badge - usefull for colors */
.label-as-badge {
	border-radius: 1em;
}

/* fat border around tr for weekends */

tr.fat-border {
	border: 2px solid #777;
}

tr.bg-success-hatched {
	background: repeating-linear-gradient(
		45deg,
		#dff0d8,
		#dff0d8 15px,
		#fff 15px,
		#fff 20px
	);
}

tr.bg-danger-hatched {
	background: repeating-linear-gradient(
		45deg,
		#f2dede,
		#f2dede 15px,
		#fff 15px,
		#fff 20px
	);
}

/*
 * when using a timepicker (or other big elements) inside a form-horizontal
 * labels and other crap are not vertically aligned
 * in bootstrap 3: no other solution then to pad individually
 */
.timepicker-label {
	padding-top: 41px !important;
}
.timepicker-extra-text {
	top: 41px !important;
}
.timepicker-extra-button {
	padding-top: 34px !important;
}

/* normal text color */
.text-inherit {
	color: inherit !important;
}

div.thin-border {
	border: 1px solid #ddd;
	border-radius:30px;
}

.popover{
		max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

/**
 * Progress bars with centered text
 */
.progress {
    position: relative;
    margin-bottom: 0px; /* remove bottom margin */
}
.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
 }

 .no-top-padding {
 	padding-top: 0px !important;
 }

 .no-bottom-padding {
 	padding-bottom: 0px !important;
 }

 .5-top-padding {
 	padding-top: 5px !important;
 }

 .no-bottom-padding {
 	padding-bottom: 0px !important;
 }

 .list-group-item-condensed {
	padding: 5px;
 }

/*
 * fix for ngDraggable
 * when dragging, the element went behind some other bootstrap elements
 * https://github.com/fatlinesofcode/ngDraggable/issues/103
 * https://github.com/fatlinesofcode/ngDraggable/issues/177
 */
.dragging {
	position: relative;
}

.checkbox.no-margin {
	margin-top: 0px;
	margin-bottom: 0px;
}

/*
 * background colors for basic mission
 */

.bgRed {
	display:inline-block;
	background-color: #dc3545!important;
}

.bgDarkBlue {
	display:inline-block;
	background-color: #0000cc!important;
}

.bgLightBlue {
	display:inline-block;
	background-color: #0099ff!important;
}

.bgYellow {
	display:inline-block;
	background-color: #ffc107!important;
}

.bgDarkGreen {
	display:inline-block;
	background-color: #008000!important;
}

.bgLightGreen {
	display:inline-block;
	background-color: #00e600!important;
}

.bgGrey {
	display:inline-block;
	background-color: #6c757d!important;
}

.bgPurple {
	display:inline-block;
	background-color: #990099!important;
}

.bgOrange {
	display:inline-block;
	background-color: #ff8000!important;
}

.bgPink {
	display:inline-block;
	background-color: #ffb3bf!important;
}

.bgOlive {
	display:inline-block;
	background-color: #808000!important;
}

.bgDark {
	display:inline-block;
	background-color: #262626!important;
}

.text-white {
	color: #fff;
}


/* DROPDOWN SUBMENU */

.dropdown-submenu {
	position: relative;
}
.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.full-scrollable {
    max-height: 85vh;
    overflow-y: scroll;
    overflow-x: hidden;
}