/*
 * Bijenmonitor app
 *
 * Assets
 *
 */

/* BETA */
body.beta nav.navbar-static-top, body.beta a.logo, body.beta.login-page,
body.beta.register-page{
	background-image: url('/img/icons/BETA.png');
	background-size: 40px;
}
/* BETA END */

a {
	cursor: pointer;
}

.input-group.date input{
	color: transparent;
	text-shadow: 0 0 0 #555;
}

fieldset .form-item, .tab-content .form-item{
	min-height: 70px;
}

.header-spacer{
	display: block;
	width: 100%;
	background-color: #F8B133;
	height: 20px;
}

.sidebar-menu > li.header {
	text-transform: uppercase;
}
.sidebar-menu a, .content-header h1 a, .inspection-actions a{
    cursor: pointer;
}

.box-header > .row.fa-plus:before, .box-header > .row.fa-minus:before{
    display: none;
}

.box-header > .row.fa-plus, .box-header > .row.fa-minus{
    cursor: pointer;
}
.box-header a.icon-button, .box-header .btn{
	position: relative;
	z-index: 3;
}
.box-header > .box-tools{
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	padding-top: 7px;
	padding-right: 10px;
	padding-left: 10px;
	z-index: 1;
	text-align: right;
}
	.box-header > .box-tools .btn-box-tool{
		position: relative;
		width: 100%;
		height: 100%;
		text-align: right;
		z-index: 2;
	}
	.box-header > .box-tools .btn-box-tool:focus {
		outline:0;
	}

.box-body{
	min-height: 100px;
}

#category-tree, #checklist-tree{
	height: 60vh;
	overflow: auto;
	border: 1px solid #AAA;
}

.jstree-default .jstree-clicked{
	background-color: #FDEDCF;
}

.dev-label{
	font-size: 8px;
	opacity: 0.3;
}
.arrows{
	display: inline-block;
	margin-left: 20px;
}

.rzslider{
	margin-bottom:38px;
	margin-top:16px;
}
	.rzslider .rz-pointer{
		background-color: #F29100;
	}
	.rzslider .rz-pointer.rz-active:after {
	    background-color: #FFF;
	}
	.rzslider .rz-bar {
		background-color: #CCC; /*#F8B133;*/
	}
	.rzslider .rz-tick{
		background-color: #F8B133;
	}
	.rzslider .rz-tick-value{
		display: none;
	}

/* Sensors */
.gauge{
	position: relative; 
	display: inline-block;
}
.gauge-icon{
	position: absolute; 
	top: 20px; 
	width: 100%; 
	text-align: center;
}

.gauge-icon.mobile{
		top:14px;
	}
	.gauge-icon.mobile .icn{
		width: 12px;
		height: 12px;
	}

