ONE PIECE HACKING

Ngiler SH3LL 360
: / home / tbf / curs.tbf.ro / src / scss /

Information Server
MySQL : OFF Perl : OFF CURL : ON WGET : OFF PKEXEC : OFF

Directive	Local Value
IP Address	89.40.16.97
System	Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User	tbf
PHP Version	7.3.33
Software	Apache
Doc root	Writable

Edit File : _master_goal_chart.scss \| Size : 22.80 KB
.scrollable-chart { overflow: scroll; height: calc(100vh - 100px); cursor: default; text-align: center; padding: 30px; &:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: grabbing; } } .tree-page{ height: 100vh; overflow: hidden; .center-box{ background: #FFF; display: inline-flex; justify-content: center; align-items: center; min-height: 100%; margin: 0 auto; .organigram-tbf{ transform-origin: top left; width: 100%; min-width: 100%; } } .tree-actions{ padding: 30px 30px; height: 100px; z-index: 9; display: flex; align-items: center; opacity: 1; background: #FFF; border-bottom: 1px solid $borderColor; .left-part{ display: flex; width: 150px; } .center-part{ flex: 1; padding: 0 15px; display: flex; align-items: center; justify-content: center; .text{ font-size: 14px; font-weight: 700; color: $primary; } } .right-part{ display: flex; justify-content: flex-end; width: 150px; } .tree-action-btn{ height: 36px; padding: 0 10px; display: flex; align-items: center; margin-right: 10px; font-size: 12px; color: $primary; font-weight: 500; cursor: pointer; &.sdb-details{ width: 36px; padding: 0; justify-content: center; img{ width: 20px; height: auto; } } } .back-button{ margin-left: auto; z-index: 9; .close-btn{ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; .icon-close{ transform: rotate(45deg); .stroke-color{ stroke: $primary; } } } } #btnExport{ transition: all 0.2s ease; position: relative; overflow: hidden; &.loading{ background-color: #0060c3; border: 1px solid #0060c3; &:hover{ background-color: #0060c3; border: 1px solid #0060c3; } .text{ color: #FFF; &:hover{ color: #FFF; } } } &.completed{ box-shadow: 0 1px 4px 0 rgba(11, 203, 106, 0.3); border: solid 1px #03ae58; background-color: rgba(11, 203, 106, 0.75); .loader{ display: none; } .text{ color: #FFF; &:hover{ color: #FFF; } } &:hover{ box-shadow: 0 1px 4px 0 rgba(11, 203, 106, 0.3); border: solid 1px #03ae58; background-color: rgba(11, 203, 106, 0.75); } } &.error{ box-shadow: 0 1px 3px 0 rgba(235, 27, 104, 0.2); border: solid 1px $pinkRed; background-color: #ff99be; .loader{ display: none; } &:hover{ box-shadow: 0 1px 3px 0 rgba(235, 27, 104, 0.2); border: solid 1px $pinkRed; background-color: #ff99be; } } &:disabled{ cursor: not-allowed; } .text{ text-align: left; z-index: 2; width: 100%; position: relative; } .loader{ position: absolute; top: 0; left: 0; bottom: 0; width: 0; background-color: #6bb3ff; border-top-right-radius: 10px; border-bottom-right-radius: 10px; z-index: 1; &.onProgress{ transition: width 5s linear; width: 90%; } &.finish{ width: 100%; transition: width 0.3s ease; } } } .settings-org{ .dropdown-menu{ margin-top: 5px; padding: 0; overflow: hidden; min-width: fit-content; box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821); border: 1px solid $borderColor; border-radius: 4px; .dropdown-item{ padding: 10px 20px; font-size: 13px; font-family: 'Roboto'; color: $primary; &:hover{ background-color: rgba(0, 112, 224, 0.05); } &:focus{ outline: none; } &:active{ background-color: #f8f9fa; } } } } .btns-zoom{ display: flex; align-items: center; border: 1px solid $borderCard; border-radius: 10px; background-color: #fcfcfc; height: 36px; margin-right: 10px; &.mr-0{ margin-right: 0; } .zoom-minus, .zoom-plus{ width: 35px; text-align: center; cursor: pointer; img{ width: 15px; height: auto; } &.disabled{ opacity: 0.3; cursor: not-allowed; } } .zoom-plus{ img{ width: 11px; } } .current-zoom{ cursor: pointer; font-size: 12px; color: $primary; width: 32px; text-align: center; } } } table { border-collapse: separate !important; border-spacing: 0 !important; margin: 0 10px; } td { position: relative; vertical-align: top; padding: 0 0 50px 0; text-align: center; } .extend-handle-tbf { border: 2px solid $primary; background-color: #ffffff; border-radius: 50%; z-index: 1; width: 26px; height: 26px; padding: 7px 10px; cursor: pointer; position: absolute; left: 50%; bottom: 23px; transform: translate(-50%, -50%); margin: 0 auto; transition: all .20s ease-in-out; } .extend-handle-tbf:before { content: ""; display: block; width: 100%; height: 100%; margin: 1px -3px; box-sizing: border-box; border: 4px solid; border-color: transparent transparent $primary $primary; transform: rotateZ(135deg); transform-origin: 50% 50% 0; transition: transform ease 300ms; align-content: center; } .extend-handle:hover:before { border-color: $primary $primary transparent transparent; } .extend .extend-handle:before { transform: rotateZ(-45deg); } .extend-handle-goal { border: solid 1px rgb(211, 211, 211); background-color: #ffffff; border-radius: 50%; z-index: 1; width: 26px; height: 26px; padding: 12px; cursor: pointer; position: absolute; left: 50%; bottom: -30px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0 auto; } .extend-handle-goal:before { content: ""; display: block; width: 100%; height: 100%; margin: -4px; box-sizing: border-box; border: 4px solid; border-color: #d3d3d3 #d3d3d3 transparent transparent; transform: rotateZ(135deg); transform-origin: 50% 50% 0; transition: transform ease 300ms; align-content: center; margin-top: -5px; transition: all .20s ease-in-out; } .extend-handle-goal, .extend-handle-tbf { &.open { &:before { margin-top: -2px; transform: rotate(-45deg); } } } .goal-avatar-wrapper { position: relative; .goal-avatar { bottom: -4px; background-color: #ffffff; z-index: 1; width: 40px; height: 40px; padding: 6px; cursor: pointer; position: absolute; left: 74px; margin: 0 auto; border: 1px solid #d3d3d3; border-radius: 50%; border-top-color: transparent; border-right-color: transparent; transform: rotate(-45deg); .avatar { height: 26px; width: 26px; border-radius: 50%; transform: rotate(45deg); object-fit: cover; } .user-circle{ transform: rotate(45deg); width: 26px; height: 26px; border: solid 1px #e2e4e7; background-color: rgba(240, 241, 242, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; svg{ margin-right: -1px; width: 16px; height: auto; } } } } .extend::after { content: ""; position: absolute; left: 50%; bottom: 14px; height: 31px; border-left: 2px solid $primary; transform: translate3d(-1px, 0, 0); } /* vertical lines top / .childLevel { &::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 45px; border-left: 2px solid ; transform: translate3d(-1px, 0, 0); top: -13px; } &::after { content: ""; position: absolute; left: 0; right: 0; top: -15px; border-top: 2px solid $primary; } &:first-child:before, &:last-child:before { display: none; } &:first-child:after { left: 50%; height: 42px; border: 2px solid; border-color: $primary transparent transparent $primary; border-radius: 10px 0 0 0; transform: translate3d(1px, 0, 0); } &:last-child:after { right: 50%; height: 42px; border: 2px solid; border-color: $primary $primary transparent transparent; border-radius: 0 10px 0 0; transform: translate3d(-1px, 0, 0); } &:first-child.childLevel:last-child::after { left: auto; border-radius: 0; border-color: transparent $primary transparent transparent; transform: translate3d(1px, 0, 0); } &.hasGoal { &::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 30px; border-left: 2px solid $primary; transform: translate3d(-1px, 0, 0); top: -15px; } &::after { content: ""; position: absolute; left: 0; right: 0; top: -15px; border-top: 2px solid $primary; } &:first-child:before, &:last-child:before { display: none; } &:first-child:after { left: 50%; height: 50px; border: 2px solid; border-color: $primary transparent transparent $primary; border-radius: 10px 0 0 0; transform: translate3d(1px, 0, 0); } &:last-child:after { right: 50%; height: 50px; border: 2px solid; border-color: $primary $primary transparent transparent; border-radius: 0 10px 0 0; transform: translate3d(-1px, 0, 0); } &:first-child.childLevel:last-child::after { left: auto; border-radius: 0; border-color: transparent $primary transparent transparent; transform: translate3d(1px, 0, 0); } } } .node { /position: relative;/ display: inline-block; box-sizing: border-box; z-index: 1; } .box-tbf { width: 220px; margin-top: 25px; padding: 15px; border-radius: 10px; border: solid 2px $primary; background-color: #ffffff; } .box-tbf-goal { width: 220px; margin-top: 25px; border-radius: 10px; border: solid 1px #d3d3d3; background-color: #ffffff; padding: 15px; position: relative; .upper-contain { .goal-title { font-family: "Roboto"; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: $primary; text-align: left; margin: 10px 0px 5px 0px; min-height: 28px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } } .extend-details { width: 257px; height: 142px; margin: 142px 0px; border-radius: 10px; box-shadow: 0 1px 3px 0 rgba(165, 162, 162, 0.904); border: solid 1px rgb(211, 211, 211); background-color: #ffffff; } .upper-contain { .vision-title-wrapper { font-family: "Roboto"; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #b6b8be; display: flex; justify-content: space-between; align-items: center; text-transform: capitalize; } .vision-title { flex: 1; text-align: left; } .vision-action { display: flex; align-items: center; .add-dropdown{ border-radius: 4px; border: solid 1px $borderCard; background-color: #fcfcfc; height: 17px; width: 17px; cursor: pointer; &.active, &:hover{ border: solid 1px #0060c3; background-color: rgba(8, 129, 255, 0.6); .plus-icon{ .stroke-color{ stroke: #fff; } } } .plus-icon{ height: 9px; .stroke-color{ stroke: $primary; } } .dropdown-menu{ right: auto; left: 50% !important; margin-left: -35px; -webkit-transform: translate(-50%, 0) !important; -o-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; margin-top: 10px; padding: 0; overflow: hidden; min-width: fit-content; box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821); border: 1px solid $borderColor; border-radius: 4px; .dropdown-item{ padding: 10px 20px; font-size: 13px; font-family: 'Roboto'; color: $primary; &:hover{ background-color: rgba(0, 112, 224, 0.05); } &:focus{ outline: none; } &:active{ background-color: #f8f9fa; } } .dropdown-divider-tbf{ border-top: 1px solid $borderColor; } } } .vision-notification { border-radius: 4px; border: solid 1px $borderCard; background-color: #fcfcfc; height: 20px; width: 20px; margin-right: 8px; cursor: default; span { font-family: "Roboto"; font-size: 11px; font-weight: normal; font-stretch: normal; font-style: normal; text-align: center; color: $primary; padding: 8px 0px; } } .vision-edit { text-align: center; line-height: 1; cursor: pointer; .edit-item-dropdown{ position: relative; width: 20px; margin-right: -7px; .overlay-button{ position: absolute; width: 20px; height: 30px; z-index: 99; left: -8px; top: -3px; } .edit-item-button{ background: transparent; padding: 0; border: 0; color: $secondary; &:focus{ outline: none; } } .dropdown-menu{ right: auto; left: 50% !important; margin-left: -35px; -webkit-transform: translate(-50%, 0) !important; -o-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; margin-top: 10px; padding: 0; overflow: hidden; min-width: fit-content; box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821); border: 1px solid $borderColor; border-radius: 4px; .dropdown-item{ padding: 10px 20px; font-size: 13px; font-family: 'Roboto'; color: $primary; &:hover{ background-color: rgba(0, 112, 224, 0.05); } &:focus{ outline: none; } &:active{ background-color: #f8f9fa; } } .dropdown-divider-tbf{ border-top: 1px solid $borderColor; } } } svg { cursor: pointer; height: 12px; g { fill: #191c37; } } } } } .vision-sub-title { margin: 10px 0px 5px 0px; font-family: "Roboto"; font-size: 13px; font-weight: 700; line-height: normal; text-align: left; color: $primary; height: 32px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .separator { margin-bottom: 9px; height: 1px; background-color: #eeeff0; } .bottom-contain { display: flex; align-items: center; justify-content: space-between; .amount { font-family: "Roboto"; font-size: 11px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: $primary; } .time { font-family: "Roboto"; font-size: 11px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: right; color: $greyNotActive; } } .progress-bar-tbf { margin-top: 10px; } .extend-details-goal { display: flex; flex-direction: column; background-color: #f0f1f39c; margin: 20px -15px 0px -15px; .goal-key-upper { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 9px 17px; border-bottom: 1px solid $borderCard; &:first-child { border-top: 1px solid $borderCard; } .section-title { font-family: "Roboto"; font-size: 10px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: $primary; } .section-action { display: flex; svg { height: 8px; width: 8px; transition: all .20s ease-in-out; cursor: pointer; &.plus-icon { height: 10px; width: 10px; } g { stroke: $primary; } &.rotate { transform: rotateZ(180deg); } } .add-kr{ &:hover{ opacity: 0.7; } } .arrow-extend-up{ margin-left: 10px; cursor: pointer; &:hover{ opacity: 0.7; } svg{ height: 5px; width: auto; } .fill-color{ fill: $primary; } } } } .goal-keys-content { background: #fff; .goal-key { display: flex; align-items: flex-start; padding: 10px 15px; border-bottom: 1px solid $borderCard; &:last-child{ border-bottom: 0; } .header-user-kr{ margin-bottom: 10px; display: flex; align-items: center; .left-part{ display: flex; align-items: center; flex: 1; .name{ margin-bottom: 0; font-size: 12px; line-height: 1.5; text-align: left; color: $primary; } .user-role{ line-height: normal; font-size: 11px; color: #afb1b8; text-align: left; } } .kr-edit { margin-left: 10px; text-align: center; line-height: 1; cursor: pointer; .edit-item-dropdown{ position: relative; width: 20px; margin-right: -7px; .overlay-button{ position: absolute; width: 20px; height: 30px; z-index: 99; left: -8px; top: -3px; } .edit-item-button{ background: transparent; padding: 0; border: 0; color: $secondary; &:focus{ outline: none; } } .dropdown-menu{ right: auto; left: 50% !important; margin-left: -35px; -webkit-transform: translate(-50%, 0) !important; -o-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; margin-top: 10px; padding: 0; overflow: hidden; min-width: fit-content; box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821); border: 1px solid $borderColor; border-radius: 4px; .dropdown-item{ padding: 10px 20px; font-size: 13px; font-family: 'Roboto'; color: $primary; &:hover{ background-color: rgba(0, 112, 224, 0.05); } &:focus{ outline: none; } &:active{ background-color: #f8f9fa; } } .dropdown-divider-tbf{ border-top: 1px solid $borderColor; } } } svg { cursor: pointer; height: 12px; g { fill: #191c37; } } } } .icon { margin-right: 15px; .avatar { height: 26px; width: 26px; border-radius: 50%; object-fit: cover; } .user-circle{ width: 26px; height: 26px; border: solid 1px #e2e4e7; background-color: rgba(240, 241, 242, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; svg{ margin-right: -1px; width: 16px; height: auto; } } // g { // stroke: $greyNotActive; // } } .goal-content { // overflow: hidden; width: 100%; .header-kr{ display: flex; align-items: center; .text{ margin-bottom: 0; font-size: 12px; line-height: 1.5; text-align: left; color: $primary; } } .actions { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; .row-data{ width: 100%; display: flex; align-items: center; .notification { flex: 1; &.percentage-not{ .v-popover{ width: 100%; .trigger{ width: 100%; } } .value-percent{ margin-left: 5px; } .progress-bar-tbf{ max-width: 80px; margin: 0; } } } } .notification { line-height: normal; font-size: 11px; color: $greyNotActive; display: flex; align-items: center; margin-right: 18px; cursor: pointer; &.disabled{ cursor: default; } &:last-child{ margin-right: 0; } &:hover{ color: $primary; } span { display: flex; align-items: center; justify-content: center; border-radius: 4px; border: solid 1px $borderCard; background-color: #fcfcfc; height: 16px; min-width: 16px; padding: 0 2px; cursor: default; color: $primary; font-size: 8px; margin-left: 5px; &.error{ box-shadow: 0 1px 3px 0 rgba(235, 27, 104, 0.2); border: solid 1px $pinkRed; background-color: #f9bad1; color: $pinkRed; } &.warning{ box-shadow: 0 1px 4px 0 rgba(247, 179, 76, 0.26); border: solid 1px #ea930e; background-color: rgba(243, 169, 59, 0.4); color: #ea930e; font-weight: 700; } } } } } } .goal-more { font-family: "Roboto"; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; padding: 12px; color: $greyNotActive; border-bottom: 1px solid $borderCard; cursor: pointer; transition: all .15s ease-in-out; span { color: $primary; } &:hover { background: #f0f1f39c; } } } .people-content { background: #fff; .people { border-bottom: 1px solid $borderCard; display: flex; align-items: center; padding: 20px; &:last-child{ border-bottom: 0px; } .people-avatar { img { width: 26px; height: 26px; border-radius: 100%; } } .people-info { flex: 1; text-align: left; margin: 0px 10px; font-family: "Roboto"; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: $primary; .people-role { margin-top: 2px; color: $greyNotActive; text-transform: capitalize; } } .actions { display: flex; align-items: center; .notification { border-radius: 4px; border: solid 1px $borderCard; background-color: #fcfcfc; height: 20px; width: 20px; /margin-right: 18px;*/ cursor: default; span { display: flex; align-items: center; font-family: "Roboto"; font-size: 11px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.39px; text-align: center; color: $primary; padding: 3px 6px; } } .edit { svg { cursor: pointer; g { fill: #191c37; } } } } } } } } Back

Edit File : _master_goal_chart.scss | Size : 22.80 KB

.scrollable-chart {
	overflow: scroll;
	height: calc(100vh - 100px);
	cursor: default;
	text-align: center;
	padding: 30px;
	&:active {
		cursor: -webkit-grabbing;
		cursor: -moz-grabbing;
		cursor: -o-grabbing;
		cursor: grabbing;
	}
}

.tree-page{
	height: 100vh;
	overflow: hidden;
	.center-box{
		background: #FFF;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		min-height: 100%;
		margin: 0 auto;
		.organigram-tbf{
			transform-origin: top left;
			width: 100%;
			min-width: 100%;
		} 
	}

.tree-actions{
		padding: 30px 30px;
		height: 100px;
		z-index: 9;
		display: flex;
		align-items: center;
		opacity: 1;
	    background: #FFF;
	    border-bottom: 1px solid $borderColor;
	    .left-part{
	    	display: flex;
	    	width: 150px;
	    }
	    .center-part{
	    	flex: 1;
	    	padding: 0 15px;
	    	display: flex;
	    	align-items: center;
	    	justify-content: center;
	    	.text{
	    		font-size: 14px;
	    		font-weight: 700;
	    		color: $primary;
	    	}
	    }
	    .right-part{
	    	display: flex;
	    	justify-content: flex-end;
	    	width: 150px;
	    }

.tree-action-btn{
			height: 36px;
			padding: 0 10px;
			display: flex;
			align-items: center;
			margin-right: 10px;
			font-size: 12px;
			color: $primary;
			font-weight: 500;
			cursor: pointer;
			&.sdb-details{
				width: 36px;
				padding: 0;
				justify-content: center;
				img{
					width: 20px;
					height: auto;
				}
			}
		}
		
		.back-button{
			margin-left: auto;
			z-index: 9;
			.close-btn{
				width: 36px;
				height: 36px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				.icon-close{
					transform: rotate(45deg);
					.stroke-color{
						stroke: $primary;
					}
				}
			}
		}

#btnExport{
			transition: all 0.2s ease;
			position: relative;
			overflow: hidden;
			&.loading{
				background-color: #0060c3;
				border: 1px solid #0060c3;
				&:hover{
					background-color: #0060c3;
					border: 1px solid #0060c3;
				}
				.text{
					color: #FFF;
					&:hover{
						color: #FFF;
					}
				}
			}
			&.completed{
				box-shadow: 0 1px 4px 0 rgba(11, 203, 106, 0.3);
				border: solid 1px #03ae58;
				background-color: rgba(11, 203, 106, 0.75);
				.loader{
					display: none;
				}
				.text{
					color: #FFF;
					&:hover{
						color: #FFF;
					}
				}
				&:hover{
					box-shadow: 0 1px 4px 0 rgba(11, 203, 106, 0.3);
					border: solid 1px #03ae58;
					background-color: rgba(11, 203, 106, 0.75);
				}
			}
			&.error{
				box-shadow: 0 1px 3px 0 rgba(235, 27, 104, 0.2);
				border: solid 1px $pinkRed;
				background-color: #ff99be;
				.loader{
					display: none;
				}
				&:hover{
					box-shadow: 0 1px 3px 0 rgba(235, 27, 104, 0.2);
					border: solid 1px $pinkRed;
					background-color: #ff99be;
				}
			}
			&:disabled{
				cursor: not-allowed;
			}
			.text{
				text-align: left;
				z-index: 2;
				width: 100%;
				position: relative;
			}
			.loader{
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 0;
				background-color: #6bb3ff;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
				z-index: 1;
				&.onProgress{
					transition: width 5s linear; 
					width: 90%;
				}
				&.finish{
					width: 100%;
					transition: width 0.3s ease; 
				}
			}
		}

.settings-org{
			.dropdown-menu{
				margin-top: 5px;
				padding: 0;
				overflow: hidden;
				min-width: fit-content;
				box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821);
				border: 1px solid $borderColor;
				border-radius: 4px;
				.dropdown-item{
					padding: 10px 20px;
					font-size: 13px;
					font-family: 'Roboto';
					color: $primary;
					&:hover{
						background-color: rgba(0, 112, 224, 0.05);
					}
					&:focus{
						outline: none;
					}
					&:active{
						background-color: #f8f9fa;
					}
				}
			}
		}

.btns-zoom{
			display: flex;
			align-items: center;
			border: 1px solid $borderCard;
			border-radius: 10px;
	    	background-color: #fcfcfc;
	    	height: 36px;
			margin-right: 10px;
			&.mr-0{
				margin-right: 0;
			}
			.zoom-minus,
			.zoom-plus{
				width: 35px;
				text-align: center;
				cursor: pointer;
				img{
					width: 15px;
					height: auto;
				}
				&.disabled{
					opacity: 0.3;
					cursor: not-allowed;
				}
			}
			.zoom-plus{
				img{
					width: 11px;
				}
			}
			.current-zoom{
				cursor: pointer;
				font-size: 12px;
				color: $primary;
				width: 32px;
				text-align: center;
			}
		}
	}

table {
		border-collapse: separate !important;
		border-spacing: 0 !important;
		margin: 0 10px;
	}

td {
		position: relative;
		vertical-align: top;
		padding: 0 0 50px 0;
		text-align: center;
	}

.extend-handle-tbf {
		border: 2px solid $primary;
		background-color: #ffffff;
		border-radius: 50%;
		z-index: 1;
		width: 26px;
		height: 26px;
		padding: 7px 10px;
		cursor: pointer;
		position: absolute;
		left: 50%;
		bottom: 23px;
		transform: translate(-50%, -50%);
		margin: 0 auto;
		transition: all .20s ease-in-out;
	}

.extend-handle-tbf:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		margin: 1px -3px;
		box-sizing: border-box;
		border: 4px solid;
		border-color: transparent transparent $primary $primary;
		transform: rotateZ(135deg);
		transform-origin: 50% 50% 0;
		transition: transform ease 300ms;
		align-content: center;
	}

