
	:root {
		--border-radius: 6px;
		--main-color: rgb( 13, 112, 183 );
		--sub-color: #26AB36;  
  	}
	  
	* { 
		box-sizing: border-box; 
		overflow-wrap: break-word;			
	}	
	
 	html, body, h1, h2, h3, h4 { 
		margin: 0;
		padding: 0;
		border: 0; 
	}
	
	body { 		
		font-size: 16px; 
		font-family: "Open Sans";
		background: #fff;		
		color: #444;	
	}	

	html, body, .main {
		height: 100%;
	} 

	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}
	  
	.scrollbar-hide {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	
	/* */

	.flex-100 {
		flex: 100% 0 0;
	}	

	/* screens - screen */

	.header-back {
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background: #fff;
		box-shadow: 0 10px 10px 0 rgb(255, 255, 255);
	}

	.account-company-ety-screen {
		height: 100%;
	}

	.account-company-ety-screen.menu-open {		
		top: 52px;
		left: 90px;
		bottom: 0;
		z-index: 9999;
	}

	.account-company-ety-screen .progress-cols {		
		display: flex;
		height: 100%;			
		align-items: stretch;		
		overflow: hidden;
	}

	.account-company-ety-screen .progress-cols > .col {
		overflow-y: hidden;		
		transition: all .3s;		
	}

	.account-company-ety-screen .progress-cols > .col > .inr {
		height: 100%;			
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .title,
	.account-company-ety-screen .progress-cols > .progress-col-open > .title {
		background: #fff;
		box-shadow: 0 2px 10px 0 rgba( 34, 41, 47, .1 );
		border-radius: var(--border-radius);
		font-weight: 600;
		color: var(--main-color);
		text-align: center;
		padding: 10px;
		white-space: nowrap;
		position: relative;
		z-index: 99999;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .title {
		margin: 10px 10px 0 10px;
	}
		
	.account-company-ety-screen .progress-cols > .col > .inr > .items {		
		height: calc( 100% - 52px );
		overflow-y: auto;
		padding: 0 10px 10px 10px;
		display: flex;
  		flex-wrap: wrap;
		align-items: flex-start;
		align-content: flex-start;
	}

	.account-company-ety-screen .progress-cols > .progress-col-open {
		padding: 0 10px;
		display: flex;
		justify-content: stretch;
		flex: 60px 0 0;
		cursor: pointer;			
	}
	
	.account-company-ety-screen .progress-cols > .progress-col-open > .title {
		flex: 100% 0 0;
		display: flex;
		align-items: center;
		border-radius: 0;
	}

	.account-company-ety-screen .progress-cols > .progress-col-open > .title > .inr {
		flex: 300px 0 0;
		transform: rotate(-90deg);
		margin: 0 0 0 -140px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.account-company-ety-screen .progress-cols > .progress-col-open > .title > .inr::before {
		content: "\f106";
		font-family: FontAwesome;
		display: inline-block;
		font-size: 30px;
		line-height: 1;		
		font-weight: normal;
		transition: all .4s;
		padding: 0 10px;
	}

	.account-company-ety-screen .progress-cols > .progress-col-open.open > .title > .inr::before {
		transform: rotate(180deg);
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order {
		padding: 20px 0 0 0;
		display: flex;
		flex-wrap: wrap;
		word-break: break-word;
		flex-grow: 1;
		order: 100;
		flex: 100% 0 0;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top {
		flex: 100% 0 0;
		display: flex;
		justify-content: space-between;		
		background: #fff;
		box-shadow: 0 2px 10px 0 rgba( 34, 41, 47, .1 );
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		color: #fff;
		align-items: center;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top > * {
		padding: 5px 10px;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top > .time {
		text-align: center;
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top > .time > div {
		font-size: 12px;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top > .source {
		padding: 5px 10px 0 10px;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top > .no {
		text-align: right;
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top > .source,
	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .top > .no {
		width: 60px;
		min-width: 60px;
		flex: 60px 0 0;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items {		
		flex: 100% 0 0;		
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .info {		
		margin: 5px 0 0 0;
		background: #fff;
		box-shadow: 0 2px 10px 0 rgba( 34, 41, 47, .1 );		
		font-size: 12px;
		padding: 5px 10px;
		font-style: italic;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .info > .title {		
		padding: 0 0 3px 0;
		font-weight: 600;
		color: #777;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item {		
		margin: 5px 0 0 0;	
		background: #fff;
		box-shadow: 0 2px 10px 0 rgba( 34, 41, 47, .1 );	
		display: flex;			
	}
	
	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .move {
		flex: 40px 0 0;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba( 13, 112, 183, 0.4 );		
		font-size: 24px;
		color: #fff;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .move-right {
		background: rgba( 38, 171, 54, 0.5 );
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .move::before {
		content: "\f104";
		font-family: FontAwesome;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .move-right::before {
		content: "\f105"; 
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .move.off {
		cursor: auto;
		background: #ccc;			
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .center {
		flex-grow: 1;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .center > .title {
		font-weight: 600;
		padding: 5px 5px 0 5px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .center > .title > .to-go {
		display: inline-block;		
		width: 22px;
		height: 22px;		
		border-radius: 100px;
		border: 1px solid var(--main-color);
		padding: 1px 0 0 5px;
		margin: 0 5px 0 0;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .center > .title > .to-go img {		
		width: 10px;
	}










	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .center > .description {		
		padding: 0 5px 5px 5px;
		font-size: 13px;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .center > .info {					
		font-size: 12px;
		padding: 5px 5px;
		font-style: italic;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item > .center > .info > .title {		
		padding: 0 0 3px 0;
		font-weight: 600;
		color: #777;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other {
		margin: 5px 0 0 0;	
		background: #fff;
		box-shadow: 0 2px 10px 0 rgba( 34, 41, 47, .1 );				
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item {
		display: flex;			
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item > .status {
		flex: 40px 0 0;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 5px 0 0 0;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item > .status::before {
		content: "\f00c";
		font-family: FontAwesome;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		width: 22px;
		height: 22px;
		color: var(--sub-color);
		border-radius: 100px;
		border: 1px solid var(--sub-color);
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item > .status.wait::before {
		content: "\f252";	
		font-size: 13px;
		padding: 0 0 0 2px;
		color: rgba( 13, 112, 183, 0.4 );
		border-color: rgba( 13, 112, 183, 0.4 );	
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item > .status.off::before {
		content: unset;			
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item > .content {
		flex-grow: 1;
		font-style: italic;
		color: #777;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item > .content > .title {
		font-weight: 600;
		padding: 5px 5px 0 5px;
		font-size: 13px;		
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .items > .item-other > .item > .content > .description {		
		padding: 0 5px 5px 5px;
		font-size: 12px;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move > .items {		
		flex: calc( 100% - 45px ) 0 0;		
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move > .move-all {		
		flex: 40px 0 0;	
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba( 13, 112, 183, 0.4 );
		font-size: 24px;
		color: #fff;
		margin: 5px 5px 0 0;			
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move > .move-all::before {
		content: "\f104";
		font-family: FontAwesome;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move > .move-all-right {		
		margin: 5px 0 0 5px;	
		background: rgba( 38, 171, 54, 0.5 );		
	}
	
	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move > .move-all-right::before {
		content: "\f105";		
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move-left > .items {		
		flex: calc( 100% - 45px ) 0 0;		
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move-right > .items {		
		flex: calc( 100% - 45px ) 0 0;		
	}	

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move-left.order-move-right > .items {		
		flex: calc( 100% - 90px ) 0 0;		
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move-left > .items > .item > .move-left {
		display: none;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order.order-move-right > .items > .item > .move-right {
		display: none;
	}

	.account-company-ety-screen .progress-cols > .col > .inr > .items > .order > .move-all.off {		
		cursor: auto;
		background: #ccc;			
	}

	/* screens - screen - pickup */

	.account-company-ety-screen-pickup {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: #f8f8f8;
		z-index: 99999;
		transition: all .2s;
		display: flex;
		justify-content: stretch;
	}

	.account-company-ety-screen-pickup .progress-cols { 	
		flex: 100% 0 0;
		display: flex;
		padding: 10px;	
	}

	.account-company-ety-screen-pickup .progress-cols > .col { 	
		flex: 50% 0 0;			
	}

	.account-company-ety-screen-pickup .progress-cols > .col > .inr { 	
		padding: 10px;
	}

	.account-company-ety-screen-pickup .progress-cols > .col > .inr > .title { 	
		background: rgb( 206, 193, 177 );
		box-shadow: 0 2px 10px 0 rgba( 34, 41, 47, .1 );
		border-radius: var(--border-radius);
		font-weight: 600;
		font-size: 20px;
		color: #fff;
		text-align: center;
		padding: 10px;
		white-space: nowrap;	
	}

	.account-company-ety-screen-pickup .progress-cols > .col.col-80 > .inr > .title { 	
		background: #07354c;
	}	

	.account-company-ety-screen-pickup .progress-cols > .col > .inr > .items { 	
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10px;
		padding: 10px 0;
	}

	.account-company-ety-screen-pickup .progress-cols > .col > .inr > .items > .item { 	
		padding: 10px;
	}

	.account-company-ety-screen-pickup .progress-cols > .col > .inr > .items > .item > .inr { 	
		background: #fff;
		box-shadow: 0 2px 10px 0 rgba( 34, 41, 47, .1 );
		border-radius: var(--border-radius);
		font-weight: 600;
		color: #333;
		text-align: center;
		padding: 6px 10px;
		white-space: nowrap;
		font-size: 30px;	  
	}

	/* form */

	.label,
	label {
		padding: 10px;	
		display: block;	
	}

	.label .title,
	label .title {
		padding: 0 0 5px 0;
		font-size: 15px;			
	}

	.label.text .input-con,
	label.text .input-con {
		position: relative;		
	}
	
	/* form - slider  */	

	label.slider .slider-con {
		border: 0;	
		margin: 0 -1px;	
	}

	label.slider .ui-state-default, 
	label.slider .ui-widget-content .ui-state-default {
		border: 0 !important;
		outline: 0 !important;
		background: var(--main-color);
		border-radius: 100px;
		width: 20px;
		height: 20px;
		top: -4px;		
	}
	
	label.slider .input-con {
		border-radius: 100px;
		border: 1px solid #c5c5c5;
		padding: 0 10px;
		margin: 10px 0 0 0;
		position: relative;
	}

		/* form - checkbox text */

	.label.checkbox-text,
	label.checkbox-text {
		cursor: pointer;				
	}	

	.label.checkbox-text > .inr,
	label.checkbox-text > .inr {
		display: flex;
		align-items: flex-start;		
	}

	.label.checkbox-text .check,
	label.checkbox-text .check {
		background: #ddd;
		border-radius: var(--border-radius);
		min-width: 20px;
		height: 20px;
		position: relative;
		margin: 2px 12px 0 0;
	}

	.label.checkbox-text.active .check::before,
	label.checkbox-text.active .check::before {
		position: absolute;
		top: -5px;
		left: 4px;
		content: "\f00c";
		font-family: FontAwesome;
		display: block;
		color: var(--main-color);
		font-size: 24px;
		line-height: 24px;
	}

	.label.checkbox-text .text,
	label.checkbox-text .text {
		font-size: 15px;
		line-height: 22px;
	}

	/* form - checkbox text - title */

	label.checkbox-text.checkbox-text-title > .inr {
		display: block;				
	}

	label.checkbox-text.checkbox-text-title .check-con {
		display: flex;	
		padding: 10px 0 0 0;			
	}

	/* form - select  */

	label.select .input-con select {
		border: 2px solid #ddd;
		border-radius: var(--border-radius);
		font-size: 15px;
		height: 44px;
		width: 100%;
		padding: 0 10px;
		background: #fff;
	}

	/* form */

	label.textarea .input-con textarea, 
	label.select .input-con select, 
	.label.text .input-con input, 
	label.text .input-con input {
		border: 2px solid #ddd;
		background: #ddd;
	}