.icn {
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: text-bottom;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.icon-button {
    padding-left: 10px;
    padding-right: 10px;
    color: #999;
}
	.icon-button.delete:hover{
		color: #D0021B;
	}
.icn.prev {
	background-image: url(/img/icn_arrow_left.svg);
	margin-right: 15px;
}
	.icn.prev.mobile {
		margin-right: 8px;
	}
.icn.next {
	background-image: url(/img/icn_arrow_right.svg);
	margin-left: 15px;
}
	.icn.next.mobile {
		margin-left: 8px;
	}

.icn.settigs, .icn.snr, .icn.rssi {
	background-image: url(/img/icn_settings.svg);
}
.icn.temperature, .icn.t, .icn.t_i {
	background-image:url(/img/icn_temp.svg);
}
.icn.humidity, .icn.h {
	background-image:url(/img/icn_rh.svg);
}
.icn.sound, .icn.s_tot  {
	background-image:url(/img/icn_sound.svg);
}
.icn.rainfall {
	background-image:url(/img/icn_rain.svg);
}
.icn.sun {
	background-image:url(/img/icn_sun.svg);
}
.icn.wind {
	background-image:url(/img/icn_wind.svg);
}
.icn.weight, .icn.weight_kg, .icn.weight_kg_corrected, .icn.weight_combined_kg, .icn.w_v {
	background-image:url(/img/icn_weight.svg);
}
.icn.flight_activity {
	background-image:url(/img/icn_vliegactiviteit.svg);
}
.icn.bee, .icn.sound_flying_adult, .icn.s_fly_a, .icn.bee_count_in, .icn.bee_count_out, .icn.bc_i, .icn.bc_o {
	background-image:url(/img/icn_bee.svg);
}
.icn.alert {
	background-image:url(/img/icn_alert.svg);
}
.icn.air_pressure, .icn.p, .icn.lat, .icn.lon {
	background-image:url(/img/icn_cloud.svg);
}
.icn.bat_volt, .icn.bv {
	background-image:url(/img/icn_bat.svg);
}
.icn.sound_fanning_4days, .icn.sound_fanning_6days, .icn.sound_fanning_9days, .icn.sound_total, .icn.s_fan_4, .icn.s_fan_6, .icn.s_fan_9 {
	background-image:url(/img/icn_sound.svg);
}
ul.sensor {
	list-style: none;
	margin: 0;
	padding: 0;
}
	ul.sensor li {
		display: inline-block;
		width: 200px;
		padding: 10px;
		background-color: #fff; 
		border-radius: 7px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}


/* Inspection form */
.inspection-item{
	display: inline-block;
	min-height: 85px;
}
.switch.wide {
  width: 124px;
}
.switch.wide.checked small {
  left: 94px;
}

.switch.medium {
  width: 94px;
}
.switch.medium.checked small {
  left: 64px;
}

.switch .off, .switch .on{
	top: auto;
	line-height: 30px;
}
.switch .switch-text {
	font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.switch.checked.red {
	background-color: #D0021B;
	border-color: #D0021B;
}
select[multiple] option:checked {
    background: #F8B133 linear-gradient(0deg, #F8B133 0%, #F8B133 100%);;
}
.star-rating {
  margin: 0;
  padding: 0;
  display: inline-block;
}
	.star-rating .star {
		padding: 1px;
		color: #ccc;
		font-size: 21px;
		list-style-type: none;
		display: inline-block;
		cursor: pointer;
	}
	.star.display{
		cursor: inherit;
	}
    .star.filled {
      color: #F8B133;
    }

  .star-rating.readonly .star.filled {
    color: #666;
  }

.smile-rating {
  margin: 0;
  padding: 0;
  display: inline-block;
}
	.smile-rating > .smile {
		color: #ccc;
		font-size: 16px;
		list-style-type: none;
		display: inline-block;
		cursor: pointer;
	}
	.smile-rating .smile .face{
		color: #333;
	}
    .smile.filled > i.fa-circle {
      color: #F8B133;
    }
    	.smile.filled > i.fa-circle.frown {
	      color: #D0021B;
	    }
	    .smile.filled > i.fa-circle.smile {
	      color: #7ED321;
	    }

.yes-no-rating {
  margin: 0;
  padding: 0;
  display: inline-block;
}
	.yes-no-rating .option {
		color: #333;
		font-size: 16px;
		list-style-type: none;
		display: inline-block;
		cursor: pointer;
	}
	.yes-no-rating .option p{
		margin: 0;
	    display: inline-block;
	    line-height: 29px;
	    margin-left: 5px;
	    margin-right: 10px;
	    vertical-align: top;
	}
	.yes-no-rating .option .face{
		color: #ccc;
	}
    .yes-no-rating .option.filled .face.yes {
      color: #7ED321;
    }
    .yes-no-rating .option.filled .face.no {
      color: #D0021B;
    }
    .yes-no-rating .option.filled .needs_attention.face.yes, .yes-no-rating .option.filled .colony_lost.face.yes, .yes_red .yes-no-rating .option.filled .face.yes{
      color: #D0021B;
    }
    .yes-no-rating .option.filled .needs_attention.face.no, .yes-no-rating .option.filled .colony_lost.face.no, .yes_red .yes-no-rating .option.filled .face.no{
      color: #7ED321;
    }


.option-block{
	min-width: 124px;
	display: inline-block;
}

/* Inspection list */

/* Add to Calender dropdown */
.btn-group {
  display: inline-block;
  position: relative;
  cursor: pointer; 
  border: none;
  border-radius: 7px;
  background: none;
  background-color: transparent;
}
	.btn-group:hover, .btn-group.active, .btn.active {
	  background: none;
	  background-color: transparent;
	  -webkit-box-shadow: none;

	}
	.btn-group .dropdown {
		position: absolute;
		list-style: none;
		left: 0;
		margin: 0;
		padding: 0;
		top: 0em;
		background-color: #fff;
		border: 1px solid #c0c0c0;
		box-sizing: border-box;
		width: 12em;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16), 0 3px 5px rgba(0, 0, 0, 0.23); 
	}
    .btn-group .dropdown > li {
      box-sizing: border-box;
      border-radius: 3px;
      padding: 0 0.75em; 
  }
      .btn-group .dropdown > li > a {
        color: #000;
        text-decoration: none; 
    }
      .btn-group .dropdown > li:hover {
        background-color: #e8e8e8; 
    }
	.btn-group > span {
	    vertical-align: middle;
	    padding: 2px; 
	    padding-left: 4px;
	    padding-right: 4px;
	}
	.btn-group > span[type="button"] {
		-webkit-appearance: inherit;

	}
		.btn-group.mobile > span[type="button"] {
			font-size: 10px;
		}



.inspection-actions{
	display: block;
	min-width: 67px;
}
.inspection-icon{
	display: inline-block;
	width: 24px;
	height: 24px;
	line-height: 20px;
	background-color: #AAA;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: top;
	border: 2px solid #333;
	border-radius: 50%;
	font-size: 10px;
}
	.inspection-icon.yes,
	.inspection-icon.no.needs_attention, 
	.inspection-icon.no.colony_lost{
		background-color: #7ED321; /*green*/
		color: #333;
	}
	.inspection-icon.no, 
	.inspection-icon.yes.needs_attention, 
	.inspection-icon.yes.colony_lost{
		background-color: #D0021B; /*red*/
		color: #fff;
	}



/* General */
.iscroll-wrapper {
	height: 100%;
}
.header-title{
	display: inline-block;
    line-height: 50px;
    font-size: x-large;
    padding-left: 33%;
}
	.header-title.mobile{
		max-width: 49vw;
		max-height: 50px;
		overflow: hidden;
	}

.main-sidebar.mobile{
	padding-top: 54px;
}

.box{
    overflow: hidden;
    height: auto; 
    width: 100%;
}

textarea {
    resize: none;
}
.angular-color-picker{
	background: none;
	border: none;
	padding: 0;
}
	.angular-color-picker > ._hues > ._cursor{
		left: -1px;
		width: 29px;
		border-left-color: #000;
		border-right-color: #000;
	}

.color-hive{
	display: inline-block; 
	margin-right: 20px;
	vertical-align: top;
}
.queen-icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image:url(/img/icn_bee.svg);
	background-color: white;
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	border: 2px solid #333;
	border-radius: 50%;
	vertical-align: top;
	margin-right: 20px; 
	margin-bottom: 20px; 
}

