/*Disable pinch zoom safari*/
*{touch-action: pan-x pan-y !important;}

a:hover.step-status{filter: brightness(75%);}

.step-started{color:var(--danger);}
.step-complete{color:var(--green);}
.step-overdue{color:var(--danger);}

.age-inactive{color:#000;}
.age-green{color:var(--green);}
.age-yellow{color:var(--yellow);}
.age-red{color:var(--red);}
.age-overdue{color:var(--red);font-weight:bold;}

select[data-isSaved="1"]:not(disabled),input[type="text"][data-isSaved="1"]:not(disabled),
input[type="number"][data-isSaved="1"]:not(disabled),input[type="date"][data-isSaved="1"]:not(disabled){background-image:url('/img/icons/saved.png');background-repeat:no-repeat;background-position:top 5px right 0;} 
select[data-isSaved="1"]:not(disabled){background-position:top 5px right 20px;}
input[type="number"][data-isSaved="1"]:not(disabled){background-position:top 5px right 35px;}
input[type="checkbox"][readonly],input[type="radio"][readonly],input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:.5;}
textarea.hiddenField{display:none;height:4em;width:100%;}
div.input-group div.multi-select-container{flex:1 1 auto;width:1%;min-width:0;}
div.multi-select-container{width:100%;}

/* Google Places API */

.pac-container{z-index:1051;opacity:.8;}

/* Jquery UI Autocomplete */

.ui-widget.ui-widget-content.ui-autocomplete{
  z-index: 1051;
}

/* Bootstrap tooltip */

.tooltip { 
	pointer-events: none;
}

.tooltip-inner {
  max-width: 600px;
}

/* Process Tracker */

#divProcessTracker{height:25px;display:flex;}
#divProcessTracker div span{height:100%;display:block;}

/* Form upload */

div.formUploadContainer div[data-formURL=""] .urlEmpty { display:inline-block; }
div.formUploadContainer div[data-formURL=""] .urlExists { display:none; }
div.formUploadContainer div[data-formURL]:not([data-formURL=""]) .urlEmpty { display:none; }
div.formUploadContainer div[data-formURL]:not([data-formURL=""]) .urlExists { display:inline-block; }


/* Popover */

.popover {max-width:400px;}


/* Used inline in VDP for log status, recon status, acct status */

