/*Downloaded from https://www.codeseek.co/onedotsix/bootstrap-wide-responsive-org-chart-aBObWj */
/* TEMP
***************************************************************************************************/
/**************************************************************************************************/
/*Other Setting*/
#tps-org-chart ul{
padding-left: 0rem !important;
padding-top: 20px !important;
}
#tps-org-chart ul > li:before{
display: none !important;
}
/* f
88
88
88
,adPPYb,d8 ,adPPYba, 8b,dPPYba, ,adPPYba, 8b,dPPYba, ,adPPYYba, 88
a8" `Y88 a8P_____88 88P' `"8a a8P_____88 88P' "Y8 "" `Y8 88
8b 88 8PP""""""" 88 88 8PP""""""" 88 ,adPPPPP88 88
"8a, ,d88 "8b, ,aa 88 88 "8b, ,aa 88 88, ,88 88
`"YbbdP"Y8 `"Ybbd8"' 88 88 `"Ybbd8"' 88 `"8bbdP"Y8 88
aa, ,88
"Y8bbd*/
.name{
font-weight:bold;
font-size: 18px;
margin-bottom: 14px;
line-height: 1.2;
}
.post{
font-size: 1rem;
line-height: 1.2;
}
#tps-org-chart{
background:#fff;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
overflow: hidden;
width: 100%;
padding:20px 20px 40px 20px;
margin-bottom:2em;
}
figure ul,
figure ul li,
figure ul li .chartBtn{
position:relative;
z-index: 1;
}
figure ul{
padding: 0 !important;
margin: 0;
list-style: none;
}
figure ul li{
padding:10px 0;
}
figure ul li .chartBtn{
display: block;
/* border: 1px solid; */
text-align: center;
height: 60px;
/* overflow: hidden; */
}
figure ul > li > ul {
list-style-type: none !important;
}
figure ul li .chartBtn{
display: table;
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
figure ul li .chartBtn > span{
display: table-cell;
min-height: 100%;
vertical-align: middle;
/* display:block; */
min-height:100%;
overflow:hidden;
padding: 10px;
transition:all ease .4s;
}
figure ul li .chartBtn > span > span{
font-size: 30px;
position: absolute;
right: 15px;
top:10px;
cursor: pointer;
color: #fff;
}
figure ul li ul li ul li .chartBtn > span > span{
font-size: 30px;
position: absolute;
right: 15px;
top:10px;
cursor: pointer;
color: #000;
}
figure ul li .chartBtn a{
color:#000;
text-decoration: none !important;
}
figure ul li .chartBtn a:hover{
text-decoration: underline !important;
}
figure ul > li .chartBtn:hover > span{
background:#00311d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
figure ul > li > ul > li .chartBtn:hover > span{
background:#005531;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
figure ul > li > ul > li > ul > li .chartBtn:hover > span{
background:#a6d4a4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
figure ul > li > ul > li > .row > ul > li .chartBtn:hover > span{
background:#a6d4a4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
figure ul > li > ul > li > ul > li > ul > li .chartBtn:hover > span{
background: #f2edc8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
figure ul > li > ul > li > .row > ul > li > ul > li .chartBtn:hover > span{
background: #f2edc8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
figure small{
display:block;
font-weight:normal;
}
/*
88 88
88 88
88 88
88 ,adPPYba, 8b d8 ,adPPYba, 88 ,adPPYba,
88 a8P_____88 `8b d8' a8P_____88 88 I8[ ""
88 8PP""""""" `8b d8' 8PP""""""" 88 `"Y8ba,
88 "8b, ,aa `8b,d8' "8b, ,aa 88 aa ]8I
88 `"Ybbd8"' "8" `"Ybbd8"' 88 `"YbbdP"' */
/* Level 1
-------------------------------------------------*/
figure > ul > li > .chartBtn{
width:20%;
margin:0 auto 15px auto;
}
figure > ul > li > div:after{
content:"";
width:calc(50%);
height:25px;
margin:0 auto;
position:absolute;
border-left:2px solid;
top:110px;
left:calc(50% - 2.5px);
display:block;
z-index:0;
}
/* Level 2
-------------------------------------------------*/
figure > ul > li > ul:after{ /* horizontal line connecting boxes under head honcho (and vertical lines on the far left and right) */
content:"";
width:calc(100% - 30px - 248px + 2px);
height:20px;
margin:0 auto;
position:absolute;
border:2px solid;
border-bottom:none;
top:10px;
left:calc(15px + 124px - 2px);
display:block;
z-index:0;
}
figure > ul > li > ul > li{
z-index:1;
}
figure > ul > li > ul > li:first-of-type:before,
figure > ul > li > ul > li:last-of-type:before{ /* hiding vertical lines on the far left and right */
border-left:transparent;
}
figure > ul > li > ul > li:before{ /* vertical lines connecting boxes to horizontal line under head honcho */
content:"";
border-left:2px solid;
position:relative;
display:block;
min-height:20px;
margin-left:calc(50% - 2px);
}
/* Level 3
-------------------------------------------------*/
figure > ul > li > ul > li > ul{ /* vertical line connecting boxes under a director (level 2) */
/* border-left: 2px solid; Nicole*/
}
figure > ul > li > ul > li > ul > li{ /* horizontal line connect level 3 boxes to vertical line under director (level 2) */
/* border-top: 2px solid; Nicole*/
top:50px;
}
figure ul > li > ul > li > ul > li > .chartBtn{ /* level 3 boxes and below... */
right:-30px;
top:-50px;
width:calc(100% - 29px);
}
figure .t2-1 > li > .chartBtn, figure .t2-2 > li > .chartBtn, figure .t2-3 > .chartBtn, figure .t2-4 > .chartBtn, figure .t2-5 > li > .chartBtn{
right:0 !important;
}
figure > ul > li > ul > li > .row > ul{ /* vertical line connecting boxes under a director (level 2) */
/* border-left: 2px solid; Nicole*/
/*top:-50px;*/
left: 15px;
/* width:80%; */
padding-right: 30px !important;
}
figure > ul > li > ul > li > .row > ul > li{ /* horizontal line connect level 3 boxes to vertical line under director (level 2) */
/* border-top: 2px solid; Nicole*/
top:50px;
}
figure > ul > li > ul > li > .row > ul > li .chartBtn{ /* horizontal line connect level 3 boxes to vertical line under director (level 2) */
right:-30px;
top:-50px;
width:calc(100% - 29px);
}
/* Level 4
-------------------------------------------------*/
figure .t2-1 > li > .hideContent, figure .t2-2 > li > .hideContent, figure .t2-3 > .hideContent, .hideContent, figure .t2-4 > .hideContent, figure .t2-5 > li > .hideContent{
left: 0;
}
figure > ul > li ul > li > ul > li > ul{ /* vertical line connecting boxes under a level 3 box */
border-left: 2px solid;
right:-30px;
top:-50px;
width:calc(100% - 30px);
padding-top: 10px;
}
figure ul > li > ul > li > ul > li > ul > li{ /* horizontal line connect level 4 boxes to vertical line under level 3 box */
border-top: 2px solid;
top:50px;
}
figure > ul > li > ul > li > .row > ul > li > ul { /* horizontal line connect level 4 boxes to vertical line under level 3 box */
border-left: 2px solid;
right: -30px;
top:-50px;
width:calc(100% - 30px);
padding-top: 10px;
}
figure > ul > li > ul > li > .row > ul > li > ul > li{ /* horizontal line connect level 4 boxes to vertical line under level 3 box */
border-top: 2px solid;
top:50px;
}
figure ul > li > ul > li > ul > li.tps-org-branch-end{ /* hiding the bottom section of the vertical line above */
/* border-left: 2px solid #fff; */
border-left: 3px solid #fff; /* edited by Den */
right:2px;
width:calc(100% + 4px);
}
figure ul > li > ul > li > .row > ul > li.tps-org-branch-end{ /* hiding the bottom section of the vertical line above */
/* border-left: 2px solid #fff; */
border-left: 3px solid #fff; /* edited by Den */
right:2px;
/* height: 100%; */
width:calc(100%);
}
figure ul > li > ul > li > .row > ul > li > ul > li.tps-org-branch-end{ /* hiding the bottom section of the vertical line above */
/* border-left: 2px solid #fff; */
border-left: 3px solid #fff; /* edited by Den */
right:2px;
width:calc(100%);
}
/*
,ad88PPP88ba, figure > ul > li > div > a 88 88
d8" .ama.a "8a 88 ""
d8' ,8P"88" 88 88
88 .8P 8P 88 88,dPYba,,adPYba, ,adPPYba, ,adPPYb,88 88 ,adPPYYba,
88 88 8' 8P 88P' "88" "8a a8P_____88 a8" `Y88 88 "" `Y8
88 8B ,d8 ,ad8' 88 88 88 8PP""""""" 8b 88 88 ,adPPPPP88
"8a "88P"888P" 88 88 88 "8b, ,aa "8a, ,d88 88 88, ,88
`Y8aaaaaaaad8P 88 88 88 `"Ybbd8"' `"8bbdP"Y8 88 `"8bbdP"Y8
"""""""""
*/
@media only screen and (min-width: 1200px) {
figure > .style-B > li > .chartBtn{
height: 110px;
font-size: 20px;
}
figure ul > li > ul > li > .row > ul > li.tps-org-branch-end{
height: 100%;
}
figure ul li .chartBtn > span > span{
display: none;
}
/* Level 1 But middle */
.levelFirstMiddle{
top: 90px !important;
}
.levelFirstMiddle > .chartBtn{
right: -6% !important;
top: -30px !important;
width: 95% !important;
}
.dottedLine{
border-bottom: 2px dotted #bbb;
width: 100%;
position: absolute;
right: -60px;
top: 53px;
display: block !important;
}
/*end*/
figure > ul > li > ul > li:after{
content: "";
width: calc(50%);
height: 25px;
margin: 0 auto;
position: absolute;
border-left: 2px solid #bbb;
top: -10px;
left: calc(50% - 2.5px);
display: block;
z-index: 0;
}
figure > ul > li > ul > li:first-child:after{
display: none;
}
figure > ul > li > ul > li:last-child:after{
display: none;
}
}
@media all and (max-width: 1199px){
.dottedLine{
border: 2px dotted #bbb;
border-right: 0;
width: 90%;
height: 96%;
position: absolute;
top: 20px;
left: 12px;
z-index: -1;
display: none;
}
/* .special{
width: 91%;
} */
figure .hideContent{
display: none;
}
figure ul li .chartBtn{
height: 60px;
}
figure > ul > li > .chartBtn{
margin:0 auto;
left: -15px;
width:calc(100% + 18px);
}
figure > ul > li > ul > li > .chartBtn{
top: -50px;
}
figure > ul > li > ul > li > .chartBtn{
width:calc(100% + 3px);
}
figure > ul > li > ul > li > .chartBtn{
width:calc(100% + 3px);
}
figure > ul > li > ul{ /* vertical line under head honcho (level 1) */
border-left: 2px solid;
}
figure > ul > li > ul > li{ /* horizontal line connecting level 2 boxes to vertical line under head honcho (level 1) */
border-top: 2px solid;
top:50px;
}
/* figure > ul > li > ul > li > .chartBtn{
width: calc(100% + 2px);
} */
figure > ul > li > ul > li > .row > ul > li > .chartBtn{
width: calc(100% - 28px);
}
figure > ul > li > ul > li > .row > ul > li > ul > li > .chartBtn{
width: calc(100% - 28px);
}
figure > ul > li > ul > li{
padding-right: 0 !important;
}
figure > ul > li > ul > li > .row > ul:nth-child(1) > .tps-org-branch-end{
border-left: 0 !important;
}
figure > ul > li > ul > li > .row > ul{ /* vertical line connecting boxes under a director (level 2) */
top:-50px;
}
figure > ul > li > div:after,
figure > ul > li > ul:after,
figure > ul > li > ul > li:first-of-type:before,
figure > ul > li > ul > li:last-of-type:before,
figure > ul > li > ul > li:before{
display: none;
}
figure > ul > li > ul > li.col-lg-2{
padding-right:0;
padding-left:30px;
}
figure > ul > li > ul > li > a,
figure > ul > li > ul > li > ul{
top:-50px;
}
figure ul > li > ul > li.tps-org-branch-end:last-of-type{ /* hiding the bottom section of the vertical line above */
border-left: 2px solid #fff;
right:2px;
width:calc(100% + 3px);
}
}
/* 88
88
88
,adPPYba, ,adPPYba, 88 ,adPPYba, 8b,dPPYba, ,adPPYba,
a8" "" a8" "8a 88 a8" "8a 88P' "Y8 I8[ ""
8b 8b d8 88 8b d8 88 `"Y8ba,
"8a, ,aa "8a, ,a8" 88 "8a, ,a8" 88 aa ]8I
`"Ybbd8"' `"YbbdP"' 88 `"YbbdP"' 88 `"YbbdP"' */
/* Line color
-------------------------------------------------*/
figure ul li a,
figure > ul > li > ul,
figure > ul > li > ul:after,
figure > ul > li > div:after,
figure > ul > li > ul > li,
figure > ul > li > ul > li:before,
figure > ul > li > ul > li > ul,
figure > ul > li > ul > li > ul > li,
figure > ul > li > ul > li > div > ul,
figure > ul > li > ul > li > div > ul > li,
figure > ul > li ul > li > ul > li > ul,
figure ul > li > ul > li > ul > li > ul > li,
figure > ul > li > ul > li > .row > ul,
figure > ul > li > ul > li > .row > ul > li,
figure > ul > li > ul > li > .row > ul > li >ul,
figure > ul > li > ul > li > .row > ul > li >ul > li{
border-color: #bbb;
}
/* Background color
-------------------------------------------------*/
#tps-org-chart,
figure ul > li > ul > li > ul > li.tps-org-branch-end{
background: #fff;
}
/* Box colors by column Style A
-------------------------------------------------*/
figure > .style-A ul li .chartBtn{ background:#4c78a0;} /* level 1 and default box color */
figure > .style-A > li > .chartBtn{ background:#009c9e;}
figure > .style-A > li > ul > li:nth-of-type(1) .chartBtn{ background:#009c9e; }
figure > .style-A > li > ul > li:nth-of-type(1) .chartBtn:hover{ color:#FFFFFF; }
figure > .style-A > li > ul > li:nth-of-type(2) .chartBtn{ background:#7ca018; }
figure > .style-A > li > ul > li:nth-of-type(2) .chartBtn:hover{ color:#FFFFFF; }
figure > .style-A > li > ul > li:nth-of-type(3) .chartBtn{ background:#e89b03; }
figure > .style-A > li > ul > li:nth-of-type(3) .chartBtn:hover{ color:#FFFFFF; }
figure > .style-A > li > ul > li:nth-of-type(4) .chartBtn{ background:#ce5b46; }
figure > .style-A > li > ul > li:nth-of-type(4) .chartBtn:hover{ color:#FFFFFF; }
figure > .style-A > li > ul > li:nth-of-type(5) .chartBtn{ background:#de5433; }
figure > .style-A > li > ul > li:nth-of-type(5) .chartBtn:hover{ color:#FFFFFF; }
/* figure > .style-B ul li .chartBtn{ background:#909090;} */
figure > .style-B ul li .chartBtn{ background:#fdfae7;}
/* figure > .style-B > li > .chartBtn{ background:#01a8a0;} */
figure > .style-B > li > .chartBtn{ background:#014a2c;}
figure > .style-B > li > .chartBtn a {color: #fff}
figure > .style-B > li > ul > li > .chartBtn{background-color: #00854c}
figure > .style-B > li > ul > li > .chartBtn a {color: #fff}
/* figure > .style-B > li > ul > li > ul > li > .chartBtn{background-color: #67a0a7;} */
figure > .style-B > li > ul > li > ul > li > .chartBtn{background-color: #d5f9d3;}
/* figure > .style-B > li > ul > li > .row > ul > li > .chartBtn{background-color: #67a0a7;} */
figure > .style-B > li > ul > li > .row > ul > li > .chartBtn{background-color: #d5f9d3}
/*End*/
@media only screen and (min-width: 1500px) { /*Nicole edit*/
/* figure > .style-B{
width: 75% !important;
} */
figure .t2-1, figure .t2-2, figure .t2-3, figure .t2-5{
/* left: -12% !important; */
}
}
@media only screen and (min-width: 1400px) { /*edit by Nicole*/
figure > .style-B{
width: 80%;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1400px){ /*edit by Nicole*/
figure > .style-B{
width: 1050px;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media only screen and (min-width: 1200px) { /*edit by Nicole*/
figure > .style-B ul li .chartBtn{
min-height: 120px;
}
figure .col-xl-2, figure .col-xl-3{
flex: 0 0 20% !important;
max-width: 20% !important;;
}
figure .col-xl-4{
flex: 0 0 40% !important;
max-width: 40% !important;
}
/*Box Height*/
figure > .style-B > li > ul > li > .row > ul > li > .chartBtn{
height: 120px;
}
figure > .style-B > li > ul > li > ul > li > .chartBtn{
height: 120px;
}
figure > .style-B > li > ul > li > .chartBtn{
height: 70px;
}
figure > ul > li > ul > li > .row > ul > li .chartBtn {
min-height: 120px;
}
/* figure > .style-B ul li .chartBtn {
height: 120px !important;
} */
figure .chartBtn:not(figure .laco, figure .smo, figure .lao, figure .dao, figure .director){
width: calc(100% - 0px);
}
figure .t2-1, figure .t2-2, figure .t2-3, figure .t2-5{
/* left: -9%; */
}
figure .t2-3, figure .t2-4{
width: 110% !important;
}
figure .t2-4{
left: 2% !important;
}
figure .t2-1:after{
content: "";
width: calc(50%);
height: 30px;
margin: 0 auto;
position: absolute;
border-left: 2px solid;
top: 0;
left: calc(50% - 0%);
display: block;
z-index: 0;
border-color: #bbb;
}
figure .t2-2:after{
content: "";
width: calc(50%);
height: 30px;
margin: 0 auto;
position: absolute;
border-left: 2px solid;
top: 0;
left: calc(50% + 0%);
display: block;
z-index: 0;
border-color: #bbb;
}
figure .t2-3:after{
content: "";
width: calc(50%);
height: 30px;
margin: 0 auto;
position: absolute;
border-left: 2px solid;
top: -70px;
left: calc(50% - 5%);
display: block;
z-index: 0;
border-color: #bbb;
}
figure .t2-4:after{
content: "";
width: calc(50%);
height: 30px;
margin: 0 auto;
position: absolute;
border-left: 2px solid;
top: -70px;
left: calc(50% - 5%);
display: block;
z-index: 0;
border-color: #bbb;
}
figure .t2-5:after{
content: "";
width: calc(50%);
height: 32px;
margin: 0 auto;
position: absolute;
border-left: 2px solid;
top: -0px;
left: calc(50% + 0%);
display: block;
z-index: 0;
border-color: #bbb;
}
}
/*figure > ul > li > ul > li:nth-of-type(6) .chartBtn{ background:#00b0ab; }
figure > ul > li > ul > li:nth-of-type(6) .chartBtn:hover{ color:#00b0ab; }*/
/* Darken each level
-------------------------------------------------*/
/* figure > ul > li > ul > li > a > span{
background:rgba(0,0,0,0);
}
figure > ul > li > ul > li > ul > li > a > span,
figure > ul > li > ul > li > .row > ul > li > a > span{
background:rgba(0,0,0,0.2);
}
figure > ul > li > ul > li > ul > li > ul > li > a > span,
figure > ul > li > ul > li > .row > ul > li > ul > li > a > span{
background:rgba(0,0,0,0.4);
}
figure > ul > li > ul > li > ul > li > ul > li > ul > li > a > span{
background:rgba(0,0,0,0.6);
} */