@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600&display=swap');



:root{
    --main-color:#8e44ad;
    --red:#e74c3c;
    --oragen:#f39c12;
    --white:#fff;
    --black:#2c3e50;
    --light-color:#888;
    --light-bg:#eee;
    --border:.1rem solid rgba(0,0,0,.2);
 }
 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    font-family: 'Nunito', sans-serif;
    margin: 0; padding: 0;
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
}

body{
    
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background-color: var(--light-bg);
    padding-left: 30rem;
    /* padding-bottom: 7rem; */
    
}

body.dark{
    --white:#222;
    --black:#fff;
    --light-color:#aaa;
    --light-bg:#333;
    --border:.1rem solid rgba(255,255,255,.2);
 }

.view-btn{
    margin: 3px;
    padding: 0px;
    width: 40px;
    background: var(--light-bg);
    color: var(--black);
    font-size: 10px;
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    border: 1px solid var(--light-color);
    border-radius: 10px;
}

.edit-btn{
    margin: 3px;
    padding-right: 11px;
    padding-left: 10px;
    width: 40px;
    background: var(--light-bg);
    color: var(--black);
    font-size: 10px;
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    border: 1px solid var(--light-color);
    border-radius: 10px;
}


.view-btn:hover, .edit-btn:hover{
    
    background: var(--black);
    color: var(--white);
    font-size: 10px;
    
    
    border: 1px solid var(--light-color);
    border-radius: 10px;
}



.container{
    
    padding: 20px;
    box-shadow: 3px 3px 20px var(--white);
    background: var(--white);
    border-radius: 10px;
    margin: 10px;
    margin-top: 50px;
   
}


.container table{
    border-collapse: collapse;
    text-align: left;


    padding: 20px;
    box-shadow: 3px 3px 20px var(--white);
    background: var(--black);
    border-radius: 10px;
    margin: 10px;
    margin-top: 50px;
}


table tr th, table tr td{
    padding:3px 15px;
    color: var(--black);
    vertical-align: middle;
    font-size: 12px;
    
}


table tr th{
    padding: 12px 15px;
    background: var(--light-bg);
}

table th:hover{
    cursor: pointer;
    background: var(--white);
}


table tr:hover{
    cursor: pointer;
    background: var(--light-bg);
}

table td:hover{
    cursor: pointer;
    background: var(--white);
}





table tr td:nth-child(1), table tr td:nth-child(2){
    text-align: center;
}

table tr td img{
    vertical-align: middle;
}


table tr td{
    border-bottom: 1px solid var(--light-bg);
}



table tr .empty{
    padding: 6px;
    background: var(--dark9);
}