/* Create new location form */
.color-result {
	display:block;
	height:60px;
	width:100%;
	pointer-events:none;
	border-radius: 4px;
}
input.rn-stepper{
	padding-top: 0px;
	text-align: center;
	height: 34px;
	border: none;
	border-top: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	width: 60px;
}
.btn-primary.rn-stepper{
	height: 34px;
	width: 34px;
	line-height: 17px;
	padding: 0;
	padding-top: 6px;
}
.btn-primary.rn-stepper.left{
	border-bottom-right-radius: 0; 
	border-top-right-radius: 0; 
	font-size: 30px;
}
.btn-primary.rn-stepper.right{
	border-bottom-left-radius: 0; 
	border-top-left-radius: 0; 
	font-size: 24px;
	padding-top: 8px;
}

.table-striped>tbody>tr.delete{
	background-color: rgba(255,0,0,0.2);
}

.group-color{
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #333;
}
.group-title{
	display: inline-block;
	margin-left: 10px;
	max-width: 80%;
	max-height: 60px;
	vertical-align: top;
}

dl.hive-select{
	margin-bottom: 5px;
}

/* Hive */
.hives-container{
	position: relative;
	text-align: center;
	text-align: -webkit-center;
    display: flex;
	-webkit-display:-webkit-flex;
	-webkit-justify-content:space-around;
	justify-content:space-around;
	flex-direction: row;
	-webkit-flex-direction: row; 
	align-items: flex-end;
	-webkit-flex-align-items: flex-end;
	flex-wrap: wrap;
	margin: 5px;
}

