body, html {
    font-size: 2vh;
    background-color: #fff;
}

.board {
    height: 100vh;
    width: 100vw;
    margin: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.department{
    padding: 2.25vh 0;
}
.department .sub-header{
    text-align: center;
    color: #70665c;
    text-transform: uppercase;
    font-size: 1.75vh;
}
.department .department-header{
    font-size: 2.5vh;
    text-align: center;
    color: #771512;
    text-transform: uppercase;
    font-weight: 700;
}

.board .projects-container{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
}

.board .projects {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /*Add overflow:auto if need scroll*/
}
/*
.board .projects .project {
    width: 100%;
    overflow: hidden;
    padding: 0.75vh 4vh;
    background-color: rgba(255, 255, 255);
    border-bottom: 0.1vh solid #dadfd8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8vw;
    min-height: 6.9vh;
}
*/
.board .projects .project {
	width: 100%;
	overflow: hidden;
	padding: 0.75vh 4vh;
	background-color: rgba(255, 255, 255);
	border-bottom: 0.1vh solid #DADFD8;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 8vh;
	min-height: 8vh;
}

.board .projects .project:nth-child(even){
    background-color: #f1f9ee;
}

.board .projects .project .column-2{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.board .projects .project .name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 1vh;
    text-transform: uppercase;
    color: #000000;
}


.board .projects .project .name-text-color{
    font-weight: 700;
    font-size: 2.5vh;
    line-height: 1;
}

.board .projects .project .progressbar {
    width: 100%;
    height: 1.25vh;
    background-color: #f1f1f1;
    border-radius: 0.75vh;
    position: relative;
    margin-bottom: 0.5vh;
}

.board .projects .project .progressbar .percentage {
    height: 1.25vh;
    overflow: hidden;
    border-radius: 0.75vh;
    position: absolute;

}

.board .projects .project .progressbar.green .percentage {
    background-color: #156413;
}

.board .projects .project .progressbar.yellow .percentage {
    background-color: #ddcf04c7;
}

.board .projects .project .progressbar.orange .percentage {
    background-color: #e66f0e;
}

.board .projects .project .progressbar.red .percentage {
    background-color: #9b2510;
}


.board .projects .project .details .progressbar {
    width: 100%;
    height: 2vh;
    background-color: #f1f1f1;
    border-radius: 2vh;
    position: relative;

}

.board .projects .project .details .progressbar .percentage {
    height: 2vh;
    border-radius: 2vh;

}

.board .projects .project .details .progressbar .label {
    height: 2vh;
    border-radius: 2vh;
    font-size: 1.5vh;
    font-weight: 700;
    line-height: 2vh;
    padding: 0vh 1vh;
}
.eyebro-name{
    color: #70665c;
    font-size: 1.3vh;
    text-transform: uppercase;
}

/*Red*/
.board .projects .project-red .percentage{
    background-color: #9b2510;
}
.board .projects .project-red .progressbar .label{
    border-color: #9b2510;
}

/*Green*/
.board .projects .project-green .percentage{
    background-color: #52b22a;
}
.board .projects .project-green .progressbar .label{
    border-color: #52b22a;
}

/*Yellow*/
.board .projects .project-yellow .percentage{
    background-color: #d2b501;
}
.board .projects .project-yellow .progressbar .label{
    border-color: #d2b501;
}

/*Orange*/
.board .projects .project-orange .percentage{
    background-color: #e66f0e;
}
.board .projects .project-orange .progressbar .label{
    border-color: #e66f0e;
}


/*Details*/
.project-details{
    display: flex;
    font-size: 1.8vh;
}
.project-details strong{
    display: flex;
    /*font-size: 1.8vh;*/
}
.footer
{
    text-align: center;
    padding: 0.75vh 0 2.5vh;
    background-color: #ffffff;
}
.footer-logo{
    max-width: 12vh;
}

@media only screen and (max-width: 980px){
.board .projects .project .nameproject {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width:40vw;
}
}