.extend-handle:hover:before {
		border-color: $primary $primary transparent transparent;
	}

.extend .extend-handle:before {
		transform: rotateZ(-45deg);
	}

.extend-handle-goal {
		border: solid 1px rgb(211, 211, 211);
		background-color: #ffffff;
		border-radius: 50%;
		z-index: 1;
		width: 26px;
		height: 26px;
		padding: 12px;
		cursor: pointer;
		position: absolute;
		left: 50%;
		bottom: -30px;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		margin: 0 auto;
	}

.extend-handle-goal:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		margin: -4px;
		box-sizing: border-box;
		border: 4px solid;
		border-color: #d3d3d3 #d3d3d3 transparent transparent;
		transform: rotateZ(135deg);
		transform-origin: 50% 50% 0;
		transition: transform ease 300ms;
		align-content: center;
		margin-top: -5px;
		transition: all .20s ease-in-out;
	}

.extend-handle-goal,
	.extend-handle-tbf {
		&.open {
			&:before {
				margin-top: -2px;
				transform: rotate(-45deg);
			}
		}
	}

.goal-avatar-wrapper {
		position: relative;
		.goal-avatar {
			bottom: -4px;
			background-color: #ffffff;
			z-index: 1;
			width: 40px;
			height: 40px;
			padding: 6px;
			cursor: pointer;
			position: absolute;
			left: 74px;
			margin: 0 auto;
			border: 1px solid #d3d3d3;
			border-radius: 50%;
			border-top-color: transparent;
			border-right-color: transparent;
			transform: rotate(-45deg);
			.avatar {
				height: 26px;
				width: 26px;
				border-radius: 50%;
				transform: rotate(45deg);
				object-fit: cover;
			}
			.user-circle{
				transform: rotate(45deg);
				width: 26px;
				height: 26px;
				border: solid 1px #e2e4e7;
				background-color: rgba(240, 241, 242, 0.2);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				svg{
					margin-right: -1px;
					width: 16px;
					height: auto;
				}
			}
		}
	}

