:root{
    /*color*/
    --color-white: #FFF;
    --color-blue: rgb(0, 0, 100);
    /**/
    --color-success: rgba(75, 248, 132, 1.0);
    --color-info: rgba(168, 84, 131, 1.0);
    --color-danger: rgba(224, 56, 44, 1.0);
    --color-warning: rgba(251, 194, 28, 1.0);
    --color-primary: rgba(232, 125, 13, 0.9);
    --color-primary-light: rgba(232, 125, 13, 0.5);
    --color-bkg-light:  rgba(34, 38, 42, 0.5);
    --color-input-bkg:  rgba(200, 200, 200, 0.2);
    --color-bkg: rgba(0, 0, 0, 1.0);
    --color-bkg-submenu: rgba(48, 49, 53, 1.0);

    /*size*/
    --dim-slim:  1px;
    --dim-tiny: 3px;
    --dim-small:  5px;
    --dim-medium:  8px;
    --dim-large:  10px;
    --dim-tlarge:  13px;
    --dim-slarge:  15px;
    --dim-mlarge:  18px;
    --dim-xlarge:  20px;
    --box-dim:  40px;
}
*{
    box-sizing: border-box;
    /* overflow-x: hidden; */
}

.txt-white{
    color: white;
}
.project{ 
    margin: auto; 
    width: 100%;
}

.project .project-header{
    display: flex;
    flex-direction: column; 
}

.project .project-header .fa{
    font-size: 20px;
    margin-right: var(--dim-small);
    color: var(--color-primary);
}

.project .project-header img{ 
    width: 100%;
    height: 300px;
    background-color: rgba(150, 150, 150, 0.2);
}

.project-header .title{
    font-size: 15px;
    color: var(--color-primary);
    text-wrap: wrap;
}
.project .project-header .project-header-details{
    /* margin: var(--dim-small) 0; */
}
.project .project-header .project-header-details a{
    text-decoration: none;
}
.project .project-header .project-header-details button{
    color: var(--color-primary);
    overflow: hidden;
    width: 100%;
    text-wrap: wrap;
}

.project .project-header .project-header-details .micro{ 
    display: flex;
    flex-direction: row; 
    justify-content: left;
    align-items: center;
}

.project .project-header .project-header-details .micro i,
.project .project-header .project-header-details .micro label{
    font-size: 10px;
}

.project .project-header .project-header-details .micro > *{  
    margin-right: var(--dim-large);
}

.project .project-abstract{
    display: flex;
    flex-direction: column;
    margin: 7px 0;
}
.project-listings{
    display: flex;
    flex-direction: column; 
    color: #FFF;
}
.project-listings li{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 5px;
}
.project-listings li label{
    display: flex;
    align-items: center;
    width: 100%;
}
.project-listings li .header{
    display: flex;
    align-items: center; 
    min-height: 30px; 
    padding-right: 10px;
    text-wrap: nowrap;
    font-weight: bold;
}
.project-listings li .text{
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
}
.project-listings li:nth-child(odd){
    background-color: var(--color-bkg-light);
}