style.css

:root {
    --base-blue:#4b74ff;
    --base-black:#333;
    --white:#FFF;
    }
    
    body {
    font-family:Lato, sans-serif;
    text-align:center;
    color:var(--base-black);
    margin:0;
    }
    
    button#addMembers {
    position:relative;
    border:none;
    display:inline-flex;
    vertical-align:middle;
    cursor:pointer;
    border-radius:24px;
    font-size:14px;
    margin-left:20px;
    padding-left:10px;
    line-height:25px;
    top:21px;
    }
    
    #content {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:minmax(150px,auto);
    grid-auto-columns:minmax(220px,auto);
    /* grid-gap: 5px; */
    margin:0 auto;
    height:calc(100vh);
    overflow: hidden;
    }
    
    #content #leftPanel {
    background:var(--base-black);
    padding:10px;
    }
 
    #leftPanel {
    grid-column:1;
    grid-row:1/5;
    }
    
    #tableHeader {
    background:var(--white);
    grid-column:2/7;
    grid-row:1/5;
    overflow: hidden;
    }
    
    #tableHeader h1 {
    display:inline-grid;
    margin-left:10px;
    }
    
    #tableContainer {
    grid-column:2/7;
    grid-row:2/5;
    }
    
    #memberForm {
    margin: 0 15px;
    display: grid;
    grid-template-rows: 75vh;
    overflow-x: hidden;
    overflow-y: auto; 
    }
    
    .navHeader {
    color: var(--white);
    display:flex;
    margin-left:10px;
    }
    
    .header.div-table-row .div-table-col:first-child {
    border-left:5px solid var(--white)!important;
    }

    .header.div-table-row .div-table-col {
        font-weight: 600;
    }
    
    /* Left Panel Links */
    nav ul {
    display:flex;
    justify-content:space-between;
    flex-direction:column;
    list-style:none;
    text-align:left;
    padding-left:0;
    }
    
    nav ul li {
    padding:10px;
    }
    
    nav ul li.active {
    background-color:var(--base-blue);
    width:200px;
    height:20px;
    display:flex;
    }
    
    nav ul li a {
    color:#c6cbd4;
    text-decoration:none;
    display:flex;
    vertical-align:middle;
    align-items:center;
    cursor:pointer;
    }
    
    /* table */
    #div-table {
    display:table;
    width:auto;
    min-width: 1093px;
    }
    
    .div-table-row {
    /* display:table-row; */
    width:auto;
    clear:both;
    height:59px;
    box-shadow:0 0 1px rgba(0,0,0,.25);
    }
    
    .div-table-col {
    width:162px;
    min-width:120px;
    height:59px;
    opacity:0.9;
    background-color:var(--white);
    line-height:57px;
    float:left;
    display:table-column;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    }
    
    .div-table-col:last-child,.div-table-col:first-child {
    justify-content:center;
    display:flex;
    align-items:center;
    width:120px;
    }
    
    .div-table-col:nth-child(6) {
    width:250px;
    }
    
    .div-table-row:first-child {
    background-color:#fbfbfb!important;
    }
    
    .div-table-row:nth-child(even) {
    background-color:#c6cbd4;
    }
    
    .div-table-row:hover {
    background-color: var(--base-blue);
    }
    
    .div-table-row > .div-table-col:first-child {
    width:70px;
    min-width:70px;
    border-left:5px solid var(--white);
    }
    
    .div-table-row:hover > .div-table-col:first-child {
    border-left:5px solid var(--base-blue);
    }
    
    .div-table-col i.material-icons {
    cursor:pointer;
    vertical-align:middle;
    }
    
    .div-table-row:first-child .div-table-col i.material-icons {
    font-size:14px;
    }
    
    @media only screen and (min-width: 1900px) {
        #content{
            grid-auto-columns: minmax(220px, 300px);
        }
    
        .div-table-col{
            width: 235px;
        }
    }
    
    /* Modal */
    .modal {
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display:none;
    overflow:auto;
    background-color:#000;
    background-color:rgba(0,0,0,0.7);
    z-index:9999;
    }
    
    .modal-window {
    position:relative;
    background-color:var(--white);
    width:50%;
    margin:5% auto;
    padding:20px;
    }
    
    .modal-footer {
    display:flex;
    justify-content:flex-end;
    }
    
    div#tableHeader>div:first-child {
    box-shadow:0 1px 3px rgba(0,0,0,0.35);
    }
    
    .flex-start {
    display:flex;
    justify-content:flex-start;
    }
    
    .modal-close:hover,.modal-close:focus {
    color:#000;
    cursor:pointer;
    }
    
    .modal-close {
    position:absolute;
    top:0;
    right:0;
    color:rgba(0,0,0,0.3);
    height:30px;
    width:30px;
    font-size:30px;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    }
    
    #modal-error-text {
    position:relative;
    top:10px;
    right:130px;
    color:red;
    display:none;
    }
    
    .btn-default {
    background:var(--white);
    color:var(--base-blue);
    border:1px solid var(--base-blue);
    font-size:14px;
    border-radius:24px;
    height:32px;
    width:74px;
    margin:5px;
    cursor:pointer;
    text-align:center;
    font-weight:400;
    font-style:normal;
    font-stretch:normal;
    letter-spacing:normal;
    text-align:center;
    outline:none;
    }
    
    .btn-primary {
    color:var(--white);
    background:var(--base-blue);
    border:1px solid var(--base-blue);
    margin:5px;
    border-radius:24px;
    height:32px;
    min-width:74px;
    font-size:14px;
    cursor:pointer;
    width:auto;
    text-align:center;
    font-weight:400;
    font-style:normal;
    font-stretch:normal;
    letter-spacing:normal;
    text-align:center;
    outline:none;
    }
    
   .btn-ddown{
    width:auto;
    height:32px;
    border-radius:2px;
    line-height:25px;
    padding-left:12px;
    margin-right: 20px;
    box-shadow:0 0 2px rgba(0,0,0,0.35);
    color:var(--base-black);
    background:var(--white);
    outline:none;
    border:none;
    cursor:pointer;
    display:inline-flex;
    vertical-align:middle;
   }

    .open {
    display:block;
    }
    
    input[type=text] {
    width:100%;
    padding:10px;
    margin:8px 0;
    display:inline-block;
    border:1px solid #ccc;
    box-sizing:border-box;
    }
    
    form#addMemberForm label {
    display:flex;
    font-size:14px;
    }
    
    #dropdown label {
    display:block;
    }
          
    .dropdown-list {
    box-shadow:0 1px 3px rgba(0,0,0,0.35);
    width:auto;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
    padding-left:0;
    margin:2px 0 0;
    border-radius:0;
    position:absolute;
    background: var(--white);
    top:31px;
    }

    .dropdown-list li {
    list-style:none;
    display:flex;
    width:auto;
    padding:5px;
    padding-right: 10px;
    font-size:14px;
    }

    #dropdown-list-status{
        left: 12.5%;
    }

    ul#dropdown-list-comp input,
    ul#dropdown-list-status input{
        margin-right: 10px;
    }
    
    .dropdownHolder {
    z-index:9;
    margin:20px;
    display:flex;
    position:relative;
    }
    
    .hidden {
    display:none;
    }
    
    #counter {
    margin:0;
    }

    @-moz-document url-prefix() {
       #addMembers,
       .btn-ddown{
           padding-top: 3px;
       }
    }