body {
	margin: 0;
	padding-top: 0px;
	padding-left: 4px;
}

body.MSIEMobile6 {
	font-size: 0.85em;
}
input {
    font-size:0.9em
}

.content input[type=checkbox] {
  /* Default settings for input boxes */
  height: 25px;
  width: 20px;
}

body.MSIEMobile6 input {
	font-size: 0.85em;
}

#header {
	display: none;
}

.menu-spacer {
     height: 2px;   
}

#footer {
	display: none;
}

#page #title {
	margin-bottom: 5px;
	padding-bottom: 2px;
	border-bottom: 1px solid #ccc;
}

#page #title h1 {
	font-size: 1.3em;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

body.MSIEMobile6 #page #title h1 {
	font-size: 1.1em;
}

p.explanation {
	margin-top: 0;
	margin-bottom: 1em;
	padding: 0;
}

input.icon[type="image"] {
	width: 40px;
	height: 40px;
	margin-left: 12px;
}

ul.notifications {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.notifications li {
	margin-bottom: 0.6em;
	padding: 0.3em 1.5em;
}

ul.notifications li:last-child {
	margin-bottom: 2em;
}

ul.notifications li.error {
	background: #ffa0a0;
	border: 1px solid red;
}

ul.notifications li.warning {
	background: #ffff80;
	border: 1px solid #ff8040;
}

ul.notifications li.info {
	background: #40ff40;
	border: 1px solid #00ff00;
}


.dialog {
	margin-top: 0;
	margin-bottom: 1.5em;
	border: 2px solid #ccc;
}

.dialog .head {
	background: #ddd;
	padding: 3px 8px;
}

.dialog .head h3 {
	margin: 0;
	font-size: 1em;
	font-weight: bold;
}


.dialog .body {
	padding: 8px 4px 8px 8px;
	background: #eee;
}


/** Forms */
input.button.icon, input.button {
	margin-left: 12px;
	margin-bottom: 8px;
}

input.button.icon.alignToOthers {
    position: relative;
    top: 20px;
}

.menu-comp {
	display: block;
}

.menu-comp .comp {
	display: inline-block;
	vertical-align: top;
}

form {
	margin: 0;
}

select {
	padding-top: 1px;
	padding-bottom: 1px;
}

.form .component {
	clear: both;
	padding-bottom:4px;
}

body.NotMSIEMobile6 .form .component .label {
	padding-top: 2px;
	width: 100px;
	float: left;
}

.form .component .content {
	padding-top: 2px;
	padding-left: 1em;
	float: left;
}


.form .after-last-component {
	clear: both;
}

.form .button-bar {
	margin-top: 4px;
	margin-bottom: 4px;
}

.form .button-bar button {
	margin-right: 4px;
}

.form-grid .handheld-button {
	clear: both;
	padding-top: 16px;
	display: flex;
}

.form-grid .component.hidden {
	display: none;
}

/** Notifications */

.notifications .notification-msg {
    font-weight: bold;
	padding:.5rem .5rem .5rem 3rem;
	border-radius:4px;
	display: block;
	position: relative;	
	width:calc(100% - 4px);
	color:#232323;
}

.notifications .notification-msg:after {
	content: "";
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 24px;
    height: 24px;
    transition: .3s ease;
    transform: initial;
	background-repeat: no-repeat;
}

.error .notification-msg {
	border:2px solid #FF0000;
	background-color: #F7BCBC;
}

.error .notification-msg:after {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 12C24 18.64 18.64 24 12 24C5.36 24 0 18.64 0 12C0 5.36 5.36 0 12 0C18.64 0 24 5.36 24 12ZM10.4 5.68L11.12 13.2C11.2 13.52 11.28 14.16 11.92 14.16H12.16C12.8 14.16 12.96 13.52 13.04 13.12L13.6 5.76C13.68 5.2 13.6 4.8 13.36 4.48C13.12 4.16 12.72 4 12.32 4H11.76C11.28 4 10.96 4.16 10.72 4.4C10.4 4.72 10.32 5.2 10.4 5.68ZM13.68 18.16C13.68 17.2 13.12 16.64 12.16 16.64H11.84C10.88 16.64 10.32 17.2 10.32 18.16V18.4C10.32 19.36 10.88 19.92 11.84 19.92H12.16C13.12 19.92 13.68 19.36 13.68 18.4V18.16Z' fill='%23232323'/%3E%3C/svg%3E%0A");
}

.warning .notification-msg {
    border:2px solid #FFBF00;
	background-color: #FFEEB3;
}

.warning .notification-msg:after {
	background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0909 12.067C12.0909 12.6695 11.6025 13.1579 11 13.1579C10.3975 13.1579 9.90909 12.6695 9.90909 12.067V9.19617C9.90909 8.59368 10.3975 8.10526 11 8.10526C11.6025 8.10526 12.0909 8.59368 12.0909 9.19617V12.067ZM12.0909 17.1196C12.0909 17.7221 11.6025 18.2105 11 18.2105C10.3975 18.2105 9.90909 17.7221 9.90909 17.1196V16.7751C9.90909 16.1726 10.3975 15.6842 11 15.6842C11.6025 15.6842 12.0909 16.1726 12.0909 16.7751V17.1196ZM0.447213 19.1056C-0.217688 20.4354 0.749304 22 2.23607 22H19.7639C21.2507 22 22.2177 20.4354 21.5528 19.1056L12.7889 1.57771C12.0518 0.103611 9.94819 0.103611 9.21115 1.57771L0.447213 19.1056Z' fill='%23232323'/%3E%3C/svg%3E%0A");
}

.info .notification-msg {
    border:2px solid #33CC33;
	background-color:#BCF1CE;
}

.info .notification-msg:after {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23232323'/%3E%3Cpath d='M11.0005 19V8.80753H13.0005V19H11.0005ZM11.0005 7.05997V5H13.0005V7.05997H11.0005Z' fill='%23BCF1CE'/%3E%3C/svg%3E%0A");
}

.notifications.notify {
   background: #378ADF;
   border-radius: 4px
}
    
.notify .notification-msg {
   background: url(../images/notifications/timer_icon.svg) no-repeat transparent;
   background-position: 8px 50%;
   vertical-align:middle;
   padding-left:50px;
   padding-top:11px;
   padding-bottom:11px;
   color: white;
}

.handHeldMenu {
	vertical-align: middle;
}

div.table {
	margin-top: 4px;
	margin-bottom: 4px;
	float: left;
}

div.table {
	margin-top: 4px;
	margin-bottom: 4px;
	float: left;
}

table.table {
	border-collapse: collapse;}
	
td.data {
	empty-cells: show;}

	

.handHeldMenu { 
	margin-top: 4px;
}

.hh-waerlinx-logo {
	background-image: url('../images/header_icons/WaerLinxlogo.gif');
	width: 201px;
	height: 48px;
}

.test-logo {
	position: absolute;
	width: 147px;
	height: 41px;
	left: 205px;
	top: 3px;
}

.hh-waerlinx-logo-wrapper {
    background: url(../images/header_pattern.jpg) 0 0 repeat transparent;    
}

.welcome-text h1 {
	font-size: 18px;
}

body.MSIEMobile6 .welcome-text h1 {
	font-size: 14px;
}

div.part-thumb {
	width: 70px;
	height: 70px;
}

div.part-thumb img { 
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin-left: auto;
    margin-right: auto
}

span.label {
	display: block;
	font-weight: 400;
}
div.inline-flex {
	display: inline-flex;
}
div.details {
	padding-right:24px;	
}
div.align-center {
	display: flex;
    align-items: center;
    margin-bottom:5px;
}
.icon-button.btn-transparent {
	border:none;
	background-color: white;
    margin-left: 4px;
}
span.username-text {
	margin-left:4px;
	margin-top:4px;
}
div.dropdown-menu-right {
	background-color: white;
}

#cboxLoadedContent img {
	/* Go bigger than we need and it solves the colorbox processing before image available issue */
	max-width: 100%;
	max-height: 100%;
}

