.managementx						{ position: relative; width: 100%; height: calc(100% - 24px); background-color:#d6e4ec; overflow-y: scroll;}

.managementx .column				{ overflow-y: auto; overflow-x: hidden }
.managementx .column .title 		{ display: block; height: 40px; line-height: 40px; color: #eee; background-color: #3c92ca; border-top: 1px solid #666; text-align: center; }

.managementx .client				{ font-family: 'Cabin Condensed', sans-serif; padding: 4px; }

.managementx .column .title[collapse="y"]	{ background-image: url(../images/svg/arrow_down.svg); }
.managementx .column .title		    	{ background-image: url(../images/svg/arrow_right.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }

.managementx .projectEmpty				{ position: relative; display:block;width:100%;height:60px;line-height:60px; }

.managementx .projectNew				{ position: relative;font-family: 'Cabin Condensed', sans-serif;font-size: 110%; padding: 4px 4px 3px; border-bottom: 1px solid #bbb; cursor: pointer; z-index: 10;line-height: 46px;height: 46px; }
.managementx .projectNew			    { color: #fff;background-color: #3c92ca; }

.managementx .projectNew #newproject	{ position: absolute;display: inline-block;top:3px;left:6px;height: 48px;width: calc(100% - 126px);border: 0;font-size: 115%;vertical-align: top;color:#fff; }
.managementx .projectNew #newproject::placeholder	{ color:#dfdfdf;opacity:1; }
.managementx .projectNew #btnIconCancel	{ position: absolute;display: inline-block;top: 6px;right:54px;width:50px;height: 40px; }
.managementx .projectNew #btnIconSave	{ position: absolute;display: inline-block;top: 6px;right: 4px;width:50px;height: 40px; }

.managementx .project						{ position: relative; font-family: 'Cabin Condensed', sans-serif; font-size: 110%; padding: 4px 4px 3px; border-bottom: 1px solid #bbb; cursor: pointer; z-index: 10; }
.managementx .project[data-totaltasks="0"]	.badge-inrow { display:none!important; }

.managementx .project[collapse="y"] { background-image: url(../images/svg/arrow_down.svg); }
.managementx .project			    { color: #000; background-image: url(../images/svg/arrow_right.svg); background-repeat: no-repeat; background-position: right 20px center; background-size: 16px; }
.managementx .project .item			{ display: inline-block; line-height: 46px; padding-left:6px; }

.managementx .project_container [type="note"] { background-color:#d4d4d4; }
.managementx .project_container [type="note"]:hover	{ background-color: #a4a4a4; color: #fafafa; }

.managementx .project_container [type="task"] .step	{ background-color:#ebebeb; }
.managementx .project_container [type="task"] .step:hover	{ background-color: #bbbbbb; color: #fafafa; }
.managementx .project_container [type="task"][data-badge="0"]	{ display: none; }
.managementx .project_container [type="task"]:not([data-badge="0"]) { display: block; }

.managementx .project .badge-inrow,
.managementx .step .badge-inrow  	  { position: absolute; right: 72px; font-size:160%; top:10px; border-color: #bbb; }
.managementx .project .badge-inrow_wait,
.managementx .step .badge-inrow_wait  { right:110px; z-index: 5; }
.managementx .project .badge-inrow_wait[data-badge]:after,
.managementx .step .badge-inrow_wait[data-badge]:after { background-color: #8e8e8e; }

.managementx .project .badge-inrow_work,
.managementx .step .badge-inrow_work  { z-index: 1; }
.managementx .project .badge-inrow_work[data-badge]:after,
.managementx .step .badge-inrow_work[data-badge]:after { background-color: #358e35; }

.managementx .step[step="3"] .badge-inrow_wait[data-badge]:after { background-color: #a29270;}
.managementx .step[step="3"] .badge-inrow_work[data-badge]:after { background-color: #dc9506;}

.badge-inrow[data-badge]:after { height:28px!important; line-height:28px!important; }

.managementx .step[collapse="y"] { background-image: url(../images/svg/arrow_down.svg); }
.managementx .step				 { position: relative; display:block; width: 100%; height: 50px; background-image: url(../images/svg/arrow_right.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; border-bottom: 1px solid #bbb; cursor: pointer; }
.managementx .step .title		 { position:absolute;display:inline-block;top:0;left:0;width: calc(100% - 130px); height: 100%; text-align: right; padding: 4px; box-sizing: border-box; line-height: 42px; cursor: pointer; }
.managementx .step .icon		 { position:relative;display: inline-block;padding: 6px;height: 100%;width: 42px;background-size: 30px!important;box-sizing: border-box; }

.managementx .task 					{ position: relative; display: block; margin: 2px 0px 4px 0px; padding-right: 1px; border-bottom: 1px solid #bbb; box-sizing: border-box; background-color: #fefefe; }

#uixTab .tab-page .header,
#uixTab .tab-page .footer,
#uixTab .tab-page .footer .uixButton,
#uixTab .tab-page .footer .uixButton #label { height: 50px!important; line-height:50px!important; }

#tab-management .addProjectBtn		{ position: absolute; bottom: 26px; right: 24px; width: 46px; height: 46px; border-radius: 50%; text-align: center;background:url(/images/svg/addCircle.svg) no-repeat center; background-size:46px; background-color: #fff; z-index:1000; cursor:pointer; }

.managementx img.menupoints	{ display:inline-block;height:24px;border:0;padding:14px 0; }
.managementx div.menuPoints	{ position:absolute;top:0;right:0;width:46px;height:50px;text-align:center;cursor:pointer; }

.managementx_priorityLegend	{ position:absolute; display:block; width:100%; height:20px; bottom: 0; left:0; border-top: 1px solid #bbb; background-color: #ebebeb; }
.managementx_priorityLegend .priorityBox		{ position:relative; display:inline-block; font-size: 85%; line-height: 22px; width:calc(16.6% - 4px); height:100%; text-align: right; padding-right: 4px; box-sizing: border-box; overflow: hidden;}

.managementx_priorityLegend .priority_0, .managementx .priority_0		{ margin-right: 4px; border-right: 8px solid #000; }
.managementx_priorityLegend .priority_1, .managementx .priority_1		{ margin-right: 4px; border-right: 8px solid #d7091d; }
.managementx_priorityLegend .priority_2, .managementx .priority_2		{ margin-right: 4px; border-right: 8px solid #ffaf00; }
.managementx_priorityLegend .priority_3, .managementx .priority_3		{ margin-right: 4px; border-right: 8px solid #2d66cf; }
.managementx_priorityLegend .priority_4, .managementx .priority_4		{ margin-right: 4px; border-right: 8px solid #0b9c2b; }
.managementx_priorityLegend .priority_5, .managementx .priority_5		{ margin-right: 4px; border-right: 8px solid #30e276; }

.managementx #data					{ position: relative; display: inline-block; width: 100%;height: 54px; }

.managementx #data #work			{ position: absolute;display: inline-block;top:25px;left:0;padding-left:12px;width: calc(100% - 76px);height: 25px;line-height:25px;font-size: 115%;cursor: pointer; }

.managementx .project_container .notex .title .name,
.managementx #data #work .name 		{ padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.managementx #data #work .company   { position: relative; display:none; left: 7px; top: 11px; color: #666; line-height: 20px; }
.managementx #data #work #task      { line-height: 20px; }

.managementx  #collaborate   		  		{ position: absolute;display: inline-block;top:0;right:14px;width:84px;height:100%;line-height:25px;}

.managementx  #collaborate .users	  		{ position: absolute;top: 0;left: 4px;display: inline-block;height:auto;padding-top:13px; }
.managementx  #collaborate .users .icon		{ width: 20px; height: 30px; border: 0; vertical-align: middle; padding-left: 4px; cursor: pointer; }

.managementx  #collaborate #time 			{ position: absolute;display: inline-block;top: 0;right: 0;height: 100%;width: 44px;line-height: 25px; }
.managementx  #collaborate #time #startpause  { }
.managementx  #collaborate #time .curr  			{ display: inline-block; width: 44px; text-align:center; height: 25px; }
.managementx  #collaborate #time .playpause			{ display: inline-block; width: 44px; text-align:center; height: 25px; vertical-align:top; cursor: pointer; }
.managementx  #collaborate #time .playpause .icon	{ width: 12px; height: 12px; border: 0; padding-top: 9px; }

.managementx #data #state						{ position:absolute;display: inline-block;top:0;right:2px;height:100%;width: 4px; }
.managementx #data .progress					{ position:absolute;display: inline-block;top:0px;left:0;padding:4px 0 4px 4px; height: 19px; width: calc(100% - 84px);cursor: pointer; }
.managementx #data .progress span				{ float: left; text-overflow: ellipsis; width: 74px; white-space: nowrap; overflow: hidden; display: block; text-align: center; }
.managementx #data .progress .level_1   		{ border-color: #cc1212; color: #222; }
.managementx #breadcrumb #step_state .level_1	{ background-color: #cc1212; color: #fafafa; width: 78px; display: inline-block; text-align: center; font-weight: normal; }
.managementx #data .progress .level_3			{ border-color: #1bb9ca; color: #222; }
.managementx #breadcrumb #step_state .level_3	{ background-color: #1bb9ca; color: #fafafa; width: 78px; display: inline-block; text-align: center; font-weight: normal; }
.managementx #data .progress .level_5			{ border-color: #4d4dad; color: #222; }
.managementx #breadcrumb #step_state .level_5	{ background-color: #4d4dad; color: #fafafa; width: 78px; display: inline-block; text-align: center; font-weight: normal; }
.managementx #data .progress .level_7			{ border-color: #358e35; color: #222; }
.managementx #breadcrumb #step_state .level_7	{ background-color: #358e35; color: #fafafa; width: 78px; display: inline-block; text-align: center; font-weight: normal; }
.managementx #data .progress .level_9			{ border-color: #fff; color: #222; }
.managementx #breadcrumb #step_state .level_9	{ background-color: #fff; color: #fafafa; width: 78px; display: inline-block; text-align: center; font-weight: normal; }

.managementx #data #state #box 				{ height: 30px; line-height: 30px; }
.managementx #data #state #box .icon		{ display: inline-block; padding: 0 6px; height: 30px; width: 30px; background-size: 30px!important;}
.managementx #data #state #box .icon:first-child { padding-left: 0; }
.managementx #data #state #box .icon:last-child	 { padding-right: 0; }

.managementx .action 					{ position: relative; display: block; border-top: 1px solid #ddd; border-bottom: 2px solid #3c92ca; height: 30px; line-height: 30px; background-color:#ebebeb; }
.managementx .task .action				{ border-bottom: 0; }
.managementx .action .btn 				{ float: left; display: block; text-align: center; border-right: 1px solid #ddd; width: calc(25% - 1px); cursor: pointer; }
.managementx .action .btn:hover			{ background-color: #bbb; color: #fafafa; }
.managementx .action .btn:last-child	{ border: 0; }

.managementx#managementx						    { position: relative; display: block; height: 100%; width: 100%; }

.managementx#managementx #breadcrumb			    	  { text-align: left; padding: 0 6px; }
.managementx#managementx #breadcrumb #path 	    		  { position:absolute; top:0; height:50px; left:6px;  width:min-content; text-align: left; overflow: hidden; white-space: nowrap; color:000; font-size:18px; }
.managementx#managementx #breadcrumb input 	    		  { font-size:18px!important; }
.managementx#managementx #breadcrumb #path .projectRef	  { font-size:15px;font-weight:bold; }
.managementx#managementx #breadcrumb #details			  { position:absolute; top:0; height:50px; right:6px; width:300px; text-align: right; font-weight: bold; overflow: hidden; white-space: nowrap; }
#tab-new .managementx#managementx #breadcrumb #details #step_state 	  { display:none!important; }
.managementx#managementx #breadcrumb #details #step_state 	  { float: right; height: 27px; }
.managementx#managementx #breadcrumb #details .icon 	  { height: 20px; width: 20px; padding:13px 2px 0 10px; }

.managementx#managementx #controls #deadlinebox	  				{ float:right;display:inline-block;line-height: 20px;width: 170px;padding:4px;}
.managementx#managementx #controls #deadlinebox #deadline_text	{ font-size:120%; display:block; }
.managementx#managementx #controls .icon 	  					{ height: 32px; width: 32px; padding:3px 20px 0 10px; }

#tab-new .managementx								{ overflow-y:hidden;}
.managementx#managementx #contents					{ background-color: #fff; height: calc(100% - 102px); overflow-y: scroll;}
.managementx#managementx #contents textarea#taskdescription,
.managementx#managementx #contents #taskdescription.ql-container	{ height:calc(100% - 184px)!important; }

.managementx#managementx #contents #page			{ padding: 8px 8px 0 8px; }
.managementx#managementx #contents #timings			{ display: block; width: 100%; position: relative; border-top: 1px solid #ddd; padding-top: 8px; }
.managementx#managementx #contents .tags			{ float: left; position: relative; width: calc(100% - 225px);padding-left:5px;box-sizing:border-box;font-size:90% }
.managementx#managementx #contents .tags i			{ border:2px solid #000; background-color:#000; color:#fff;border-radius: 20px;padding: 2px 8px 3px;line-height: 30px;height: 30px;box-sizing: border-box; margin: 0 4px;}
.managementx#managementx #contents .consumedtime	{ float: right; position: relative; width:220px; text-align:right;box-sizing:border-box;padding-right:5px; }
.managementx#managementx #controls .requiredtime	{ float: right; position: relative; width:120px; text-align:center;box-sizing:border-box;padding:4px;line-height:20px; }
.managementx#managementx #controls .requiredtime span { font-weight:bold;font-size:120%; }
.managementx#managementx #contents #newtodo 				{ display: block;width: 100%;white-space: nowrap; }
.managementx#managementx #contents #newtodo .descriptionRow	{ display: inline-block; width: calc(100% - 214px);height:56px;vertical-align:top; }
.managementx#managementx #contents #newtodo #description	{ height:54px; }
.managementx#managementx #contents #newtodo #priority	{ display: inline-block; width: 60px; text-align: center; float:right; }
.managementx#managementx #contents #newtodo #priority #priorityText	{ display: inline-block; font-weight: normal;height: 56px;line-height: 56px; cursor:pointer; }

.managementx #contents #menuTask					{ position: absolute;top:100px;right:16px;min-width: 150px;height:fit-content;box-sizing:border-box;text-align: right;z-index: 10000;color: #000;list-style-type: none;margin:0;padding:0; background-color:#ebebeb;font-weight: normal;white-space:nowrap;}
.managementx #contents #menuTask li					{ padding:0 8px; line-height: 48px; cursor:pointer; }
.managementx #contents #menuTask li.off,
.managementx #contents #menuTask li ul li.off		{ cursor:default!important;color:#ababab; }
.managementx #contents #menuTask li:hover			{ background-color:#609ecc; }
.managementx #contents #menuTask li.off:hover,
.managementx #contents #menuTask li ul li.off:hover	{ background-color:transparent!important; }

.managementx #contents #menuTaskPriority 		{ position: absolute;right: 130px;min-width: 150px;height: fit-content;box-sizing: border-box;text-align: right;z-index: 10000;color: rgb(0, 0, 0);list-style-type: none;margin: -48px 0px 0px;padding: 0px;background-color: rgb(235, 235, 235);font-weight: normal;white-space: nowrap; }

.managementx #contents #titleTask 	{ position:relative; display: block;width: 100%; padding:0 6px; box-sizing: border-box;font-size: 120%;background-color:#ebebeb; }
.managementx #contents #titleTask .users	{ position: absolute;top: 12px;right: 63px;height:28px;width:28px; }
.managementx #contents #titleTask .label	{ position:relative;display:inline-block;width:calc(100% - 175px);height:50px;line-height:50px;font-weight: bold;font-size:125%; }


.managementx #todo .title	{ position:relative;display:block;background-color:#3C92D0;color:#fff;text-align:center;font-weight:bold;line-height:46px; }
.managementx #todo #menuToDo			{ position: absolute;top: 46px;right: 0px;width: 150px;height:fit-content;box-sizing:border-box;text-align: right;z-index: 10000;color: #fff;list-style-type: none;margin:0;padding:0; background-color:#3C92D0;font-weight: normal;}
.managementx #todo #menuToDo li			{ padding-right:8px; line-height: 48px; cursor:pointer; }
.managementx #todo #menuToDo li:hover	{ background-color:#609ecc; }

.managementx #todo #addtodo { position: relative; display: block; background: #f4f4f4; height: 54px; line-height: 54px; width: 100%; font-size: 90%; }
.managementx #todo #addtodo textarea { height: 54px; resize: none; }
.managementx #todo #addtodo .uixButton { float: right; }
.managementx #todo .checkbox-item	 { float:left; width:50px; height:50px; padding: 13px 0 0 13px; box-sizing:border-box; }
.managementx #todo .checkbox-itemOff { cursor:default!important; }

.managementx #todo #todo-item 							{ position: relative; display: table; border-bottom: 2px solid #f4f4f4; min-height:50px; line-height:50px; width: calc(100% - 8px);font-size: 110%; }
.managementx #todo #todo-item .id						{ float: left; display: inline-block; width: 25px; text-align: right; padding: 0 4px 0 8px; border-right: 1px solid #f0f0f0; }
.managementx #todo #todo-item .description 				{ float: left; display: inline-block; width: calc(100% - 140px); text-decoration: none;}
.managementx #todo #todo-item .priority 				{ display: inline-block; width: 30px; text-align: right; }
.managementx #todo #todo-item.checked			 		{ background-color: #f8f8f8; display: none }
.managementx #todo #todo-item.checked .description 		{ font-style: italic; font-size: 85%; }

.managementx#managementx #contents .trumbowyg-box.trumbowyg-editor-visible { min-height: 100px; }
.managementx#managementx #contents .trumbowyg-editor { min-height: 100px; }
.managementx#managementx #contents .ql-toolbar.ql-snow+.ql-container.ql-snow { border:0!important; }

.managementx .project_container .notex						{ position: relative; display: none }
.managementx .project_container .notex .title 				{ background-color: #fff; color: #222;height: 40px; line-height: 40px; cursor: pointer; }
.managementx .project_container .notex .title .name 		{ line-height: 40px; margin-left: 0px; width: calc(100% - 30px); display: inline-block; background-position-y: 13px !important; }
.managementx .project_container .notex .noteBox 			{ display: none; width: 100%; height: 300px; border-top: 1px solid #bbb; }
.managementx .project_container .notex .noteBox textarea 	{ position: relative; display: block; height: 100%; width: 100%; padding: 7px; direction: rtl; text-align: left; background-color:#f6fcff; font-size: 100%; resize: none; }