.hives-container.selection{
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
}


.hive-container{
	position: relative;
	margin-right: 5px;
	text-align: center;
	text-align: -webkit-center;
	vertical-align: bottom;
	display: inline-block;
    float: none;
}
	.hive-container.small p.title{
		max-width: 60px;
		line-height: 10px;
		margin-bottom: 2px;
		height: 22px;
		overflow: hidden;
		color: #000;
	}
		.hive-container.small > p.title.selected{
			font-weight: bold;
		}

		.hive-container.small .select-icon{
			position: absolute;
			top: -10px;
			right: 0px;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			border: 2px solid #000;
			background-color: #fff;
			color: #000;
		}

			.hive-container.small .select-icon i{
				font-size: 18px;
				margin-top: 3px;
			}

.hive{
	text-align: center;
	text-align: -webkit-center;
	max-width: 270px;
	overflow: hidden;
}

.hive.mobile{
	text-align: left;
}

	.hive-name-mobile{
		white-space: normal;
		margin-bottom: 0px;
	}

	.hive > .title{
		width: 100%;
		padding-left: 12%;
		padding-right: 12%;
	}

		.hive > .title.hiveview{
			margin-bottom: 0;
		}

	.hive > .queen-icon {
		position: absolute;
		top: 10px;
		right: 20px;
		width: 20px;
		height: 20px;
		background-size: 12px;
		border-radius: 3px;
	}

	.hive > .info{
		position: relative;
		width: 90%;
		height: 24px;
		text-align: center;
		text-align: -webkit-center;
	    display: flex;
		-webkit-display:-webkit-flex;
		-webkit-justify-content:space-around;
		justify-content:space-around;
		flex-direction: row;
		-webkit-flex-direction: row; 
		align-items: flex-end;
		-webkit-flex-align-items: flex-end;
		flex-wrap: wrap;
		margin-bottom: 5px;
		max-width: 140px;
		overflow: hidden;
		color: #333;
	}

	.hive.mobile > .info {
		-webkit-justify-content:space-between;
		justify-content:space-between;
	}

		.hive > .info > * {
			position: relative;
			display: inline-block; 
			width: 24px; 
			height: 24px; 
			margin:0; 
			border-radius: 50%;
			border: 2px solid #333;
			text-align: center;
			line-height: 20px;
			overflow: hidden;
		}

		.hive > .info > a{
			color: #333;
		}

			.hive > .info > .attention-icon {
				background-color: #D0021B;
				color: #fff;
				font-size: 16px;
				font-weight: bold;
			}
			.hive > .info > .queen-icon {
				background-size: 12px;
			}
			.hive > .info > .impression-icon {
				background-color: #F8B133; 
			}
				.hive > .info > .impression-icon.frown {
					background-color: #D0021B; 
				}
				.hive > .info > .impression-icon.smile {
					background-color: #7ED321; 
				}
				.hive > .info > .impression-icon i {
					position: absolute;
				    top: -4px;
				    left: -2px;
				}
			.hive > .info > .sensor-icon {
				background-color: #FFF; 
			}
				.hive > .info > a.sensor-icon i {
					position: absolute;
				    top: 3px;
				    left: 6px;
				}

		

	p.notes, span.notes{
		display: block;
		line-height: 1.1em;
		font-size: 80%;
	    overflow: hidden; 
	    text-overflow: ellipsis;
	    max-height: 37px;
	    margin-bottom: 5px;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		font-style: italic;
	}
	.hive > p.notes{
	    max-width: 60%;
	}

		.hive.mobile > p.notes, span.notes{
			max-height: 24px;
			max-width: 100%;
			-webkit-line-clamp: 2;
		}

		p.notes.reminder-date, span.notes.reminder-date{
			font-weight: bold;
			font-style: normal;
		}

		p.notes.location, span.notes.location{
			font-style: normal;
			margin-bottom: 10px;
		}
		p.notes.location.mobile, span.notes.location.mobile{
			margin-bottom: 8px;
		}


	.hive.left{
		text-align: left;
	}
	.hive .lid{
		background-color: SaddleBrown; 
		display: block; 
		width: 100%; 
		height: 10px; 
		padding:0; 
		margin:0; 
		border-radius: 2px;
		border: 1px solid #333;
	}
	.hive .layer {
		background-color: #F8B133; 
		color: #fff;
		display: flex;
		-webkit-display:-webkit-flex;
		-webkit-justify-content:space-around;
		justify-content:space-around;
		flex-direction: row;
		-webkit-flex-direction: row; 
		width: 100%; 
		height: 28px; 
		padding:1px;
		margin:0; 
		margin-bottom:-1px;
		border-radius: 4px;
		text-align: center;
		border: 1px solid #333;
		overflow: hidden;

	}
		.hive .layer.brood{
			height: 40px; 
			padding-top: 0px;
		}
			.hive .layer > .frame{
				display: inline-block;
				/*background-color: rgba(255,255,255,0.5);*/
				border: 1px solid rgba(0,0,0,0.2);
				width: 8px;
				height: 80%;
				margin-top: 2%;
				border-radius: 1px;
			}
			.hive .layer > .frame.brood{
				margin-top: 3%;
			}

	.hive .bottom{
		background-color: black; 
		display: block; 
		width: 100%; 
		height: 6px; 
		padding:0; 
		margin:0; 
		margin-bottom: 5px;
		border-radius: 2px;
		border: 1px solid #333;
	}