#cboxOverlay {
	background: #333;
}

.alertNotification {
	background-color: #fff;
    border-radius: 0.25em;
	-moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    min-width: 200px;
    min-height: 80px;
	padding: 20px;
}

.alertNotificationBody {
	clear: both;
	color: #000;
	font-size: 20px;
	font-family: Arial,Helvetica,Sans-serif;
}

#colorboxClose {
	bottom: 20px;
	position: absolute;
	right: 20px;
}

.signature-input {
	margin-top: 5px;
	margin-right: 5px;
	border-style: solid;
	border-width: 2px;
}

#view-switch {
	text-align: center;
	margin-top:5px;
}

@font-face {
  font-family: calibriFont;
  src: url(calibriFont.woff);
  font-weight: bold;
}

@font-face {
  font-family: calibriFontTopTasks;
  src: url(calibriFont.woff);

}

.handHeldBadge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: 50%!important;
    background-color: rgb(220, 53, 69);
    color: #fff;
}
.handheldTopContainer {
	@include container-fluid; 
	overflow: auto; 
	margin: 0 auto;
}

.bsTopNewTasksA{
	font-size: 180%;
	font-family: calibriFontTopTasks;
	
}
.bsTopNewTasksB{
	font-size: 140%;
	font-family: calibriFontTopTasks;
	
}
.topLogo{
	@include img-fluid center-block;
	align: center; 
	max-width: 90%; 
	max-height: 30%; 
	display: block; 
	margin-left: auto; 
	margin-right: auto;'
}