.extend::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 14px;
		height: 31px;
		border-left: 2px solid $primary;
		transform: translate3d(-1px, 0, 0);
	}

/* vertical lines top */

.childLevel {
		&::before {
			content: "";
			position: absolute;
			left: 50%;
			bottom: 100%;
			height: 45px;
			border-left: 2px solid ;
			transform: translate3d(-1px, 0, 0);
			top: -13px;
		}

&::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: -15px;
			border-top: 2px solid $primary;
		}

&:first-child:before,
		&:last-child:before {
			display: none;
		}

&:first-child:after {
			left: 50%;
			height: 42px;
			border: 2px solid;
			border-color: $primary transparent transparent $primary;
			border-radius: 10px 0 0 0;
			transform: translate3d(1px, 0, 0);
		}

&:last-child:after {
			right: 50%;
			height: 42px;
			border: 2px solid;
			border-color: $primary $primary transparent transparent;
			border-radius: 0 10px 0 0;
			transform: translate3d(-1px, 0, 0);
		}

&:first-child.childLevel:last-child::after {
			left: auto;
			border-radius: 0;
			border-color: transparent $primary transparent transparent;
			transform: translate3d(1px, 0, 0);
		}

&.hasGoal {
			&::before {
				content: "";
				position: absolute;
				left: 50%;
				bottom: 100%;
				height: 30px;
				border-left: 2px solid $primary;
				transform: translate3d(-1px, 0, 0);
				top: -15px;
			}

&::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				top: -15px;
				border-top: 2px solid $primary;
			}

