* { font-family: 'Quicksand', sans-serif; }
body { padding: 0; background-color: #f2f2f2; }
h1 { font-weight: bold;font-size:23px; }
h2 { font-weight: bold;font-size:19px; }
a, a:hover { color: #eb0c30; }
html {scroll-behavior: smooth;}
.redflag {
	width:14px;
	height:14px;
	margin: 1px;
	background-color:#a00;
	line-height:14px;
	text-align:center;
	color:white;
	font-weight:bold;
	font-size:12px;
	display:inline-block;
}

.btn-success {
    background-color: #57a900;
    background-image: -moz-linear-gradient(top, #70d900, #57a900);
    background-image: -ms-linear-gradient(top, #70d900, #57a900);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#70d900), to(#57a900));
    background-image: -webkit-linear-gradient(top, #70d900, #57a900);
    background-image: -o-linear-gradient(top, #70d900, #57a900);
    background-image: linear-gradient(top, #70d900, #57a900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d900', endColorstr='#57a900', GradientType=0);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] { background-color: #57a900; }
.btn-spacing { margin: 30px 0; }
.small-btn { background-color: #444; color:white; padding:3px 8px; display:inline-block; text-decoration:none; border-radius: 5px; cursor:pointer; }
.small-btn:hover, .small-btn:active, .small-btn:visited, .small-btn:focus { color:white; text-decoration:none; }
.small-btn.fw { width:150px; margin:2px 5px; }
.btn-disabled{ background-color: #aaa; border:2px solid #999; pointer-events: none;}

div.error {
	width:280px;
	margin: 20px 0;
	padding:10px 20px;
	border: 1px solid #a00;
	color: black;
	font-weight:bold;
}

form.inline input { display:inline; }
form.inline select { display:inline; }

span.badge-green { background-color: #080; }
span.badge-red { background-color: #a00; }
.pointer { cursor:pointer; }
.nobreak { white-space: nowrap; }

.green { color: #eb0c30; }
.grey { color: #aaa; }
.red { color: #a00; }
.faulty { background-color: #ddd; color: #a00; font-weight: bold; }
.small-btn.black { background-color: black !important; }
.small-btn.red { background-color: #a00 !important; color: white !important; }

span.small-btn.disabled {
	background-color: #aaa;
    margin-right: 10px;
}

a.small-btn.disabled { background-color: #ccc; }

select.dd { padding: 4px 10px; border:none; border-radius:10px; background-color: #d8d8d8; }


nav { width:100%; margin:0 0 30px; padding: 10px; background-color:#000; color:white; height:135px; }
nav div a { display:inline-block; padding:5px 20px; margin:0 10px; color: #fff; text-decoration:none; border:1px solid #888; border-radius:8px; }
nav div a:hover { background-color:#aaa; color:#fff; text-decoration: none; border:1px solid #000; border-radius:8px; }
nav div b { display:inline-block; background-color:#444; padding:5px 20px; margin:0 10px; color: #fff; text-decoration:none; border:1px solid #fff; border-radius:8px; }
nav div a:hover { background-color:#000; color:#fff; text-decoration: none; border:1px solid #888; border-radius:8px; }
nav img { margin-left: 20px; }
div#navlinks { margin: 10px 0 0 20px; }
nav div.userinfo { float:right; text-align: right; margin-right:30px; }
.client_building_list{margin-left: 211px;margin-top: 28px;background-color: #333;color: white;border-radius: 5px;}
.building_name{margin-left: 211px;margin-top: 29px;color: white;border-radius: 8px;font-size: 18px;}
.all_clients{height: 26px;margin-top: 28px;margin-left: 10px;line-height: 12px; background-color: #333; color: white;border-width: 1px;border-style: solid;border-color: rgb(118, 118, 118)}
.all_clients:hover{color: white}

div.filterstrip {
	display: inline-block;
	margin: 20px 0 0;
	background-color: #ddd;
	padding: 5px 10px;
}

button.btn-filter { padding: 2px 10px; border-radius:5px; vertical-align: top; }
.hide { display: none; }

div.btns {
    margin:10px 0;
}

div.btns button { background-color: #444; color:#fff; padding:3px 8px; display:inline-block; text-decoration:none; border-radius: 5px; cursor:pointer; }
div.btns button.selected { background-color:black; color:white; }
div.btns button.disabled { background-color: #ccc;  color: #999; border:2px solid #999; }
div.btns select { padding:3px 8px; border-radius: 5px; border:2px solid #999; }
select { padding:2px; }

input.datepicker { width: 100px; }
form label { display: block; margin-top:10px; }
form input, form textarea { display: block; margin-top:10px; width: 280px; }
textarea { height: 150px; }
form input[type=submit] { width: auto; }
form ul { padding-left: 20px; }
form ul li { color: red; font-weight: bold; }
form select { display:block; margin-top:5px; }

input:invalid { border-color: #a00; }
textarea:invalid { border-color: #a00; }

div#bldg input {
	display: inline-block;
	width: 16px;
}

#fbformset input { margin:0px 0px 15px; }
#fbformset textarea { margin:0px 0px 15px; }

table.default { margin:20px 0; background-color: #fff; }
table.default tr:hover { background-color: #ddd; }
table.default th { padding:2px 10px 2px 10px; background-color: #ccc; }
table.default td { padding:3px 10px; }
table.default td a { margin-right:10px; }

table.parcel {background-color: #fff; }
table.parcel tr:hover { background-color: #fff; }
table.parcel th { padding:2px 10px 2px 10px; background-color: #ccc; }
table.parcel td { padding:3px 10px; }
table.parcel td a { margin-right:10px; }

.c1, .c2, .c3, .c4, .c5 { float:left; display:inline-block; }
.c1 { width: 20%; }
.c2 { width: 40%; }
.c3 { width: 60%; }
.c4 { width: 80%; }
.c5 { width: 100%; }

.r1 div { height: 90px; padding-top:15px; }
.r2 div { height: 188px; }
.r3 div { height: 286px; }

.c1 div { margin:6px; }
.c2 div { margin:4px; }
.c3 div { margin:4px; }
.left { float:left; display:inline-block; }
.w100 { width:100%; }
.outset { background-color: #fff; border:1px outset; }

div.dashboard div { text-align: center; font-size:17px; border-radius:8px; }
div.dashboard div b { font-size:26px; color: #ec0c30; }
div.dashboard div.grn { background-color: #fff; color: black; border-radius:8px; border:1px outset; }
div.dashboard div.wht { border:1px outset; color: #080; }
div.dashboard div.blk { background-color: #7c0b1b; color: white; }
div.dashboard h2 { font-size:18px; font-weight:bold; color:#666; width:100%; text-align:center; margin:12px 0; }
div.dashboard div.fb { width:67px; height:60px; text-align:center; margin-top:4px; float:left; color: #666; }
div.fb img { width:60px; display:block; margin-bottom:3px; margin-left:4px; }

div.signatureblock {
	width: 480px;
	height: 450px;
	line-height: 20px;
	margin-bottom: 30px;
	border:1px solid black;
	background-color: #ddd;
	font-size: 17px;
	text-align: left;
}

table.signatureblock {
	margin: 20px;
	border:1px solid #888;
	border-collapse: collapse;
}

table.signatureblock td {
	border:1px solid #888;
	border-collapse: collapse;
	padding: 10px 30px;
	text-align: left;
	font-size:15px;
}


.buttons { width: 280px; margin-top:20px; }
.left { float: left; }
.right { float: right; }
.marginR20 { margin-right:20px; }
.btn-dark, .btn-dark:hover { background-color: #444; color: white; }

div.photodiv { float:left; margin:10px; line-height:1.5em; }
div.photodiv img { width:320px; height:240px; margin:0px; border:1px solid black; }

td.green b { color: #444; }

table.api th { padding: 3px 20px 3px 0; }
table.api td { padding: 3px 20px 3px 0; }
div.para { margin:20px 0; max-width:600px; }

.report { background-color: #fff; border:1px solid #888; border-radius:10px; }

div#paging b { display: inline-block; width:30px;height:30px;line-height:30px;text-align: center; border:1px solid #aaa; font-weight:600; background-color:#bbb; margin: 2px; color: #444; }
div#paging a { display: inline-block; width:30px;height:30px;line-height:30px;text-align: center; border:1px solid #aaa; text-decoration: none; margin: 2px; color: #444; }

.timingouter { width:600px; overflow: hidden; }
.timings { padding:2px 0; display: inline-block; overflow: hidden; }
.timings.key { width:9px; height:9px; }
.timings.photo { background-color: blue; color: white; }
.timings.ocr { background-color: red; color: white; }
.timings.edit { background-color: darkseagreen; color: black; }

div.eventline.highlight { background-color: #aaa; }


.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  margin-top: 5px;
  width: 614px !important;
  height: 12px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  border-radius: 12px;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 24px; /* Set a specific slider handle width */
  height: 24px; /* Slider handle height */
  border-radius: 24px;
  background: #AA0000; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04AA6D; /* Green background */
  cursor: pointer; /* Cursor on hover */
}


/* screen size variations */

.onlysmallblock { display: none; }
.onlysmall { display: none; }
.onlylarge { display: auto }
span.onlysmall { display: none; }
span.onlylarge { display: inline-block; }


div.bigrow { margin: 0 0px; }
.col2 { width: calc(100% - 50px); max-width:800px; }

div.boxleft { width: calc(50% - 20px); float:left; }
div.boxright { width: calc(50% - 20px); float:left; }

div.repbox {
    min-width:147px !important;
    height:126px;
    margin: 0 5px 5px 0;
    display: inline-block;
    padding:10px 5px;
    border:1px solid #888;
    color: #777;
    border-radius: 10px;
    background-color:white;
    text-align:center;
    font-weight: bold;
    font-size: 18px;
}

div.repbox div { color: #2a9d8f; font-weight:bold; margin-top:10px; font-size:21px; }


div#paging select {
	display: inline-block;
	width: 50px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border: 1px solid #aaa;
	text-decoration: none;
	margin: 2px;
	color: #444;
    position: relative;
    top: -1px;
}

div#paging .navigator {
	display: inline-block;
	flex-direction: column-reverse;
	align-items: center;
}

div#paging .pagination_dots {
	display: inline-block;
	align-items: end;
	margin-left: 5px;
	margin-right: 5px;
	font-size: large;
}

a.disabled {
	pointer-events: none;
	cursor: default;
	border: 1px solid #c8c5c5 !important;
	color: #c8c5c5 !important;
}

div#report_tabs .nav-tabs > li {
	float: left;
	border: 1px solid #888;
	margin-left: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #777 !important;
	font-weight: bolder;
  }

  div#report_tabs .nav > li > a {
	color: #777 !important;
  }

  div#report_tabs .tab-content {
	margin-top: 20px;
  }

  div#report_tabs a {
  	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0px;
  }

  #profile_icon > i {
	cursor: pointer;
  }

  .formStatus{
	padding-top: 10px;
	display: block;
  }

  .supportTicketOptions{
	display: block ruby;
  }

  .ticketMessageOut {
	width: 850px;
	background-color: #e6e6dc;
	text-align: left;
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;
	margin-left: auto;
	margin-right: 10px;
  }

  .ticketMessageIn {
	width: 850px;
	background-color: #ddd;
	text-align: left;
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;
  }

  .ticketMessageBlock{
	padding: 10px;
	background-color: #f0f0f0;
	max-width: 900px;
	margin-top: 20px;
  }

  .ticketMessageField{
	width:900px;
  }

  #ticket-view-form{
	max-width:900px;
  }

  
  .centered {
	text-align:center;
  }

  .add-notice-modal-container, .add-user-modal-container, .edit-config-modal-container{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
  }

  .add-notice-modal{
  width: 365px;
  height: 565px;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
	display: none;
	
  }

  .default-modal-container{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    background-color: #000000b3;
    display: none;
  }
  
  .default-modal{
    padding: 20px;
    height: 295px;
    top: 30% !important;
    width: 367px;
    text-align: center;
    background-color: white;
    border-radius: 8px;
    margin: auto;
    margin-top: 150px;

  }

    
  .add-user-modal{
    width: 345px;
    height: 360px;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: none;
  }
  
  .task-container{
	display: flex;
	cursor: pointer;
  }

  .task {
    width: 90%;
    height: 60px;
    background-color: #dcdcdced;
    border-radius: 10px;
    padding:10px;
    margin-bottom:10px;
    display: flex;
  }

.task .task-header {
    width: 80px;
    height: 30px;
    font-size: 25px;
    font-weight: bolder;
    margin-left: 10px;
    margin-right: 10px;
	  text-align: center;
    margin-top: 3px;
}	

.task .task-labels{
  margin-left: 20px;
	margin-right: 10px;
  width: 155px;
}

.task .task-labels .task-type {
    padding: 5px 10px;
    border-radius: 10px;
    height: 37px;
    width: 125px;
    font-weight: 600;
    color: white;
    text-align: center;
    line-height: 26px;
    margin-top: 2px;
}

.task .task-labels .task-type.todo {
	background-color:  #eaa13b;;
}

.task .task-labels .task-type.deliverable {
	background-color: #337ab7;;
}

.task .task-labels .task-state {
    padding: 5px 10px;
    border-radius: 10px;
    height: 37px;
    font-weight: 600;
    color: white;
    width: 120px;
    text-align: center;
    line-height: 27px;
    margin-top: 2px;
}

.task .task-labels .task-state.in-progress {
	background-color: #4bb14b;;
}

.task .task-labels .task-state.completed {
	background-color: #5bc761;;;
}

.task .task-labels .task-state.ready {
	background-color: #5bc0de;;;;
}

.task .task-labels .task-state.ideas {
	background-color: #777;;;
}

.task .task-labels .task-state.backlog {
	background-color: #474747;;;
}


.task .task-content-column .task-desc {
	margin-left: 10px;
  width: 100%;
  height: 40px;
  overflow-y: hidden;
  font-size: 17px;
  font-weight: 900;
  line-height: 39px;
}

.task .task-content-column {
    width: 45%;
    display: flex;
    flex-direction: column;
}

 .task-bottom-label-row {
    width: fit-content;
    display: flex;
    flex-direction: row;
    overflow-x: clip;
    margin-left: auto;
    margin-right: 10px;
}


 .task-bottom-label-row .task-bottom-label{
    padding: 0px 10px;
    border-radius: 7px;
    color: white;
    line-height: 20px;
    margin-right: 5px;
    font-size:12px; ; 

}

.task .subtask-labels {
	margin-left: 20px;
	margin-right: 10px;
  width: 155px;

}

.task .subtask-labels .subtask-label{
    width: 155px;
	padding: 5px 10px;
    border-radius: 10px;
    height: 37px;
    font-weight: 600;
    color: white;
    text-align: center;
    line-height: 27px;
    margin-top: 2px;

}

.task .subtask-labels .subtask-label.dev{
	background-color: #2e6da4;
}

.task .subtask-labels .subtask-label.testdev{
	background-color: #2b86aa;
}

.task .subtask-labels .subtask-label.deployment{
	background-color: #2e3aa4;
}
 .task-priority {
    width: 10%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #dcdcdced;
    margin-left: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    line-height: 40px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: white;
    height: 60px;
}

.urgent{
	background-color: #A00;
}
.high{
	background-color: #e2a600d6;;
}
.normal{
	background-color: #1f845a;
}
.low{
	background-color: #777;
}
.triage{
	background-color: #000;
}

.subtask-container{
	display: flex;
}

.subtask {
	margin-left: 10px !important;
  height: 60px;
}

.subtask .task-desc {

  font-size: 20px;
  font-weight: 900;

}

.subtask-priority {
	margin-left: 10px !important;
  height: 60px;
  line-height: 40px;
}


.task-fulldesc{
  background-color: #dddddd;
  margin: 20px 0px 20px 10px;
  padding: 20px;
  border-radius: 10px;
}

.task-attachments{
  background-color: #dddddd;
  margin: 20px 0px 20px 10px;
  padding: 20px;
  border-radius: 10px;
}

.task-comments{
  background-color: #dddddd;
  margin: 20px 0px 20px 10px;
  padding: 20px;
  border-radius: 10px;
}

.prioritybox {
  color: white;
  width: 200px;
  text-align: center;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
  padding: 10px;
}

.task-header-column{
  width: 110px;
}

.task-assignee{
	text-align: center;
	margin-top: 6px;
 
}

.sub-task-assignee{
  margin-top: 6px;
}

.task-assignee div{
    border-radius: 20px;
    width: 30px;
    height: 30px;
    margin: auto;
    font-size: 16px;
    line-height: 31px;
	  text-align: center;
    color: white;
}

.remove-label-icon{
  cursor: pointer;
}

.add-label-icon{
  cursor: pointer;
}

.avatar-grey{
	background-color: #777 ;
}

.avatar-blue{
	background-color: #98cfff;
}

.add-label-modal-container , .add-task-modal-container, .delete-task-container, .edit-task-modal-container{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  display: none;
}

.task-modal{
  width: 670px;
  height: 50%;
  position: fixed;
  z-index: 10000;
  top: 20%;
  left: 35%;
  background-color: white;
  display: none;
}

.add-task-modal{
  padding: 20px;
  height: 580px !important;
  top: 15% !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.edit-task-modal{
  padding: 20px;
  height: 580px;
  top: 15% !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.delete-task-modal{
  padding: 30px;
  height: 23% !important;
  width: 367px;
  text-align: center;
  margin-top:150px !important;
  top: 0px !important;
}

.add-task-modal .buttons{
  width: 610px;
}

.label-group-list-container{
  display: flex;
  width: 460px;
  margin: 20px 20px;
}

.label-group-list-item{
  padding: 5px 10px;
  margin: 5px;
  background-color: #8080805c;
  border-radius: 20px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid #8080805c;
}

.label-group-list-item.selected{
  border:1px solid !important;
}

.labels-table{
  width: 400px;
  margin-left: 50px;
}

.labels-table td {
  padding-top: 10px;
}

.labels-table tbody {
  padding-bottom: 10px;
}

.label-group-table-container{
  height: 350px;
  overflow-y: scroll;
}

.add-subtask-container{
  display: flex;
  margin-top: 20px;
}

.add-subtask{
  border: 3px dashed #000;
  cursor: pointer;
  background-color: gray;
  color: black;
}

.add-subtask div{
  margin-left: 48%;
  font-size: 25px;
  line-height: 34px;
}

.no-right-border{
  border-right: none !important;
}

.no-left-border {
  border-left: none !important;
}

.content-footer-row{
  display: flex;
}

.delete-btn {
  background-color: #a00;
  border-color: #a00;
  color:white;
  border-radius: 10px;
}

.edit-btn{
  background-color: rgb(0, 170, 23) !important;
  border-color: rgb(0, 170, 23) !important;
  color:white !important;
  border-radius: 10px !important;
}
/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
  z-index: 98;
}
  
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #2e6da4;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1000;
  font-size: 12px;
  top: 34px;
  left: -42px;
  height: 30px;
  line-height: 20px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

.comment_header{
  display: flex;
  margin-bottom: 10px;
}

.comment_header_left .task-commenter{
  text-align: center;
}

.comment_header_left .task-commenter div{
  border-radius: 20px;
  width: 30px;
  height: 30px;
  margin: auto;
  font-size: 20px;
  line-height: 31px;
  background-color: grey;
  text-align: center;
}

.comment_header_right{
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
  margin-top: auto;
  margin-left: 10px;
}

.comment_header_left{
  display: flex;
  flex-direction: column;
  margin-bottom: auto;
  margin-top: auto;
}
.add_comment_btn{
  margin-right: 0px;
  margin-left: auto;
  background-color: #009fff;
  color: white;
  border-radius: 10px;
  width:120px;
}

.add_attachment_btn{
  margin-right: 0px;
  margin-left: auto;
  background-color: #009fff;
  color: white;
  border-radius: 10px;
  width:120px;
}

.add-comment-modal, .edit-comment-modal{
  padding: 20px;
  height: 400px !important;
  overflow-y: auto;
  margin-top:150px !important;
  top: 0px !important;
}

.add-comment-modal-container, .edit-comment-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  display: none;
}

.add-attachment-modal{
  padding: 20px;
  height: 520px !important;
  overflow-y: auto;
  margin-top:150px !important;
  top: 0px !important;
}

.add-attachment-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  display: none;
}

.view-attachment-image-modal{
  width:auto !important;
  height: 85% !important;
  max-width:95%;
  overflow-y: auto;
  position: unset;
  top: unset;
  left: unset;
}

.view-attachment-image-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  place-items: center;
  display: grid;
  
}

.view-attachment-video-modal{
  width:auto !important;
  height: 85% !important;
  max-width:95%;
  overflow-y: auto;
  position: unset;
  top: unset;
  left: unset;
}

.view-attachment-video-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  place-items: center;
  display: grid;
  
}

.task-dates{
  font-size:10px;
  font-weight: 600;
}

#fbform{
  z-index:20;
  width: 272px; 
  display:none; 
  top:135px; 
  right:0; 
  background-color:#ddd;
  border:1px solid black; 
  border-bottom-left-radius:7px;
  padding:10px;
  font-size:12px; 
  color:#555;
  margin: auto;
  margin-top: 150px;
}

#fbform_container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10;
  display:none;
  background-color:#000000bf
}

.logout-confirmation-modal-container, .loading-modal-container{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  display: none;
}

.logout-confirmation-modal, .loading-modal{
  padding: 20px;
  height: 190px !important;
  top: 30% !important;
  width: 367px;
  text-align: center;
  background-color: white;
  border-radius: 8px;
  margin: auto;
  margin-top: 310px;
}

.task-breadcrumb{
  background-color: unset;
  padding: 5px 0px;
}

.bigrow .inforow{
  height: 300px !important;
  overflow-y: hidden;
}

.bigrow .btns{
  height: 30px !important;
}

.sigdiv{
  width:calc(100% - 50px);
  height: 27px;
  padding:2px 5px; 
  background-color:#000;
  color:#fff;
  font-size:16px; 
  font-weight:bold;
}

.media_content img{
  border:1px solid black;
  width:calc(100% - 50px);
  height: 370px;
  margin-bottom: 10px;
}

#signatureimage img{
  height: 343px !important;
}

.uploadmodal{
  height:100%;
  width: 100%;
  background-color: #000000d1;
  position: fixed;
  top: 0px;
  left:0px;
  text-align: center;
  display: block ruby;
}

.uploadcontainer{
  height: 56vh;
  width: 32vw;
  background-color: white;
  border-radius: 15px;
  margin-top: 20vh;
  z-index: 100;
}
.drop-zone {
  max-width: 30vw;
    height: 35vh;;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: black;
  border: 4px dashed #d5553d;
  border-radius: 10px;
  margin: auto;
  margin-top: 10vh;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  width: 80%;
  height: 80%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  background-position-x: center;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.75);
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

.pb{
  position: fixed;
  margin-top: 290px;
  width: 265px;
  height: 5px;
  display: none;
}

.bar{
  background-color:#d5553d;
  height: 100%;
  width: 0%;
}

.attachment{
  width: 400px;;
  height: 100px;
  margin-right: 20px;
  margin-top:20px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}

.attachment_thumb{
  height: 100px;
  width: 100px;
}

.attachments_container{
  display: flex;
  flex-wrap: wrap;
}

.attachment-img{
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.attachment-box{
  width: 400px;
  height: 100px;
  display: flex;
  text-align: left;

}

.attachment-text{
  width: 300px;
  height:60px;
  overflow-y: auto;
  padding: 8px;
  overflow-wrap: anywhere;
}

.attachment-text a{
  cursor: pointer;
}

.attachment-desc{
  display: grid;
}

.view-monitoring-details-modal{
  padding: 20px;
  padding-bottom: 40px;
  height: auto !important;
  overflow-y: auto;
  width: 800px !important;
  left: 25% !important;
}

.view-monitoring-details-modal-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  display: none;
}

.clear-log-confirmation-modal-container{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  display: none;
}

.clear-log-confirmation-modal{
  padding: 20px;
  height: 190px !important;
  top: 30% !important;
  width: 367px;
  text-align: center;
  background-color: white;
  border-radius: 8px;
  margin: auto;
  margin-top: 310px;
}

.edit-config-modal-container{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: #000000b3;
  display: none;
}

.edit-config-modal{
  padding: 20px;
  height: 295px;
  top: 30% !important;
  width: 367px;
  text-align: center;
  background-color: white;
  border-radius: 8px;
  margin: auto;
  margin-top: 310px;
}

#submitconfig-form{
  text-align: left;
}

#details-panel td {
  vertical-align: top;
}

.err-row{
  color: red;
}


.mt0{ margin-top: 0px !important; }
.mt5{ margin-top: 5px !important; }
.mt10{ margin-top: 10px !important; }
.mt15{ margin-top: 15px !important; }
.mt20{ margin-top: 20px !important; }

.ml0 { margin-left: 0px !important; }
.ml10{ margin-left: 10px !important; }
.ml20{ margin-left: 20px !important; }

.mr10{ margin-right: 10px !important; }
.mr15{ margin-right: 15px !important; }

.mb20{ margin-bottom: 20px !important; }

.flex-row{
  display: flex;
}

.pointer{
  cursor: pointer;
}

.fullwidth{
  width: 100% !important;
}

.thm{ border: 1px #ccc solid; }

#checkboxes label {
  float: left;
}

#checkboxes input {
  width:max-content;
  margin-right: 5px;
}

#checkboxes li {
  display: flex;
  color: #333;
}

.courier_reason{
  width: 40px !important;
}


.small-dropzone {
  width: 280px;
  height: 150px;
  border: 1px dashed #767676;
  border-radius: 10px;
  background-color: #76767626;
  display: grid;
  align-content: center;
  text-align: center;
  justify-items: center;
  cursor: pointer;
}

.small-dropzone:hover{
  background-color: #7676764d;
}

.small-dropzone span{
  padding:10px
}

.small-dropzone #thumb{
  width: 278px;
  height: 148px;
  position: absolute;
  border-radius: 10px;
  background-size: cover;
}

.small-dropzone #drop_icon{
  width: 60px;
  z-index: 99;
  background-color: #ffffff54;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid;
}

.small-dropzone #drop_text{
  font-weight: 600;
  font-size: 14px;
}

.small-dropzone #thumb:hover{
  opacity: 0.5;
}

.seperator-row {
  background-color: #f2f2f2;
  cursor: default;
  pointer-events: none;
  height: 20px;
}

.seperator-row td {
 
}

.hamburger{
  display: none;
}



/* wide screen overrides */

@media only screen and (max-width: 1270px) {
    div.boxleft { width: 100%; float: none; }
    div.boxright { width: 100%; float: none; }
    img#devtext { display:none; }
}

@media only screen and (min-width: 1280px) {
	div.container { width:1033px; }
}

@media only screen and (min-width: 1366px) {
	div.container { width:1119px; }
}

@media only screen and (min-width: 1440px) {
	div.container { width:1194px; }
}

@media only screen and (min-width: 1600px) {
	div.container { width:1352px; }
}

@media only screen and (max-width: 900px) {

  .l-navbar {
    display: none !important  ;
  }

  .side-nav {
    height: fit-content;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    position: fixed !important; 
    height: 100vh !important;
    padding-top: 0px !important;
}

  .container{
    margin-left: 0px !important;
  }

  div.c1 {
    width: 50% !important;
  }

  .r1 div {
    height: max-content;
    padding-top: 15px;
    padding-bottom: 15px;
  
  }

  .client_building_list {
    margin-left: 30px;
    margin-top: 28px;
    background-color: #333;
    color: white;
    border-radius: 5px;
    width: 30%;
  }

  .userinfo {
    display: none;
  }

  .userinfotxt {
    display: none;
  }

  .hamburger{
    display: block !important;
    position: fixed;
    top: 15px;
    right: 10px;
    z-index: 9999;
  }

  .nav_list{
    margin-top: 25px;
    height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100vw - 60px);
  }

  .nav_name {
    font-size: 16px !important;
  }

  .nav_link {
    font-size: 16px !important;
    height: 50px !important;
  }

  nav img {
    margin: 0 !important;;
    width: 150px !important;;
    margin-top: 7px !important;;
  }
}


/* mobile variations */

@media only screen and (max-width: 900px) {
	.onlysmall { display: auto; }
	.onlysmallblock { display: block; }
	.onlylarge { display: none; }
	span.onlysmall { display: inline-block; }
	span.onlylarge { display: none; }

	div.dashboard div { font-size: 16px; }
	div.row { margin-left:0; margin-right: 0; }
	nav { margin-bottom: 0; margin-left:20px; margin-top:10px; }
	nav div a { margin: 0 3px 0; padding: 5px 8px; }
	nav div b { margin: 0 3px 0; padding: 5px 8px; }
	div.c1 { width: 48%; }
	table.default { width: 100%; }
    .col2 { width: 100% !important; }
    div.btns button { width:100px; margin:3px; }
    div#navlinks { margin: 10px 0 0 0; }
    nav img { margin:0; }
    nav div.userinfo { margin-right:10px; font-size:10px; }
}

/* print variations */

@media only screen {
	.nodisplay { display: none;}
}

@media only print {
	body { zoom: 90%; }
	.noprint { display: none;}
	nav { height: 100px; }
}


.showMobileNav{
  display: block !important;
}

.inline_cb{
  display: inline-block;
  float: left;
  width: 13px;
  margin-right: 10px !important;
  margin-top: -17px !important;
}

.advanced-search-panel > .row{
  width: 500px;
  margin: 10px 5px;
}

.advanced-search-panel input{
  width: 330px;
}

.advanced-search-panel select{
  width: 330px;
}

/* advanced-search-btn gray on disabled */
#advanced-search-btn[disabled]{
  background-color: #787878;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}