.hive.new{
	position: relative;
	width: 140px;
}
	.hive.new .lid, .hive.new .layer, .hive.new .bottom{
		background-color: #EEE; 
		border: 1px solid #FFF;
	}
	.hive.new .bottom{
		margin-top: 1px;
	}

	.hive.new .icon{
		position: absolute;
		left: 50%;
		top: 50%;
    	transform: translate(-50%, -50%);
    	color: #CCC;
	}

.hive.small{
	max-width: 90px;
	width: 50px;
}
	.hive.small.left{
		text-align: left;
	}
	.hive.small .lid{
		height: 3px; 
		border-radius: 1px;
	}
	.hive.small .layer {
		height: 8px; 
		border-radius: 2px;
	}
		.hive.small .layer.brood{
			height: 16px; 
		}
			.hive.small .layer > span{
				line-height: 8px;
			}
			.hive.small .layer > span.brood{
				line-height: 16px;
			}

	.hive.small .bottom{
		height: 2px; 
	}


.nalert{
	height: auto !important;
	min-height: 160px;!important;
}
.nalert .nalert--message{
	height: auto !important;
}

/* Research related */
.icon-line{
	display: block;
	border: 1px solid #333;
	border-radius: 10px;
	padding: 10px;
	padding-top: 0px;
	margin-bottom: 10px;
}

