/* Add here all your CSS customizations */

/* Main */
body {
	font-family: "Open Sans", Arial, sans-serif;
}
.card-quaternary .card-subtitle, .card-tertiary .card-subtitle, .card-tertiary .card-subtitle {
	color: #fff;
}
h4 {
    font-size: 1.2em;
    line-height: 20px;
}
table.smalltable th, table.smalltable td {
	padding: 0.5rem;
}

.text-warning {
    color: #ed9c28 !important;
}
.body tr {
	vertical-align: top;
	font-size: 0.8rem;
	font-weight: 400;
	color: #777;
}
div span.above {
	margin-bottom: 0.25rem;
	line-height: 1;
	white-space: nowrap;
	display: block;
}
div span.below {
	margin-bottom: 0.25rem;
	line-height: 1;
	white-space: nowrap;
}
.modal-header.modal-primary {
	background-color: #9E76FF;
}
.modal-header.modal-warning {
	background-color: #ed9c28;
}
.modal-header.modal-danger {
	background-color: #d2322d;
}
.modal-header h2 {
	color: #fff;
}
.slightly-small {
	font-size: 80%;
}
.very-small {
	font-size: 65%;
}
.multiselect-selected-text{
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
  white-space: normal;
}

a[href $='.pdf'] { 
	padding-left: 20px;
	background: transparent url(../img/pdficon_small.png) no-repeat center left;
}
a[href ^="https://"] {
	padding-left: 20px;
	background: transparent url(../img/externalicon_small_jeeni.png) no-repeat center left;
}
a[href ^="http://"] {
	padding-left: 20px;
	background: transparent url(../img/externalicon_small_jeeni.png) no-repeat center left;
}

/* These rules are to amend the behaviour of images added in the Processwire backend using CKEditor */
p > img.align_left {
    float: left;
    margin: 0% 3% 3% 0%;
}
p > img.align_right {
    float: right;
    margin: 0% 0% 3% 3%;
}

/* Miscellaneous */
.userbox {
	width: 150px;
}
.thumb-info .thumb-info-title {
    bottom: -4%;
}
.card-footer {
    background: #F6F6F6;
    padding: 0.75rem 1.25rem;
}
.caution-primary {
/* Makes the background into a striped cross-hatching */
	background: repeating-linear-gradient(
		45deg,
		#9E76FF,
		#9E76FF 10px,
		#588B16 10px,
		#588B16 20px
	);
	color: #fff;
}
.caution-info {
/* Makes the background into a striped cross-hatching */
	background: repeating-linear-gradient(
		45deg,
		#9E76FF,
		#9E76FF 10px,
		#588B16 10px,
		#588B16 20px
	);
	color: #fff;
}

/* Ad-hoc styles for typography  */
.emphasise {
	font-weight: 600;
	color: #333;
}
.label-xmas {
	background: #a9295c;
}
.btn-label {
	cursor: auto !important;
	opacity: 0.85;
	pointer-events: none;
}
.btn-xmas {
	background-color: #a9295c;
	border-color: #52142d;
	color: #fff;
}
.btn-systemexpert {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #000080;
	border-color: #000080;
}
.btn-systemexpert:hover {
	background-color: #0000cc;
	border-color: #000080;
	color: #fff;
}
.btn-systemadvanced {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #0066ff;
	border-color: #0066ff;
}
.btn-systemadvanced:hover {
	background-color: #3385ff;
	border-color: #0066ff;
	color: #fff;
}
.btn-preferred {
	background-color: #545454;
	border-color: #3a3a3a;
	color: #fff;
}
.btn-default {
	background-color: #ebebeb;
	border-color: #a6a6a6;
	color: #777;
}
.multiselect.btn-default {
	background-color: #fff;
}


/* Navigation */
div.inner-toolbar ul li.nav-active a {
	color: #9E76FF !important;
}

ul.nav-main > li.nav-active > a {
	color: #9E76FF;
}
.page-header h2 {
	border-bottom-color: #9E76FF;
}

/* Cards */
.first-card {
    margin-top: 50px;
}
section.card .accordion .card {
	border: 1px solid #DDD !important;
}
section.card .accordion .card-header .btn {
	font-size: 1rem !important;
}
section.card .table th, section.card .table td {
	/*padding: 0.5rem;*/
}