select.form-control-discrete, input.form-control-discrete{width:130px;border-color:#FFF !important;cursor:pointer;padding:0;line-height:inherit;height:auto;display:inline-block;} 
select.form-control-discrete:hover, input.form-control-discrete{border-color:#111;}


/* VDP Picture gallery */

#divVehicleGalMain{height:100%;}
	#divVehicleGalMain #imgVehicleGalMain{height:100%;width:auto;}
#divVehicleGalThumbs{height:100%;display:flex;flex-wrap:wrap;align-items:flex-start;}

img.landscape{position:relative !important;height:100% !important;width:auto !important;}
img.portrait{position:relative !important;width:100% !important;height:auto !important;}

ul.swalMenu{list-style:none;text-align:left;}
ul.swalMenu li a{line-height:30px;padding:0 15px 0 15px;display:inline-block;width:150px;border-radius: .35rem;margin:0 0 0 20px;}
ul.swalMenu li a:hover{background-color:#f3f6f9;}


/* Picture upload / icons */

.defaultPicture,.activePicture{border:2px solid #1BC5BD !important;}
.notDefaultPicture,.inactivePicture{border:2px solid transparent !important;}

span.pictureIcon[draggable="true"]{cursor:move;}
span.pictureIcon{border-radius:15px;overflow:hidden;border:1px solid #EEE;display:inline-block;position:relative;background-size:100%;background-position:center;background-repeat:no-repeat;background-color:#DDD;text-align:left;aspect-ratio:1/1;}
span.pictureIcon *{user-select: none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;}
span.pictureIcon.empty span.pictureOptions, span.pictureIcon.empty img{display:none;}
span.pictureIcon-md{width:100px;}
span.pictureIcon-lg{width:150px;}
span.pictureIcon:not(.empty) span.pictureUploadContainer{display:none;}
span.pictureUploadContainer{height:100%;width:100%;cursor:pointer;display:block;background-color:transparent;}
span.pictureUploadContainer svg{height:100%;width:100%;display:none;}
span.pictureUploadContainer.uploading svg{display:inline;}
span.pictureUploadContainer.uploading label{display:none;}
span.pictureUploadContainer label{height:100%;width:100%;}
span.pictureUploadContainer label i{font-size:7rem !important;}

span.pictureIcon img.landscape{height:100%;width:auto;cursor:pointer;} 
span.pictureIcon img.portrait{height:auto;width:100%;cursor:pointer;}

span.pictureIcon span.pictureLabel{line-height:1.4rem;width:100%;position:absolute;vertical-align:middle;z-index:2;font-size:13px;
									bottom:20px;text-align:center;background-color:rgba(255,255,255,.8);border-top:1px solid #EEE;border-bottom:1px solid #EEE;pointer-events: none;}
span.pictureIcon span.pictureLabel:empty{display:none;}

span.pictureIcon span.pictureOptions{position:absolute;z-index:2;top:3px;right:3px;}
	span.pictureOptions a{display:inline-block;height:1.4rem;aspect-ratio:1/1;line-height:1.4rem;vertical-align:middle;text-align:center;font-weight:bold;border-radius:5px;color:#FFF;}
	span.pictureOptions a i{color:#FFF;}
	span.pictureOptions a.removePicture{background-color:var(--danger);}
	span.pictureOptions a.previewPicture{background-color:var(--primary);}
	span.pictureOptions a.locationPicture{background-color:var(--success);}

input[type="file"]{width: 0px;height: 0px;overflow: hidden;}

div.pictureOverlay{position:fixed;bottom:1%;left:1%;z-index:1051;min-height:1px;min-width:1px;max-width:33%;max-height:98%;background-color:#FFF;border-radius:15px;border:1px solid #000;overflow:hidden;}
div.pictureOverlay *{user-select: none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;}
div.pictureOverlay a.closePictureOverlay{height:1.4rem;line-height:1.4rem;width:1.4rem;position:absolute;vertical-align:middle;z-index:2;
								top:5px;right:5px;text-align:center;font-weight:bold;background-color:var(--danger);color:#FFF;border-radius:5px;}
div.pictureOverlay div.pictureScroll{overflow:hidden:height:100%;width:100%;}
div.pictureOverlay div.pictureScroll img{width:100%;}

/* Camera overlay */

#divCameraOverlayContainer{position:fixed;top:0;left:0;margin:0;padding:0;z-index:1051;background:#000;}
#divCameraOverlayContainer.closed{width:1px;height:1px;display:none;}
#divCameraOverlayContainer.open{width:100%;height:100%;display:block;}

#divRotateNotice{height:30%;width:90%;position:absolute;top:50%;left:50%;margin-top:-15%;margin-left:-45%;text-align:center;}

#divCameraOverlay{width:100%;height:100%;overflow:auto;}

	#divCameraOverlay #divControls{width:8%;height:100%;text-align:center;overflow:auto;}
		#divControls button{width:90%;}
		
	#divCameraOverlay #divCameraWrapper{position:relative;height:100%;aspect-ratio:4/3;flex-shrink:0;display:flex;align-items:center;justify-content:center;}

		#divCameraWrapper video, #divCameraWrapper canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
		#divCameraWrapper #divVehiclePictureDetails{position:absolute;bottom:20px;left:0;width:100%;background:rgba(255,255,255,.5);}
		#divCameraWrapper #divVehicleOverlay{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover;pointer-events:none;background-position:center;background-repeat:no-repeat;background-size:100%;}
		#divCameraWrapper #divAcceptPicture{position:absolute;bottom:20px;left:0;width:100%;background:rgba(255,255,255,.5);}
			
	#divCameraOverlay #divPictureAssignments{flex:1;display:flex;flex-direction:column;height:100%;text-align:center;}
		#divPictureAssignments .pictureTypes{width:100%;padding:5px;box-sizing:border-box;}
		#divPictureAssignments .pictureList{width:100%;flex:1;overflow-y:scroll;}	

@media screen and (orientation: portrait){
	#divCameraOverlay{display:none;}
	#divRotateNotice{display:block;}
}
@media screen and (orientation: landscape){
	#divCameraOverlay{display:flex;}
	#divRotateNotice{display:none;}
}

/* Inspection Tabs */
.inspectionItem{border-radius:10px;cursor:pointer;position:relative;}
.inspectionItem div:nth-child(1):before{content: "";display: inline-block;padding-top: 100%;}
.inspectionItem div:nth-child(1){overflow:hidden;background-size:80% auto;background-repeat:no-repeat;background-position:center;border:1px solid #000;}
.inspectionItem div:nth-child(2){height:30px;line-height:15px;width:100%;display:block;vertical-align:middle;margin-top:3px;text-overflow:ellipsis;overflow:hidden;}
.inspectionItem div:nth-child(3){height:25px;line-height:25px;width:25px;display:block;position:absolute;top:0;right:0;background-color:var(--danger);color:#FFF;border-radius:25px;}
.inspectionItem div:nth-child(3):empty{display:none;}

.col i, .col-2 i, .col-3 i, .col-4 i, .col-5 i, .col-6 i{line-height:1.5;font-size:13px !important;vertical-align:middle;}

.swal-xl{height:40vh;width:50vh;}
.swal-xl .swal2-html-container, .swal-xl .swal2-content{max-height:100%;max-width:100%;margin:0;padding:0;white-space:nowrap;}

/* Modal tweaks */

.modal-dialog{
	transition: opacity .25s ease-in-out !important;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.modal-xxl{
	max-width:95%;
}

#divModalHistory{
	height:60px;
	width:60px;
	z-index:1051;
	position:fixed;
	top:10px;
	left:10px;
	visibility:hidden;
}

#divModalHistory .dropdown-item{
	padding:.25rem .75rem !important;
}

/* datatables */

div.row.deleted div.col:not(.overrideDelete){text-decoration: line-through;}
table.dataTable tr th{white-space:nowrap;vertical-align:top !important;}
table.dataTable tr td.copy{cursor:grab;}
table.dataTable tr td.trunc{white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
table.dataTable tr td.trunc-100{max-width:100px;}
table.dataTable tr td.trunc-150{max-width:150px;}
table.dataTable tr td.trunc-200{max-width:200px;}
table.dataTable tr td.trunc-250{max-width:250px;}
table.dataTable.table-p-1 tr td{padding:1px;}
table.dataTable .selectedFixedColumn{z-index:2 !important;}

/* Report builder */

div#divReportColumns{user-select: none;max-height:300px;overflow-y:auto;overflow-x:hidden;text-align:justify;}
div.reportColumn span{cursor:grab;}

/* concatenate form control titles */

span.form-control{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}


/* Loading animation for bootstrap icons */
i.rotateAnim::before { animation:rotation 1s infinite linear; }
@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}

/* Modal height and conditional button icons/text for screen size */
.modal-height-full{height: auto;min-height: 100%;}
.modal-header .modal-header-actions  button img{display:none;}
@media screen and (max-width: 600px) {
	.modal{padding:0 !important;}
	
		.modal-header .modal-header-actions  button span{display:none;} 
		.modal-header .modal-header-actions  button i{display:inline;}
		.modal-header .modal-header-actions  button img{height:18px;width:auto;display:inline;filter: invert(100%);}
		
		.modal-dialog {
		  min-width: 100%;
		  min-height: 100%;
		  margin: 0;
		  padding: 0;
		}

		.modal-content {
					  height: auto;
					  min-height: 100%;
					  border-radius: 0;
					}
					
			.modal-body {
				padding: 0;
			}
			
				.modal-body .container-fluid .wizard{
					padding:0;
				}
}

/* Password strength tester */

.passtrengthMeter{
  position: relative;
}

.passtrengthMeter > input:focus {
    outline-width: 0;
}

.passtrengthMeter::after{
  content: '';
  height: 3px;
  overflow: hidden;
  width: 0%;
  transition: width .5s;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

.passtrengthMeter.weak::after{
  background-color: #EC644B;
  width: 25%;
}

.passtrengthMeter.medium::after{
  content: '';
  background-color: #E87E04;
  width: 50%;
}

.passtrengthMeter.strong::after{
  content: '';
  background-color: #EFBF17;
  width: 75%;
}

.passtrengthMeter.very-strong::after{
  content: '';
  background-color: #42A72A;
  width: 100%;
}

.passtrengthMeter .showPassword{
  position: absolute;
  width: 20px;
  top: calc(50% - 10px);
  right: 10px;
}

.passtrengthMeter .showPassword.active{
  opacity: .5;
}

.passtrengthMeter .showPassword img{
  display: block;
  width: 100%;
  height: auto;
}

.passtrengthMeter .showPassword:hover{
  cursor: pointer;
}

.passtrengthMeter .tooltip {
  background: #000000;
  top: 100%;
  color: #fff;
  font-family:Arial;
  font-size: 12px;
  display: block;
  left: 50%;
  margin-bottom: 15px;
  opacity: 0;
  padding: 5px 10px;
  pointer-events: none;
  position: absolute;
  min-width: 70px;
  box-sizing: border-box;
  text-align: center;
  z-index: 10;
  -webkit-transform: translateY(5px);
     -moz-transform: translateY(5px);
      -ms-transform: translateY(5px);
       -o-transform: translateY(5px);
          transform: translateY(5px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

.passtrengthMeter.weak .tooltip{
  background-color: #EC644B;
}
.passtrengthMeter.weak .tooltip:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #EC644B 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter.medium .tooltip{
  background-color: #E87E04;
}
.passtrengthMeter.medium .tooltip:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #E87E04 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter.strong .tooltip{
  background-color: #EFBF17;
}
.passtrengthMeter.strong .tooltip:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #EFBF17 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter.very-strong .tooltip{
  background-color: #42A72A;
}
.passtrengthMeter.very-strong .tooltip:after{
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #42A72A 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
}

.passtrengthMeter.weak .tooltip:before {
  top: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}

.passtrengthMeter .tooltip:after {
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-bottom: solid #000000 7px;
  top: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  width: 0;
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
}

.passtrengthMeter:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
}

.lte8 .passtrengthMeter .tooltip {
  display: none;
}

.lte8 .passtrengthMeter:hover .tooltip {
  display: block;
}