body {
margin: 0;
display: block;
box-sizing: content-box;
background: #e6e6e6;
}

contentboard {
display: flex;
width: 100%;
height: 100%;
}

contentboard left {
width: 80px;
background: white;
box-shadow: 0px 0px 10px #bbbbbb;
}

contentBoard right {
width: calc( 100% - 80px );
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

nav ul {
display: block;
width: 50%;
float: right;
}

body {font-family: "Ubuntu", Arial;}

header {
height: 80px;
border-bottom: 1px solid gainsboro;
color: #4c4c4c;
}

nav ul li {
padding: 27px;
font-size: 23px;
FONT-WEIGHT: 100;
float: right;
display: block;
padding-left: 47px;
transition: 0.3s;
}

nav {
height: 80px;
background: white;
background: linear-gradient(45deg, white, white 64%);
}

nav ul li:hover {
background: #007eff;
cursor: pointer;
color: white;
transition: 0.3s;
}

li.nameAn {
background: #007eff;
color: white;
}

li.nameAn:hover {
background: #0764c3;
}
logo {
display: block;
width: 80px;
height: 80px;
cursor: pointer;
}

logo img {
width: 58px;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: 15px;
left: 10px;
transition: 0.1s;
filter: grayscale(1);
}

logo:hover {
background: #f8f8f8;
}

logo:hover img {width: 65px;position: relative;top: 12px;left: 7px;transition: 0.1s;filter: grayscale(0);}

logo {
background: #f5f5f5;
}

onnav li {
list-style: none;
width: 80px;
height: 80px;
border-bottom: 1px solid whitesmoke;
}

onnav li img {
width: 54px;
text-align: center;
position: relative;
top: 11px;
left: 14px;
}

onnav {
display: block;
}

onnav li:hover {
background: #e8e8e8;
cursor: pointer;
}
li.normal:hover {
background: #009dff;
}

li.normal.active {
background: #009dff;
}
onnav li img {
filter: grayscale(0);
transition: 0.2s;
}
onnav li:hover img {
filter: grayscale(1);
transition: 0.2s;
}

nav ul li.normal img {
width: 31px;
position: absolute;
left: 16px;
top: 24px;
}

nav ul li.normal {
position: relative;
padding-left: 62px;
}

nav ul li.normal:hover img {
filter: grayscale(1);
}

nav ul li.normal {
border-left: 1px solid gainsboro;
}

nav ul li.normal:last-child {
border: 0;
}

onnav li label {
display: block;
position: absolute;
left: 0;
top: 0;
font-size: 28px;
padding: 24px;
background: #007eff;
width: 200px;
z-index: 1;
text-align: right;
left: -500px;
transition: 0.4s;
color: white;
opacity: 0;
}

onnav li {
position: relative;
}

onnav li:hover label {
left: 80px;
transition: 0.2s;
pointer-events:none;
}

onnav li img {
background: white;
z-index: 9;
padding: 13px;
left: 0;
top: 0;
}

onnav li:hover label {
opacity: 1;
}

ct {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 80px;
}

left {
position: relative;
}

button.role {
background: white;
border: 1px solid gainsboro;
width: 40px;
height: 26px;
border-radius: 80px;
position: relative;
top: 31px;
left: 18px;
cursor: pointer;
padding: 0;
}

button.role span {
position: relative;
display: block;
width: 24px;
height: 100%;
background: #6e6e6e;
border-radius: 80px;
}

button.role.active span {
left: 14px;
background: white;
}

button.role.active {
background: #3a3a3a;
border: 1px solid #4a4a4a;
}
button.role {
outline: none;
}

img.role_load {
position: absolute;
top: 3px;
width: 23px;
left: 29px;
animation: joinload 2s infinite;
height: 23px;
opacity:0;
}

@keyframes joinload {
from {transform: rotate(0deg); left: 0px; opacity:1;}
to {transform: rotate(360deg); left: 60px; opacity:0;}
}

cob {
display: block;
width: 100%;
height: calc(100% - 81px);
overflow: hidden;
}

lineup {
display: flex;
width: 100%;
height: 30%;
min-height: 200px;
}

projects {
display: block;
width: 46%;
margin: 2%;
border-radius: 10px;
background: white;
border: 1px solid whitesmoke;
}

projects h2 {
margin: 0;
font-weight: 100;
color: #007eff;
padding: 18px;
padding-left: 62px;
}

h2 {
margin: 0;
font-weight: 100;
}

project {
display: block;
width: 46%;
padding: 2%;
height: calc(100% - 6.2%);
background: #ededed;
border-right: 1px solid gainsboro;
}

titleproj {
padding: 10px;
background: #007eff;
border-radius: 9px;
padding-left: 20px;
padding-right: 20px;
color: white;
display: inline-block;
}

project h2 {
font-size: 40px;
font-weight: 100;
text-transform: capitalize;
}

ttl {
display: flex;
width: 100%;
height: 100%;
}

ttl project:last-child {
background: #f7f7f7;
}

ttl project:last-child {padding: 0;height: 100%;width: 50%;}

box_half_proj {
display: block;
width: 96%;
padding: 2%;
height: 47%;
border-bottom: 1px solid gainsboro;
}

box_half_proj h3 {
margin: 0;
padding: 10px;
font-size: 31px;
font-weight: 100;
color: #4b4b4b;
}

box_half_proj:last-child h3 {
color: green;
}
.loading_pros img {
width: 27px;
}

.loading_pros {
text-align: center;
padding: 20px;
}

li.nameAn span {
width: 20px;
display: inline-block;
padding: 13px;
margin-right: 10px;
}

li.nameAn span:first-child {
background: #64acf3;
border-radius: 80px;
padding-top: 0;
width: 11px;
height: 23px;
position: absolute;
left: 7px;
top: 22px;
}

li.nameAn {
position: relative;
}

li.nameAn span {
width: 53px;
background: #64acf3;
border-radius: 80px;
}

.proDes h1 {
margin: 0;
padding-top: 10px;
position: relative;
}

.proDes h1 span {
background: grey;
color: white;
font-size: 14px;
font-weight: 100;
padding: 1px;
border-radius: 6px;
border: 2px solid #7a7777;
position: relative;
top: -8px;
padding-left: 6px;
padding-right: 6px;
}

.proDes h1 span.blue {
background: #00ff53;
border-color: #15e979;
color: #138800;
}

.proDes p {
font-size: 14px;
color: gray;
margin: 0;
}

.proDes h1 span.type {
left: 5px;
}

.proDes {
max-height: 79px;
overflow: hidden;
}

.timeline_project {
height: calc(100% - 120px);
padding-top: 20px;
}

.timeline_project li {
position: relative;
z-index: 0;
list-style: none;
padding: 14px;
}

.timeline_project::before {content: "";width: 5px;height: 100%;position: absolute;left: 10px;top: 69px;background: #939393;z-index: 1;}

.timeline_project {
position: relative;
}

.timeline_res {
overflow: hidden;
height: calc(100% - 70px);
box-shadow: inset 0px 0px 27px #ededed;
overflow-y: auto;
}

.timeline_res li {
padding-left: 38px;
font-size: 19px;
position: relative;
}

.timeline_res li::before {
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 13px;
background: #007eff;
border-radius: 80px;
border: 3px solid #00b9ff;
}

.timeline_project::before {
background: #007eff;
border-radius: 80px;
height: calc(100% - 98px);
border: 2px solid #007eff;
width: 2px;
left: 10px;
}

.timeline_res {
overflow: hidden;
height: calc(100% - 70px);
box-shadow: inset 0px 0px 27px #ededed;
overflow-y: auto;
}

.timeline_res li {
padding-left: 38px;
font-size: 19px;
position: relative;
}

.timeline_res li::before {
content: "";
width: 20px;
height: 20px;
position: absolute;
left: 0px;
top: 13px;
background: #007eff;
border-radius: 80px;
border: 3px solid #00b9ff;
}

.timeline_project::before {
background: #007eff;
border-radius: 80px;
height: calc(100% - 98px);
border: 2px solid #007eff;
width: 2px;
left: 10px;
}

project h2 {
box-shadow: 0px 0px 17px #ededed;
position: relative;
z-index: 1;
}

onnav li:hover label {
z-index: 9;
}
p.description {
max-width: 75%;
}

p.description {
max-width: 75%;
}

project h2 {
font-size: 30px;
color: #7f7f7f;
}

.timeline_res li.compl {
color: #bebebe;
}

.timeline_res li.compl::before {
border-color: #ededed;
background: #0ad90a;
}

.timeline_res li::before {
z-index: 10;
}

.timeline_project::before {
z-index: 1;
background: #d1d1d1;
border-color: #d1d1d1;
width: 2px;
border: 0;
left: 12px;
}

.timeline_res li {
position: relative;
z-index: 9;
}

.timeline_res li::before {
border-color: #ededed;
}

.timeline_res li.compl:hover {
transition: 0.3s;
color: #0ad90a;
cursor: pointer;
}

.timeline_res li {
cursor: pointer;
}

.timeline_res li.wait::before {
background: #7c7c7c;
}

.timeline_res li.prob::before {
background: red;
}

li.wait {
color: #bebebe;
}

li.prob {
color: #bebebe;
}

li.worki {
color: #007eff;
}

li.worki {
font-size: 30px;
}

.timeline_res li.worki::before {
top: 18px;
}
.timeline_res li:hover::before {
width: 30px;
transition: 0.3s;
}

box_half_proj list {
height: calc(100% - 56px);
width: 100%;
overflow: hidden;
overflow-y: auto;
display: block;
}

box_half_proj list li {
list-style: none;
padding: 10px;
margin-bottom: 5px;
background: #e1e3eb;
border-radius: 5px;
}

box_half_proj list li label {
font-size: 20px;
margin-left: 10px;
}

box_half_proj list li span label {
font-size: 12px;
position: absolute;
top: 0;
}

box_half_proj list li {
position: relative;
padding: 0;
height: 44px;
display:flex;
}

box_half_proj list li span {
float: right;
width: 22%;
border-left: 1px solid gainsboro;
display: block;
}

box_half_proj list li  label {
padding: 10px;
display: block;
width: 45%;
}

box_half_proj list li span label {
position: absolute;
top: 0;
left: 0;
width: 88%;
padding: 2px;
color: #848db1;
text-align: left;
margin-left: 4px;
}
box_half_proj list li span  {
position: relative;

}



box_half_proj list li span {
padding: 17px;
text-align: left;
padding-top: 20px;
padding-left: 5px;
color: #21306b;
}

box_half_proj list li span:hover {
background: #007eff;
color: white;
cursor: pointer;
}

box_half_proj list li span:hover label {
color: #88c2fd;
pointer-events: none;
}

box_half_proj list li {
width: 96%;
}

onnav li {
z-index: 99;
}

onnav li.active img {
background: #c7e3ff;

z-index:999;
}

onnav li.active {
background: #c7e3ff;
z-index:999;
}