&:first-child:before,
			&:last-child:before {
				display: none;
			}

&:first-child:after {
				left: 50%;
				height: 50px;
				border: 2px solid;
				border-color: $primary transparent transparent $primary;
				border-radius: 10px 0 0 0;
				transform: translate3d(1px, 0, 0);
			}

&:last-child:after {
				right: 50%;
				height: 50px;
				border: 2px solid;
				border-color: $primary $primary transparent transparent;
				border-radius: 0 10px 0 0;
				transform: translate3d(-1px, 0, 0);
			}

&:first-child.childLevel:last-child::after {
				left: auto;
				border-radius: 0;
				border-color: transparent $primary transparent transparent;
				transform: translate3d(1px, 0, 0);
			}
		}
	}

.node {
		/*position: relative;*/
		display: inline-block;
		box-sizing: border-box;
		z-index: 1;
	}

.box-tbf {
		width: 220px;
		margin-top: 25px;
		padding: 15px;
		border-radius: 10px;
		border: solid 2px $primary;
		background-color: #ffffff;
	}

.box-tbf-goal {
		width: 220px;
		margin-top: 25px;
		border-radius: 10px;
		border: solid 1px #d3d3d3;
		background-color: #ffffff;
		padding: 15px;
		position: relative;
		.upper-contain {
			.goal-title {
				font-family: "Roboto";
				font-size: 12px;
				font-weight: normal;
				font-stretch: normal;
				font-style: normal;
				line-height: normal;
				letter-spacing: normal;
				color: $primary;
				text-align: left;
				margin: 10px 0px 5px 0px;
				min-height: 28px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}

.extend-details {
		width: 257px;
		height: 142px;
		margin: 142px 0px;
		border-radius: 10px;
		box-shadow: 0 1px 3px 0 rgba(165, 162, 162, 0.904);
		border: solid 1px rgb(211, 211, 211);
		background-color: #ffffff;
	}

.upper-contain {
		.vision-title-wrapper {
			font-family: "Roboto";
			font-size: 12px;
			font-weight: normal;
			font-stretch: normal;
			font-style: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #b6b8be;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-transform: capitalize;
		}
		.vision-title {
			flex: 1;
			text-align: left;
		}
		.vision-action {
			display: flex;
			align-items: center;
			
			.add-dropdown{
				border-radius: 4px;
				border: solid 1px $borderCard;
				background-color: #fcfcfc;
				height: 17px;
				width: 17px;
				cursor: pointer;
				&.active,
				&:hover{
					border: solid 1px #0060c3;
					background-color: rgba(8, 129, 255, 0.6);
					.plus-icon{
						.stroke-color{
							stroke: #fff;	
						}
					}
				}
				.plus-icon{
					height: 9px;
					.stroke-color{
						stroke: $primary;
					}
				}
				.dropdown-menu{
					right: auto;
					left: 50% !important;
					margin-left: -35px;
					-webkit-transform: translate(-50%, 0) !important;
					-o-transform: translate(-50%, 0) !important;
					transform: translate(-50%, 0) !important;
					margin-top: 10px;
					padding: 0;
					overflow: hidden;
					min-width: fit-content;
					box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821);
					border: 1px solid $borderColor;
					border-radius: 4px;
					.dropdown-item{
						padding: 10px 20px;
						font-size: 13px;
						font-family: 'Roboto';
						color: $primary;
						&:hover{
							background-color: rgba(0, 112, 224, 0.05);
						}
						&:focus{
							outline: none;
						}
						&:active{
							background-color: #f8f9fa;
						}
					}
					.dropdown-divider-tbf{
						border-top: 1px solid $borderColor;
					}
				}
			}

.vision-notification {
				border-radius: 4px;
				border: solid 1px $borderCard;
				background-color: #fcfcfc;
				height: 20px;
				width: 20px;
				margin-right: 8px;
				cursor: default;

span {
					font-family: "Roboto";
					font-size: 11px;
					font-weight: normal;
					font-stretch: normal;
					font-style: normal;
					text-align: center;
					color: $primary;
					padding: 8px 0px;
				}
			}
			.vision-edit {
				text-align: center;
				line-height: 1;
				cursor: pointer;
				.edit-item-dropdown{
					position: relative;
					width: 20px;
					margin-right: -7px;
					.overlay-button{
						position: absolute;
						width: 20px;
						height: 30px;
						z-index: 99;
						left: -8px;
						top: -3px;
					}
					.edit-item-button{
						background: transparent;
						padding: 0;
						border: 0;
						color: $secondary;
						&:focus{
							outline: none;
						}
					}
					.dropdown-menu{
						right: auto;
						left: 50% !important;
						margin-left: -35px;
						-webkit-transform: translate(-50%, 0) !important;
						-o-transform: translate(-50%, 0) !important;
						transform: translate(-50%, 0) !important;
						margin-top: 10px;
						padding: 0;
						overflow: hidden;
						min-width: fit-content;
						box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821);
						border: 1px solid $borderColor;
						border-radius: 4px;
						.dropdown-item{
							padding: 10px 20px;
							font-size: 13px;
							font-family: 'Roboto';
							color: $primary;
							&:hover{
								background-color: rgba(0, 112, 224, 0.05);
							}
							&:focus{
								outline: none;
							}
							&:active{
								background-color: #f8f9fa;
							}
						}
						.dropdown-divider-tbf{
							border-top: 1px solid $borderColor;
						}
					}
				}
				svg {
					cursor: pointer;
					height: 12px;
					g {
						fill: #191c37;
					}
				}
			}
		}
	}

