@charset "utf-8";
/* CSS Document */

.main_nav_logo_wrapper {
	background-color: #D64141;
}
.logo {padding: 10px 4px;}
.main_footer_wrapper {
	background-color: #FFF;
	border-top: 1px solid #EEE;
	padding: 5px;
	text-align: center;
	margin-top: 10px;
}
.body_container_cls {
	min-height: 300px;
}
.nav_wrapper {padding: 5px;text-align: right;line-height: 36px;}
.nav_links {font-size: 12px;color: #EEE;text-decoration: none;text-transform: uppercase;font-weight: bold;}
.nav_links:hover {color: #FFF;text-decoration: none;}

.profile_main_holder_cls>div {
	margin-top: 5px;
	margin-bottom: 5px;
}
.profile_main_holder_cls hr {
	margin-top: 40px;
}
.bg-dark {color: #FFF !important;}
.error {font-size: 12px; color: #f05050}

.app-header-fixed .fa-dedent {display: block !important;}
.app-header-fixed .fa-indent {display: none  !important;}
.app-aside-folded .fa-dedent {display: none  !important;}
.app-aside-folded .fa-indent {display: block !important;}
.form_item_sizing .form-group {
	margin: 5px;
}
.required {color: #F00; font-style: italic;}


/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
	.modal.left .modal-dialog,
	.modal.right .modal-dialog {
		position: fixed;
		margin: auto;
		width: 100%;
		max-width: 550px;
		height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}

	.modal.left .modal-content,
	.modal.right .modal-content {
		height: 100%;
		overflow-y: auto;
	}

	.modal.left .modal-body,
	.modal.right .modal-body {
		padding: 15px 15px 80px;
	}

/*Left*/
	.modal.left.fade .modal-dialog{
		left: -550px;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		        transition: opacity 0.3s linear, left 0.3s ease-out;
	}

	.modal.left.fade.in .modal-dialog{
		left: 0;
	}

/*Right*/
	.modal.right.fade .modal-dialog {
		right: -550px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
	}

	.modal.right.fade.in .modal-dialog {
		right: 0;
	}

/* ----- MODAL STYLE ----- */
	.modal.right .modal-content, .modal.left .modal-content {
		border-radius: 0;
		border: none;
	}

	.modal.right .modal-header, .modal.left .modal-header {
		border-bottom-color: #EDF1F2;
		background-color: #610076;
	}

	#ui-datepicker-div {z-index: 3000 !important}

	.dimlight {opacity: 0.2 !important}

	.hovering_row_cls:hover {
		color: #000 !important;
	}
	.upload_logo_list img {
		max-width: 200px;max-height: 200px;
	}

	.overflowBtn {
		border-radius: 0 !important;
    	position: absolute;
	}


	.chosen-container
	{
	    width: 100% !important;
	}
	.chosen-container .search-choice span, .chosen-container .chosen-results li {
		text-transform: capitalize;
	}

	.table tbody tr:not(.noHover):hover td{
		background: #FFD;
	}
	select option {text-transform: capitalize;}
	.bookings_status_print {cursor: pointer;}
	.legendLabel {text-transform: capitalize;}

	.iconAside {position: relative;top: -3px;}
	.app-aside-folded .iconAside {top: 8px;}

	.main_page_inner_holder_cls {margin-top: 150px}

	.loader {
	  position: relative;
	  width: 148px;
	  height: 28px;
	  margin: 40px auto;
	}

	.dot {
	  display: inline-block;
	  width: 28px;
	  height: 28px;
	  border-radius: 14px;
	  background: #FFF;
	  position: absolute;
	}

	.dot_1 {
	  animation: animateDot1 1.5s linear infinite;
	  left: 40px;
	  background: #000;
	}

	.dot_2 {
	  animation: animateDot2 1.5s linear infinite;
	  animation-delay: 0.5s;
	  left: 80px;
	}

	.dot_3 {
	  animation: animateDot3 1.5s linear infinite;
	  left: 40px;
	}

	.dot_4 {
	  animation: animateDot4 1.5s linear infinite;
	  animation-delay: 0.5s;
	  left: 80px;
	}

	@keyframes animateDot1 {
	  0% {
	    transform: rotate(0deg) translateX(-40px);
	  }
	  25% {
	    transform: rotate(180deg) translateX(-40px);
	  }
	  75% {
	    transform: rotate(180deg) translateX(-40px);
	  }
	  100% {
	    transform: rotate(360deg) translateX(-40px);
	  }
	}
	@keyframes animateDot2 {
	  0% {
	    transform: rotate(0deg) translateX(-40px);
	  }
	  25% {
	    transform: rotate(-180deg) translateX(-40px);
	  }
	  75% {
	    transform: rotate(-180deg) translateX(-40px);
	  }
	  100% {
	    transform: rotate(-360deg) translateX(-40px);
	  }
	}
	@keyframes animateDot3 {
	  0% {
	    transform: rotate(0deg) translateX(40px);
	  }
	  25% {
	    transform: rotate(180deg) translateX(40px);
	  }
	  75% {
	    transform: rotate(180deg) translateX(40px);
	  }
	  100% {
	    transform: rotate(360deg) translateX(40px);
	  }
	}
	@keyframes animateDot4 {
	  0% {
	    transform: rotate(0deg) translateX(40px);
	  }
	  25% {
	    transform: rotate(-180deg) translateX(40px);
	  }
	  75% {
	    transform: rotate(-180deg) translateX(40px);
	  }
	  100% {
	    transform: rotate(-360deg) translateX(40px);
	  }
	}



	.main_page_blocker_cls {
		position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;background: #76008F;z-index: 1200
	}


	.loop-wrapper {
	  margin: 0 auto;
	  position: relative;
	  display: block;
	  /*width: 600px;*/
	  height: 250px;
	  overflow: hidden;
	  border-bottom: 3px solid #fff;
	  color: #fff;
	}
	.loop-wrapper h2 {
	  margin: 0 auto;
	  margin-top: 60px;
	  text-align: center;
	  font-size: 38px;
	  font-weight: 600;
	}
	.loop-wrapper h2 span {
	  font-weight: 300;
	  letter-spacing: 1px;
	}
	.sun {
	  position: absolute;
	  top: 65px;
	  right: 20%;
	  margin-right: -25px;
	  width: 50px;
	  height: 50px;
	  background: url(../images/truck/sun.svg) no-repeat;
	  background-size: contain;
	  border-radius: 100%;
	  /* opacity: .1; */
	  display: none;
	}
	.mountain {
	  position: absolute;
	  right: -900px;
	  bottom: -20px;
	  width: 2px;
	  height: 2px;
	  box-shadow:
	    0 0 0 50px #FFF,
	    60px 50px 0 70px #FFF,
	    90px 90px 0 50px #FFF,
	    250px 250px 0 50px #FFF,
	    290px 320px 0 50px #FFF,
	    320px 400px 0 50px #FFF
	    ;
	  transform: rotate(130deg);
	  animation: mtn 20s linear infinite;
	}
	.hill {
	  position: absolute;
	  right: -900px;
	  bottom: -50px;
	  width: 400px;
	  border-radius: 50%;
	  height: 20px;
	  box-shadow:
	    0 0 0 50px #FFF,
	    -20px 0 0 20px #FFF,
	    -90px 0 0 50px #FFF,
	    250px 0 0 50px #FFF,
	    290px 0 0 50px #FFF,
	    620px 0 0 50px #FFF;
	  animation: hill 4s 2s linear infinite;
	}
	.tree, .tree:nth-child(2), .tree:nth-child(3) {
	  position: absolute;
	  height: 100px;
	  width: 35px;
	  bottom: 0;
	  background: url(../images/truck/tree.svg) no-repeat;
	}
	.rock {
	  margin-top: -17%;
	  height: 2%;
	  width: 2%;
	  bottom: -2px;
	  border-radius: 20px;
	  position: absolute;
	  background: #ddd;
	}
	.truck, .wheels {
	  transition: all ease;
	  width: 85px;
	  margin-right: -60px;
	  bottom: 0px;
	  right: 50%;
	  position: absolute;
	  background: #eee;
	}
	.truck {
	  background: url(../images/truck/truck.svg) no-repeat;
	  height: 60px;
	}
	.truck:before {
	  content: " ";
	  position: absolute;
	  width: 25px;
	  box-shadow:
	    -30px 28px 0 1.5px #fff,
	     -35px 18px 0 1.5px #fff;
	}
	.wheels {
	  background: url(../images/truck/wheels.svg) no-repeat;
	  height: 15px;
	  margin-bottom: 0;
	}

	.tree  { animation: tree 3s 0.000s linear infinite; }
	.tree:nth-child(2)  { animation: tree2 2s 0.150s linear infinite; }
	.tree:nth-child(3)  { animation: tree3 8s 0.050s linear infinite; }
	.rock  { animation: rock 4s   -0.530s linear infinite; }
	.truck  { animation: truck 4s   0.080s ease infinite; }
	.wheels  { animation: truck 4s   0.001s ease infinite; }
	.truck:before { animation: wind 1.5s   0.000s ease infinite; }


	@keyframes tree {
	  0%   { transform: translate(1350px); }
	  50% {}
	  100% { transform: translate(-50px); }
	}
	@keyframes tree2 {
	  0%   { transform: translate(650px); }
	  50% {}
	  100% { transform: translate(-50px); }
	}
	@keyframes tree3 {
	  0%   { transform: translate(2750px); }
	  50% {}
	  100% { transform: translate(-50px); }
	}

	@keyframes rock {
	  0%   { right: -200px; }
	  100% { right: 2000px; }
	}
	@keyframes truck {
	  0%   { }
	  6%   { transform: translateY(0px); }
	  7%   { transform: translateY(-6px); }
	  9%   { transform: translateY(0px); }
	  10%   { transform: translateY(-1px); }
	  11%   { transform: translateY(0px); }
	  100%   { }
	}
	@keyframes wind {
	  0%   {  }
	  50%   { transform: translateY(3px) }
	  100%   { }
	}
	@keyframes mtn {
	  100% {
	    transform: translateX(-2000px) rotate(130deg);
	  }
	}
	@keyframes hill {
	  100% {
	    transform: translateX(-2000px);
	  }
	}

	@font-face {
      font-family: 'fontello';
      src: url('./font/fontello.eot?28585749');
      src: url('./font/fontello.eot?28585749#iefix') format('embedded-opentype'),
           url('./font/fontello.woff?28585749') format('woff'),
           url('./font/fontello.ttf?28585749') format('truetype'),
           url('./font/fontello.svg?28585749#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }


    .demo-icon
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;

      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */

      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;

      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;

      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;

      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */

      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
    .push_side_cls th {
 		padding-left: 15px !important;
 	}
 	.hidden-unfold {
 		display: none !important;
 	}
 	.app-aside-folded .hidden-unfold {
 		display: inline !important;
 	}
 	.hoverCloseBtn {
 		cursor: pointer;color: #AAA;margin-left: 10px;
 	}
 	.hoverCloseBtn:hover {
 		color: red;
 	}

	.nav-pills > li.active > a, .nav-pills > li.active > a:focus {
        background-color: #76008F !important;
        color:#FFF !important;
    }

    .nav-pills > li.active > a:hover {
        background-color: #610076 !important;
        color:#FFF !important;
    }

	.pac-container {z-index: 1200 !important;}

	.padding-5 {padding: 5px;}
	.worker_details_value_item {padding: 7px; margin-left: 2px;}
	i.padding-left-5 {
		padding-left: 5px;
		font-size: 12px;
		color: gray;
		cursor: pointer;
	}
	i.padding-left-5:hover {
		color: red;
	}

	.item-editable {cursor: text;}

	.readonlyDate {background: #FFF !important;cursor: pointer !important;}

	.timeslot_pils {margin: 2px;cursor: default;}

	.editable_list_padding .col-sm-5,.editable_list_padding .col-sm-7 {
		line-height: 26px;
	}



.fa_is_not_locked {color: #AAA !important;cursor: pointer;}
.fa_is_locked {color: gold !important;cursor: pointer;}

.profile_pic_cls {background-size: cover !important;background-position: center top !important;background-repeat: no-repeat !important;}

.sortingZone {
	list-style-type: none;
	margin: 0.2%;
	border: 1px solid #DDD;
	width: calc(32.6%);
	float: left;
}
#sortingZone_00 {
	/*width: calc(64.2% + 2px);*/
	width: calc((32.8% * 3) + 2px);
}
.sortingZone .sortingZoneHeader {
	background:#76008F;
	color: #FFF;
	text-transform: capitalize;
	padding:4px 3px;
	font-size: 14px;
	font-weight:bold;
}
.sortingZone .sortingZoneFotter {
	background:#AAA;
	color: #FFF;
	font-size: 12px;
}
.connectedSortable {
	min-height: 200px;
		padding: 2px;
	background: #FFF;
	border: 1px solid #DDD;
	border-width: 1px 0px 1px 0px;
	overflow-y:auto; ;
}
.connectedSortable.is_disabled {
	background:#DDD;
	cursor: no-drop;
}
.connectedSortable .connectedSortableItem {
	margin: 3px 3px;
	position: relative;
	background: #EEE;
	border: 1px solid #CCC;
	padding: 1px;
	height: 120px;
	float: left;
	width: 100px;
	font-size: 12px;
	text-align: center;
	cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.connectedSortable .connectedSortableItem:active { cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;}
 .worker_name_holder_cls {color: #000;font-weight:bold;font-size: 11px;position: absolute;bottom: 0px;background-color: rgba(255,255,255,0.6);width: 96px;}

 .holderMasker {position: absolute;background:rgba(255,255,255,0.6);height: 80%;width: 82%; z-index:100;}
 .holderMasker .statemsg_big {font-size: 52px;font-weight: bold;width: 100%;text-align: center;	margin-top: calc(10%);	}
 .holderMasker .statemsg_small {font-size: 14px;font-weight: bold;width: 100%;text-align: center;	}

 .sortingZone {}
.zoneActiveInSlotControl {}
.zoneActiveInSlotControl .toggle  {height: 22px !important;}

.perDayorHrController {
	float: left;
	width: 28%;
	font-size: 18px;
	text-transform: capitalize;
	color: #000;
	padding: 2px;
}
.sortingZoneHeader .form-control {height: 22px !important;line-height: 22px !important;padding:1px 1px !important;text-transform: capitalize; }
.sortingZoneHeader .form-control option{text-transform: capitalize; }

.pending_cls {background: #F0F0F0 !important}
.cancelled_cls { background: #FFB2B2 !important }
.recycled_cls, .complete_cls { background: #38ff87 !important }
.isRescheduled_cls, .rescheduled_cls { background: #BDDEFF !important }
.part_complete_cls { background: #adffd5 !important }

.Strong_cls {background: #00d819 !important}
.Best_cls {background: #00bfff !important}
.Weak_cls {background: #cca9a9 !important}
.Danger_cls {background: #ff0000 !important}

.pdd-dwn-10 {padding-bottom: 10px;}
.bdr-right-1ddd { border-right: 1px solid #DDD }
.min-height-100 { min-height: 100px; }
.inner-scrl-cls { max-height: 400px; overflow: auto; }
.label_heading {
	font-weight: bold;
}
.inner-pad-col-sm-6 .col-sm-6 {
	padding: 6px;
}
.bgrd-white {background: #FFF}

.pickup-view-headings {
	font-weight: bold;
	font-size:18px;
	margin-bottom:15px;
}

.make-padding-inner .col-sm-6 .col-sm-5, .make-padding-inner .col-sm-6 .col-sm-7 {
	padding-top: 2px;
	padding-bottom: 2px;
}

.popuplistItemHolder {
	position: absolute;background: #FFF;width: 100%;border: 1px solid #EEE;z-index: 100;max-height: 300px;overflow: auto;
}

.popuplistItem {
	background: #FAFAFA; border-top:1px solid #EEE;padding: 4px;cursor: pointer;font-size: 14px;color: #000; font-weight: bold;
}
.popuplistItem:first-child {
	border-top:0px solid #EEE;
}
.popuplistItem:hover {
	background: #FDFDFD
}

.override-label-font-size .label {
	font-size: 100% !important;
}

.opacity_complete_pickup {
	opacity: 0.3
}
.opacity_complete_pickup:hover {
	opacity: 0.9
}

select optgroup {
	text-transform: uppercase;
}



/* ================ The Timeline ================ */

.timeline {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 1em 0;
  list-style-type: none;
}

.timeline:before {
  position: absolute;
  left: 50%;
  top: 0;
  content: " ";
  display: block;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: rgb(80, 80, 80);
  background: -moz-linear-gradient(
    top,
    rgba(80, 80, 80, 0) 0%,
    rgb(80, 80, 80) 8%,
    rgb(80, 80, 80) 92%,
    rgba(80, 80, 80, 0) 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, rgba(30, 87, 153, 1)),
    color-stop(100%, rgba(125, 185, 232, 1))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(80, 80, 80, 0) 0%,
    rgb(80, 80, 80) 8%,
    rgb(80, 80, 80) 92%,
    rgba(80, 80, 80, 0) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(80, 80, 80, 0) 0%,
    rgb(80, 80, 80) 8%,
    rgb(80, 80, 80) 92%,
    rgba(80, 80, 80, 0) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(80, 80, 80, 0) 0%,
    rgb(80, 80, 80) 8%,
    rgb(80, 80, 80) 92%,
    rgba(80, 80, 80, 0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(80, 80, 80, 0) 0%,
    rgb(80, 80, 80) 8%,
    rgb(80, 80, 80) 92%,
    rgba(80, 80, 80, 0) 100%
  );

  z-index: 5;
}

.timeline li {
  padding: 1em 0;
}

.timeline li:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.direction-l {
  position: relative;
  width: 46%;
  float: left;
  text-align: right;
}

.direction-r {
  position: relative;
  width: 46%;
  float: right;
}

.flag-wrapper {
  position: relative;
  display: inline-block;

  text-align: center;
}

.flag {
  position: relative;
  display: inline;
  background: rgb(248, 248, 248);
  padding: 6px 10px;
  border-radius: 5px;

  font-weight: 600;
  text-align: left;
}

.direction-l .flag {
  -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15),
    0 0 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}

.direction-r .flag {
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15),
    0 0 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}

.direction-l .flag:before,
.direction-r .flag:before {
  position: absolute;
  top: 50%;
  right: -40px;
  content: " ";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid rgb(255, 80, 80);
  z-index: 10;
}

.direction-r .flag:before {
  left: -40px;
}

.direction-l .flag:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-left-color: rgb(248, 248, 248);
  border-width: 8px;
  pointer-events: none;
}

.direction-r .flag:after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  height: 0;
  width: 0;
  margin-top: -8px;
  border: solid transparent;
  border-right-color: rgb(248, 248, 248);
  border-width: 8px;
  pointer-events: none;
}

.time-wrapper {
  display: inline;

  line-height: 1em;
  font-size: 0.66666em;
  color: rgb(250, 80, 80);
  vertical-align: middle;
}

.direction-l .time-wrapper {
  float: left;
}

.direction-r .time-wrapper {
  float: right;
}

.time {
  display: inline-block;
  padding: 4px 6px;
  background: rgb(248, 248, 248);
}

.desc {
  margin: 1em 0.75em 0 0;
  font-size: 0.77777em;
  font-style: italic;
  line-height: 1.5em;
}

.direction-r .desc {
  margin: 1em 0 0 0.75em;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {
  .timeline {
    width: 100%;
    padding: 4em 0 1em 0;
  }

  .timeline li {
    padding: 2em 0;
  }

  .direction-l,
  .direction-r {
    float: none;
    width: 100%;

    text-align: center;
  }

  .flag-wrapper {
    text-align: center;
  }

  .flag {
    background: rgb(255, 255, 255);
    z-index: 15;
  }

  .direction-l .flag:before,
  .direction-r .flag:before {
    position: absolute;
    top: -30px;
    left: 50%;
    content: " ";
    display: block;
    width: 12px;
    height: 12px;
    margin-left: -9px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255, 80, 80);
    z-index: 10;
  }

  .direction-l .flag:after,
  .direction-r .flag:after {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;
    height: 0;
    width: 0;
    margin-left: -8px;
    border: solid transparent;
    border-bottom-color: rgb(255, 255, 255);
    border-width: 8px;
    pointer-events: none;
  }

  .time-wrapper {
    display: block;
    position: relative;
    margin: 4px 0 0 0;
    z-index: 14;
  }

  .direction-l .time-wrapper {
    float: none;
  }

  .direction-r .time-wrapper {
    float: none;
  }

  .desc {
    position: relative;
    margin: 1em 0 0 0;
    padding: 1em;
    background: rgb(245, 245, 245);
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);

    z-index: 15;
  }

  .direction-l .desc,
  .direction-r .desc {
    position: relative;
    margin: 1em 1em 0 1em;
    padding: 1em;

    z-index: 15;
  }
}

@media screen and (min-width: 400px ?? max-width: 660px) {
  .direction-l .desc,
  .direction-r .desc {
    margin: 1em 4em 0 4em;
  }
}

/* ================ The Timeline End ================ */


.pickup_cancel_list_cls {
	list-style: none;
}
.pickup_cancel_list_cls li {
	float: left;
	margin:10px;
	padding: 30px
}
.pickup_cancel_list_cls li:hover  {
	background: #FAFAFA;
	cursor: pointer;
}

.inner-margin-10-cls .label {
	margin: 3px;
}


.header-toggle.bt-toggle-btn-holder {
	margin-top: 10px;
}
.bt-toggle-btn-holder .switch {
	  position: relative;
	  display: inline-block;
	  width: 60px;
	  height: 30px;
	}

.bt-toggle-btn-holder .switch input {display:none;}

.bt-toggle-btn-holder .slider {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #ccc;
	  -webkit-transition: .4s;
	  transition: .4s;
	}

.bt-toggle-btn-holder .slider:before {
	  position: absolute;
	  content: "";
	  height: 22px;
	  width: 22px;
	  left: 6px;
	  bottom: 4px;
	  background-color: white;
	  -webkit-transition: .4s;
	  transition: .4s;
	}

.bt-toggle-btn-holder input:checked + .slider {
	  background-color: #2196F3;
	}

.bt-toggle-btn-holder input:focus + .slider {
	  box-shadow: 0 0 1px #2196F3;
	}

.bt-toggle-btn-holder input:checked + .slider:before {
	  -webkit-transform: translateX(26px);
	  -ms-transform: translateX(26px);
	  transform: translateX(26px);
	}

	/* Rounded sliders */
.bt-toggle-btn-holder .slider.round {
	  border-radius: 34px;
	}

.bt-toggle-btn-holder .slider.round:before {
	  border-radius: 50%;
	}

.headerHierarchyDropdownHolder {
 	margin-top: 10px;
 	margin-right: 10px;
}

.bt-logo-flag {
	position: relative;
}
.bt-logo-flag-txt {
	position: absolute;
    top: -40px;
    left: 50px;
    color: yellow;
    background: #000;
    border-radius: 22px;
    padding: 5px;
    line-height: 20px;
    font-size: 20px;
    text-transform: uppercase;
}
.qrcodes_holder {

}
.qrcode_title {
	font-size: 14px;
	color: green;
	text-align: center;
}
.qrcodes_holder .qrcodes_item_wrapper {
	margin: 5px;
	float: left;
}
.qrcodes_holder .qrcodes_item {
	background:#FDFDFD;
	border: 1px solid #EEE;
	width: 180px;
	height: 180px;
	opacity: 1;
	text-align: center;
}
.qrcodes_holder .qrcodes_item img {
	height: 100%;
	width: 100%
}
.qrcodes_holder .qrcodes_item:hover {
	border: 1px solid #DDD;
}
.qrcodes_holder .qrcodes_item.disabled .qrcode_title {
	color: red;
}
.qrcodes_holder .qrcodes_item.disabled,.qrcodes_holder .qrcodes_item.disabled:hover {
	opacity: 0.4 !important;
}

.in-nav-list-holder a {
	margin: 0px 2px;
}

.message-box {
	background: #F1F1F1;
	max-height: 700px;
	min-height: 300px;
	overflow: auto;
}
.message-box-item {
  width: 40%;
  min-width: 300px;
  border-radius: 6px;
  padding: 5px;
  margin-top: 8px;
  margin-bottom: 8px;
  box-shadow: 0 0 10px #BBB;
}
.message-header {
    font-size: 16px;
    font-weight: bold;
    color: #AAA;
    line-height: 20px;
    margin-bottom: 5px;
}
.message-body {
	font-size: 14px;
	color: #333333;
}
.message-time {
	font-size: 12px;
	color: #666;
	font-weight: normal !important;
}

.padding-10  {
	padding: 10px;
}

.message-image-item {
  width: 100%;
  margin-bottom: 2px;
  border: 1px solid #FFFFFF;
}
.message-image-item:hover {
  /* border-color: #0f9aee; */
}
.message-image-item img {
  max-width: 100%;
}

.mt-10 {
	margin-top: 10px;
}

.badge-danger{
	background-color: #f05050 !important;
}

/*custom calender styles*/
span.fc-title{
	line-height: 2.3 !important;
}

.fc-content {
	background-color: #14715f !important;
	border:1px solid #14715f !important;
}

.message-image-item-footer {
	margin: 10px 10px 0px 20px;
}

.message-image-item-action{
	font-size: 20px;
	margin-left: 10px;
}