/* Isotope display */
.media-gallery .mg-files .thumbnail .mg-title {
	line-height: 1.2em;
	height: 2.5em;
	overflow: hidden;
}

/* Buttons */
button:disabled {
    cursor: not-allowed;
}

body .btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #9E76FF;
	border-color: #9E76FF;
}

body .btn-primary:hover {
	border-color: #a680ff !important;
	background-color: #a680ff;
}

body .btn-primary:active,
body .btn-primary:focus {
	border-color: #9466ff !important;
	background-color: #9466ff;
}

body .btn-primary[disabled] {
	border-color: #a680ff !important;
	background-color: #a680ff;
}

body .btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #47a447;
	border-color: #47a447;
}

body .btn-success:hover {
	border-color: #51b451 !important;
	background-color: #51b451;
}

body .btn-success:active,
body .btn-success:focus {
	border-color: #3f923f !important;
	background-color: #3f923f;
}

body .btn-success[disabled] {
	border-color: #86cb86 !important;
	background-color: #86cb86;
}

body .btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #ed9c28;
	border-color: #ed9c28;
}

body .btn-warning:hover {
	border-color: #efa740 !important;
	background-color: #efa740;
}

body .btn-warning:active,
body .btn-warning:focus {
	border-color: #e89113 !important;
	background-color: #e89113;
}

body .btn-warning[disabled] {
	border-color: #ee9d2b !important;
    background-color: #ee9d2b;
    color: #ffffff;
}

body .btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #d2322d;
	border-color: #d2322d;
}

body .btn-danger:hover {
	border-color: #d64742 !important;
	background-color: #d64742;
}

body .btn-danger:active,
body .btn-danger:focus {
	border-color: #bd2d29 !important;
	background-color: #bd2d29;
}

body .btn-danger[disabled] {
	border-color: #e48481 !important;
	background-color: #e48481;
}

body .btn-info {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #54afcc;
	border-color: #54afcc;
}

body .btn-info:hover {
	border-color: #54afcc;
	background-color: #5bc0de;
}

body .btn-info:active,
body .btn-info:focus {
	border-color: #46b8da !important;
	background-color: #46b8da;
}

body .btn-info[disabled] {
	border-color: #b0e1ef !important;
	background-color: #b0e1ef;
}

body .btn-dark {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #171717;
	border-color: #171717;
}

body .btn-dark:hover {
	border-color: #242424 !important;
	background-color: #242424;
}

body .btn-dark:active,
body .btn-dark:focus {
	border-color: #0a0a0a !important;
	background-color: #0a0a0a;
}

body .btn-dark[disabled] {
	border-color: #4a4a4a !important;
	background-color: #4a4a4a;
}
i.fixiconheight {
	font-size: 1.3rem;
}

/* Tables */
table tbody tr td.maincol {
	width: auto;
	min-width: 40%;
	font-size: 14px;
	color: #4d3e3d;
}

/* Only menu icon visible on smaller screens */
@media (max-width: 768px) {
	.menu-button-text {
    	display: none;
    }
}

/* Making a column sticky using fixed position */
@media only screen and (min-width: 1025px) {
	div.stickycard-4 {
		position: fixed;
		top: 184px;
		right: 25px;
		padding-left: 56px;
		max-height: 80%;
		overflow: auto;
	}
}
@supports (-webkit-overflow-scrolling: touch) and (min-width: 1025px) {
	div.stickycard-4 {
		top: 84px;
	}
}
@supports (-webkit-overflow-scrolling: touch) and (min-device-width: 1025px) {
	div.stickycard-4 {
		position: fixed;
		top: 84px;
		right: 25px;
		padding-left: 56px;
		max-height: 80%;
		overflow: auto;
	}
}

/* Sticky Table columns */
.view {
  margin: auto;
  width: 600px;
}

.wrapper {
  position: relative;
  overflow: auto;
/*  border: 1px solid black;*/
  white-space: nowrap;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white;
}

.first-col {
  width: 150px;
  min-width: 130px;
  max-width: 150px;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 100px;
}