@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: #D84141}

.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: #1e4b2b
	}

	#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: #1e4b2b;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 #b73131,
	    60px 50px 0 70px #b73131,
	    90px 90px 0 50px #b73131,
	    250px 250px 0 50px #b73131,
	    290px 320px 0 50px #b73131,
	    320px 400px 0 50px #b73131
	    ;
	  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 #b73131,
	    -20px 0 0 20px #b73131,
	    -90px 0 0 50px #b73131,
	    250px 0 0 50px #b73131,
	    290px 0 0 50px #b73131,
	    620px 0 0 50px #b73131;
	  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: #d84141 !important;
        color:#FFF !important;
    }

    .nav-pills > li.active > a:hover {
        background-color: #c33838 !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:#d84141;
	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; }