.square-left {
    position: absolute;
    left: 2%;
    width: 40%;
    top: 2%;
    height: 96%;
    background-color: white;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    overflow: auto;
}

.square-right {
    position: absolute;
    right: 2%;
    width: 54%;
    top: 2%;
    height: 96%;
    background-color: white;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

#projects_tab {
    width: 100%;
    height: 100%;;
}

.project-card {
    width: 90%;
    margin: 10px;
}

.login-card {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    height: 20px;
    text-align: center;
}

.unauthorized-card {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
    height: 20px;
    text-align: center;
}

#login_container {
    height: 100%;
}

#main_content { 
    height: 100%;
}

#loading {
    width: 100%;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
}

.active {color: green;}
.inactive {color: orange;}
.canceled {color: red;}
.depracated {color: yellow;}
.hidden {display: none;}