.tileText{
	display: flex; 
	justify-content: center; 
	text-align: center;
	vertical-align: middle;
	width: 100% !important;
	align-items: center;
	font-family: calibriFont;
}

.userNameText{
	display: flex; 
	justify-content: center; 
	text-align: center;
	vertical-align: middle;
	align-items: center;
	font-family: calibriFont;
	color: black;
 	background: linear-gradient(90deg, rgba(216,216,216,1) 0%, rgba(251,251,251,1) 51%, rgba(251,251,251,1) 100%); 
}

.topUserTasksTitle{
	display: flex; 
	justify-content: center; 
	text-align: center;
	vertical-align: middle;
	align-items: center;
	color: black;
	font-weight: bold;
}


.theTile{
	display: flex; 
	justify-content: center; 
	align-items: center; 
	vertical-align: middle; 
	height: 90% !important;
	background: rgba(255, 255, 255, 0.7)!important
}

.tileCell{
	display: flex; 
	justify-content: center; 
	align-items: center; 
	vertical-align: middle; 
	background: rgba(211, 211, 211, 0.3)!important
}

.theHandHeldBody{
	
}

.mainContainer {
	@include container-fluid;
	overflow: auto; 
	margin: 0 auto;
	background-image: url(/theme/logos/handHeldBackground.png);
	background-size: contain;
}

.switch-text {
	text-align: center;
	margin-bottom: 15px;
	padding-left: 5px;
	display: inline-block;
	height: 30px;
	vertical-align: middle;
}

#app-view-switch-desktop {
   content:url(../images/desktop.png);
}

input[type="submit"].icon.hiddenButton, a.icon.hiddenButton, input[type="button"].icon.hiddenButton, .hiddenButton, button[type=button].hiddenButton, input[type=button].hiddenButton, input[type=submit].hiddenButton, a.form_button.hiddenButton, input.hidden {
    display: none;
}
/****************OVERRIDE CHECKBOX TEXT LEFT********/
/* .checkBoxContainer {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkBoxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkboxCheckmark {
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 2px solid #2B71B9;
}

.checkBoxContainer:hover input ~ .checkboxCheckmark {
  background-color: #ccc;
}

.checkBoxContainer input:checked ~ .checkboxCheckmark {
  background-color: #378ADF;
}

.checkboxCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkBoxContainer input:checked ~ .checkboxCheckmark:after {
  display: block;
}

.checkBoxContainer .checkboxCheckmark:after {
  left: 7px;
  top: 2px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
 */
 /***************************************************/
 /****************OVERRIDE CHECKBOX TEXT RIGHT********/
 .checkBoxContainer {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkBoxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkboxCheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border: 2px solid #2B71B9;
}

.checkBoxContainer:hover input ~ .checkboxCheckmark {
  background-color: #ccc;
}

.checkBoxContainer input:checked ~ .checkboxCheckmark {
  background-color: #378ADF;
}

.checkboxCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkBoxContainer input:checked ~ .checkboxCheckmark:after {
  display: block;
}

.checkBoxContainer .checkboxCheckmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
 /***************************************************/
/****************OVERRIDE RadioButton***************/
.radioButtonContainer {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radioButtonContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radioButtonCheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
  border: 2px solid #2B71B9;
}

.radioButtonContainer:hover input ~ .radioButtonCheckmark {
  background-color: #ccc;
}

.radioButtonContainer input:checked ~ .radioButtonCheckmark {
  background-color: #2B71B9;
}

.radioButtonCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radioButtonContainer input:checked ~ .radioButtonCheckmark:after {
  display: block;
}