.image-icon {
	display: inline-block;
	width: 80px;
	height: 80px;
	overflow: hidden;
	background-color: grey;
	border: 1px solid #333;
	border-radius: 10%;
	vertical-align: top;
	margin-right: 10px; 
}

a.delete-no-consent{
    color: #D00220; 
    padding: 0px; 
    width: 20px; 
    height: 20px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 16px;
}
	a:hover.delete-no-consent{
		color: white;
		background-color: #D00220; 
	    border-radius: 50%; 
	    border: 1px solid #333;
	}

dt a i.fa {
	margin-left: 10px;
	color: #999;
}
	dt a:hover i.fa {
		color: #000;
	}

/* Table items */
.table-responsive{
    border:none;
}
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td{
        white-space: inherit !important;
    }
	.trh{
		background-color: #FFEDC7 !important;
		width: 200px;
	}
	.tdr{
		text-align: right;
		white-space: inherit;
		width: 200px;
	}
	.tdc{
		text-align: center;
		white-space: inherit !important;
		max-width: 200px;
	}
		
	.label-block{
		display: block;
	}
	.ancestors{
		display: block;
		font-size: 10px;
	}
	span.notes.mobile{
		font-size: 10px;
	}
	td.header, span.header{
		background-color: #FFEDC7;
		font-weight: bold;
		height: 12px;
		line-height: 12px;
	}

.table-responsive.inspections{
	margin-bottom: 0;
}

.table.inspections thead{
	display: block;
	overflow: visible;
}
	.table.inspections .tdr{
		min-width: 200px;
		max-width: 200px;
	}
	.table.inspections.mobile .tdr{
		min-width: 150px;
		max-width: 150px;
	}
.table.inspections tbody{
	display: block;
	min-height: 350px;
	max-height: calc(100vh - 225px);
	overflow-y: scroll;
	overflow-x: visible;
}
	.table.inspections .tdc{
		min-width: 200px;
		max-width: 200px;
	}
	.table.inspections.mobile .tdc{
		min-width: 100px;
		max-width: 100px;
	}
	table.inspections th.tdc{
		vertical-align: bottom;
	}
	.table.inspections .filler
	{
		width: 100%;
	}

/* Research */
.table-header-rotated {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
.table-header-rotated td {
  width: 30px;
  height: 45px;
}
.table-header-rotated td {
  text-align: center;
  padding: 10px 5px;
  border: 1px solid #ccc;
}
.table-header-rotated th.rotate {
  height: 100px;
  white-space: nowrap;
}
.table-header-rotated th.rotate > div {
  -webkit-transform: translate(25px, 0px) rotate(315deg);
          transform: translate(25px, 0px) rotate(315deg);
  width: 30px;
}
.table-header-rotated th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}
.table-header-rotated th.row-header {
  width: 236px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #999;
  vertical-align: middle;
}
	.table-header-rotated th.row-header > span {
		padding: 0 5px;
		vertical-align: middle;
	}
		.table-header-rotated th.row-header > span > i {
			margin-right: 10px;
		    width: 30px;
		    text-align: center;
		    vertical-align: middle;
		}

/* Mobile */
@media (max-width: 400px) {
	.header-title {
	    padding-left: 0;
	}
	.switch.wide {
	  width: 100px;
	}
	.switch.wide.checked small {
	  left: 70px;
	}
	input.rn-stepper{
		width: 39px;
	}
	.gauge-icon{
		top:14px;
	}
	.gauge-icon .icn{
		width: 12px;
		height: 12px;
	}
	.inspection-item{
		min-height: 66px;
	}
	ul,ol {
		padding-inline-start: 20px;
	}
}

/* Large screens */
@media (min-width: 1400px){
.col-xl-2 {
    width: 16.666%;
}
@media (min-width: 1600px){
.col-xl-1 {
    width: 8.333%;
}