.vision-sub-title {
		margin: 10px 0px 5px 0px;
		font-family: "Roboto";
		font-size: 13px;
		font-weight: 700;
		line-height: normal;
		text-align: left;
		color: $primary;
		height: 32px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

.separator {
		margin-bottom: 9px;
		height: 1px;
		background-color: #eeeff0;
	}

.bottom-contain {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.amount {
			font-family: "Roboto";
			font-size: 11px;
			font-weight: normal;
			font-stretch: normal;
			font-style: normal;
			line-height: normal;
			letter-spacing: normal;
			color: $primary;
		}
		.time {
			font-family: "Roboto";
			font-size: 11px;
			font-weight: normal;
			font-stretch: normal;
			font-style: normal;
			line-height: normal;
			letter-spacing: normal;
			text-align: right;
			color: $greyNotActive;
		}
	}

.progress-bar-tbf {
		margin-top: 10px;
	}

.extend-details-goal {
		display: flex;
		flex-direction: column;
		background-color: #f0f1f39c;
		margin: 20px -15px 0px -15px;
		.goal-key-upper {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 9px 17px;
			border-bottom: 1px solid $borderCard;
			&:first-child {
				border-top: 1px solid $borderCard;
			}
			.section-title {
				font-family: "Roboto";
				font-size: 10px;
				font-weight: normal;
				font-stretch: normal;
				font-style: normal;
				line-height: normal;
				letter-spacing: normal;
				color: $primary;
			}
			.section-action {
				display: flex;
				svg {
					height: 8px;
					width: 8px;
					transition: all .20s ease-in-out;
					cursor: pointer;
					&.plus-icon {
						height: 10px;
						width: 10px;
					}
					g {
						stroke: $primary;
					}
					&.rotate {
						transform: rotateZ(180deg);
					}
				}
				.add-kr{
					&:hover{
						opacity: 0.7;
					}
				}
				.arrow-extend-up{
					margin-left: 10px;
					cursor: pointer;
					&:hover{
						opacity: 0.7;
					}
					svg{
						height: 5px;
						width: auto;
					}
					.fill-color{
						fill: $primary;
					}
				}
			}
		}
		.goal-keys-content {
			background: #fff;
			.goal-key {
				display: flex;
				align-items: flex-start;
				padding: 10px 15px;
				border-bottom: 1px solid $borderCard;
				&:last-child{
					border-bottom: 0;
				}
				.header-user-kr{
					margin-bottom: 10px;
					display: flex;
					align-items: center;
					.left-part{
						display: flex;
						align-items: center;
						flex: 1;
						.name{
							margin-bottom: 0;
							font-size: 12px;
							line-height: 1.5;
							text-align: left;
							color: $primary;
						}
						.user-role{
							line-height: normal;
							font-size: 11px;
							color: #afb1b8;
							text-align: left;
						}
					}
					.kr-edit {
						margin-left: 10px;
						text-align: center;
						line-height: 1;
						cursor: pointer;
						.edit-item-dropdown{
							position: relative;
							width: 20px;
							margin-right: -7px;
							.overlay-button{
								position: absolute;
								width: 20px;
								height: 30px;
								z-index: 99;
								left: -8px;
								top: -3px;
							}
							.edit-item-button{
								background: transparent;
								padding: 0;
								border: 0;
								color: $secondary;
								&:focus{
									outline: none;
								}
							}
							.dropdown-menu{
								right: auto;
								left: 50% !important;
								margin-left: -35px;
								-webkit-transform: translate(-50%, 0) !important;
								-o-transform: translate(-50%, 0) !important;
								transform: translate(-50%, 0) !important;
								margin-top: 10px;
								padding: 0;
								overflow: hidden;
								min-width: fit-content;
								box-shadow: 0px 11px 18px rgba(0, 0, 0, 0.194821);
								border: 1px solid $borderColor;
								border-radius: 4px;
								.dropdown-item{
									padding: 10px 20px;
									font-size: 13px;
									font-family: 'Roboto';
									color: $primary;
									&:hover{
										background-color: rgba(0, 112, 224, 0.05);
									}
									&:focus{
										outline: none;
									}
									&:active{
										background-color: #f8f9fa;
									}
								}
								.dropdown-divider-tbf{
									border-top: 1px solid $borderColor;
								}
							}
						}
						svg {
							cursor: pointer;
							height: 12px;
							g {
								fill: #191c37;
							}
						}
					}
				}
				.icon {
					margin-right: 15px;
					.avatar {
						height: 26px;
						width: 26px;
						border-radius: 50%;
						object-fit: cover;
					}
					.user-circle{
						width: 26px;
						height: 26px;
						border: solid 1px #e2e4e7;
						background-color: rgba(240, 241, 242, 0.2);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						svg{
							margin-right: -1px;
							width: 16px;
							height: auto;
						}
					}
					// g {
					// 	stroke: $greyNotActive;
					// }	
				}
				.goal-content {
					// overflow: hidden;
					width: 100%;
					.header-kr{
						display: flex;
						align-items: center;
						.text{
							margin-bottom: 0;
							font-size: 12px;
							line-height: 1.5;
							text-align: left;
							color: $primary;
						}
					}
					.actions {
						margin-top: 10px;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						.row-data{
							width: 100%;
							display: flex;
							align-items: center;
							.notification {
								flex: 1;
								&.percentage-not{
									.v-popover{
										width: 100%;
										.trigger{
											width: 100%;
										}
									}
									.value-percent{
										margin-left: 5px;
									}
									.progress-bar-tbf{
										max-width: 80px;
										margin: 0;
									}
								}
							}
						}

.notification {
							line-height: normal;
							font-size: 11px;
							color: $greyNotActive;
							display: flex;
							align-items: center;
							margin-right: 18px;
							cursor: pointer;
							&.disabled{
								cursor: default;
							}
							&:last-child{
								margin-right: 0;
							}
							&:hover{
								color: $primary;
							}
							span {
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 4px;
								border: solid 1px $borderCard;
								background-color: #fcfcfc;
								height: 16px;
								min-width: 16px;
								padding: 0 2px;
								cursor: default;
								color: $primary;
								font-size: 8px;
								margin-left: 5px;
								&.error{
									box-shadow: 0 1px 3px 0 rgba(235, 27, 104, 0.2);
									border: solid 1px $pinkRed;
									background-color: #f9bad1;
									color: $pinkRed;
								}
								&.warning{
									box-shadow: 0 1px 4px 0 rgba(247, 179, 76, 0.26);
									border: solid 1px #ea930e;
									background-color: rgba(243, 169, 59, 0.4);
									color: #ea930e;
									font-weight: 700;
								}
							}
						}
					}
				}
			}
			.goal-more {
				font-family: "Roboto";
				font-size: 12px;
				font-weight: normal;
				font-stretch: normal;
				font-style: normal;
				line-height: normal;
				letter-spacing: normal;
				text-align: center;
				padding: 12px;
				color: $greyNotActive;
				border-bottom: 1px solid $borderCard;
				cursor: pointer;
				transition: all .15s ease-in-out;
				span {
					color: $primary;
				}
				&:hover {
					background: #f0f1f39c;
				}
			}
		}

.people-content {
			background: #fff;
			.people {
				border-bottom: 1px solid $borderCard;
				display: flex;
				align-items: center;
				padding: 20px;
				&:last-child{
					border-bottom: 0px;
				}
				.people-avatar {
					img {
						width: 26px;
						height: 26px;
						border-radius: 100%;
					}
				}
				.people-info {
					flex: 1;
					text-align: left;
					margin: 0px 10px;
					font-family: "Roboto";
					font-size: 12px;
					font-weight: normal;
					font-stretch: normal;
					font-style: normal;
					line-height: normal;
					letter-spacing: normal;
					color: $primary;
					.people-role {
						margin-top: 2px;
						color: $greyNotActive;
						text-transform: capitalize;
					}
				}
				.actions {
					display: flex;
					align-items: center;
					.notification { 
						border-radius: 4px;
						border: solid 1px $borderCard;
						background-color: #fcfcfc;
						height: 20px;
						width: 20px;
						/*margin-right: 18px;*/
						cursor: default;
						span {
							display: flex;
							align-items: center;
							font-family: "Roboto";
							font-size: 11px;
							font-weight: normal;
							font-stretch: normal;
							font-style: normal;
							line-height: normal;
							letter-spacing: -0.39px;
							text-align: center;
							color: $primary;
							padding: 3px 6px;
						}
					}
					.edit {
						svg {
							cursor: pointer;
							g {
								fill: #191c37;
							}
						}
					}
				}
			}
		}
	}
}

Back