.radioButtonContainer .radioButtonCheckmark:after {
 	top: 7px;
	left: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
/***************************************************/
/****************Hamburger Menu*********************
.navbar-header {
	float: none;
	background-color: white;
}

.navbar-toggle {
	display: block;
	background-color: white;
}

.navbar-collapse.collapse {
	display: none !important;
	background-color: white;
}

.navbar-nav {
	float: none !important;
	background-color: white;
}

.navbar-nav>li {
	float: none;
}

.navbar-collapse.collapse.in {
	display: block !important;
}

.navbar-inverse .navbar-toggle {
	border-color: white;
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: black;
}

.navbar-toggle {
	background-color: white;
}

.navbar-nav>.active>a {
	color: gray;
	background-color: white;
}

.nav-item>a:hover {
	color: red;
}
***************************************************/
.circleMenuButton {
	border: 1px solid #E5E5E5;
	background-color: #F4F4F4;
	width: 2em;
	height: 2em;
	position: relative;
	border-radius: 100%;
}

.circleMenuButton i {
	font-size: 1.2em;
	position: absolute;
	top: .33em;
	left: .34em;
}

/* .form .component .inputHandheldOrUV { */
/* 	padding-left: 1.5em */
/* } */

.content input[type=checkbox]:checked {
    color: #fff;
    border-color: #378adf;
    transition: background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    background-color: #378adf;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

.uvHandheldDatePicker::-webkit-inner-spin-button,
.uvHandheldDatePicker::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.uvHandheldDatePicker {
	-webkit-appearance: none;
	background: no-repeat 4px 4px url("data:image/svg+xml,%3Csvg width='25' height='29' viewBox='0 0 25 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.25893 16.3125C8.59375 16.3125 8.92857 16.0293 8.92857 15.6328V13.3672C8.92857 13.0273 8.59375 12.6875 8.25893 12.6875H6.02679C5.63616 12.6875 5.35714 13.0273 5.35714 13.3672V15.6328C5.35714 16.0293 5.63616 16.3125 6.02679 16.3125H8.25893ZM14.2857 15.6328V13.3672C14.2857 13.0273 13.9509 12.6875 13.6161 12.6875H11.3839C10.9933 12.6875 10.7143 13.0273 10.7143 13.3672V15.6328C10.7143 16.0293 10.9933 16.3125 11.3839 16.3125H13.6161C13.9509 16.3125 14.2857 16.0293 14.2857 15.6328ZM19.6429 15.6328V13.3672C19.6429 13.0273 19.308 12.6875 18.9732 12.6875H16.7411C16.3504 12.6875 16.0714 13.0273 16.0714 13.3672V15.6328C16.0714 16.0293 16.3504 16.3125 16.7411 16.3125H18.9732C19.308 16.3125 19.6429 16.0293 19.6429 15.6328ZM14.2857 21.0703V18.8047C14.2857 18.4648 13.9509 18.125 13.6161 18.125H11.3839C10.9933 18.125 10.7143 18.4648 10.7143 18.8047V21.0703C10.7143 21.4668 10.9933 21.75 11.3839 21.75H13.6161C13.9509 21.75 14.2857 21.4668 14.2857 21.0703ZM8.92857 21.0703V18.8047C8.92857 18.4648 8.59375 18.125 8.25893 18.125H6.02679C5.63616 18.125 5.35714 18.4648 5.35714 18.8047V21.0703C5.35714 21.4668 5.63616 21.75 6.02679 21.75H8.25893C8.59375 21.75 8.92857 21.4668 8.92857 21.0703ZM19.6429 21.0703V18.8047C19.6429 18.4648 19.308 18.125 18.9732 18.125H16.7411C16.3504 18.125 16.0714 18.4648 16.0714 18.8047V21.0703C16.0714 21.4668 16.3504 21.75 16.7411 21.75H18.9732C19.308 21.75 19.6429 21.4668 19.6429 21.0703ZM25 6.34375C25 4.87109 23.7723 3.625 22.3214 3.625H19.6429V0.679688C19.6429 0.339844 19.308 0 18.9732 0H16.7411C16.3504 0 16.0714 0.339844 16.0714 0.679688V3.625H8.92857V0.679688C8.92857 0.339844 8.59375 0 8.25893 0H6.02679C5.63616 0 5.35714 0.339844 5.35714 0.679688V3.625H2.67857C1.17187 3.625 0 4.87109 0 6.34375V26.2812C0 27.8105 1.17187 29 2.67857 29H22.3214C23.7723 29 25 27.8105 25 26.2812V6.34375ZM22.3214 25.9414C22.3214 26.168 22.154 26.2812 21.9866 26.2812H3.01339C2.79018 26.2812 2.67857 26.168 2.67857 25.9414V9.0625H22.3214V25.9414Z' fill='%231A1A1A'/%3E%3C/svg%3E%0A");
	background-size: 15px;
	padding-left: 24px;
}


.components.uvcomponents {
	margin-top: 4px;
}

button.multiSelect {
	width:125px;
	text-align:left !important;
	background-color:transparent;
	border-width:1px;
	border-radius:2px;
}

button.multiselect-option.dropdown-item span.form-check {
	display:flex;
	align-items:end;
}

button.multiselect-option.dropdown-item span.form-check label {
	padding-left:5px;
	font-size: 14px;
    font-weight: normal;
}

div.testTheme #waerHandHeldMainHeaderID {
	background-color: #d7ebff !important;
}

div.testTheme #waerHandHeldMainHeaderID .logo {
	position: relative;
	top: 10px;
	height: 15px !important;
}

div.testTheme #waerHandHeldMainHeaderID #handheld-logo p {
	position: relative;
	left: 6px;
	top: 6px;
	color: black;
	font-size: 16px;
}

div.testTheme #waerHandHeldMainHeaderID #handheld-logo {
	display: inline-flex;
}