:root {
    --primary-btn-bg-color           : #b8e8f3;
    --primary-btn-bg-color-second    : #a8d8e3;

    --primary-add-bg-color           : #b8dfff;
    --primary-add-bg-color-second    : #5ec3ef;

    --primary-update-bg-color        : #d7bdff;
    --primary-update-bg-color-second : #a67eff;

    --primary-delete-bg-color        : #ffcfcf;
    --primary-delete-bg-color-second : #e86f6f;

    --primary-show-bg-color          : #ccffcc;
    --primary-show-bg-color-second   : #79f0cc;
}


.flex > h1 {
    flex-grow:1;
}

col.actions_1{  width:45px; }
col.actions_2{  width:85px; }
col.actions_3{  width:125px; }
col.actions_4{  width:165px; }

.withactions tr td:last-child{
    text-align:right;
}

div.actions{
    text-align:right;
    margin-bottom:5px;
}

a.btn, button.btn {
    height:2rem;
}

[class^="btn_"],[class*=" btn_"] {
    --btn-first-color: var(--primary-btn-bg-color);
    --btn-second-color: var(--btn-first-color);
    background-image: linear-gradient(to bottom right, var(--btn-second-color) 10%, var(--btn-first-color) 74%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height:2rem;
}

a.btn img, button.btn img{
    height:100%;
    vertical-align:middle;
    margin-bottom:2px;
}

.btn_link {
    --btn-first-color: var(--primary-btn-bg-color);
    --btn-second-color: var(--primary-btn-bg-color-second);
}

.btn.btn_add {
    --btn-first-color: var(--primary-add-bg-color);
    --btn-second-color: var(--primary-add-bg-color-second);
}

.btn.btn_update {
    --btn-first-color: var(--primary-update-bg-color);
    --btn-second-color: var(--primary-update-bg-color-second);

}

.btn.btn_delete {
    --btn-first-color: var(--primary-delete-bg-color);
    --btn-second-color: var(--primary-delete-bg-color-second);

}

.btn.btn_show {
    --btn-first-color: var(--primary-show-bg-color);
    --btn-second-color: var(--primary-show-bg-color-second);
}

div.section~div.section{
    margin-top:2em;
}
h1~div.section{
    margin-top:1em;
}

/*** pseudo tables ***/

div.table{
    display:table;
}

div.tablerow{
    display:table-row;
}
div.tablerow *{
    display:table-cell;
}

/*** cards  ***/

div.card_container {
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    & ~ div.card_container {
        margin-top:3rem;
    }
}

div.card{
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;


    &>.head{
        display:flex;
        flex-direction:row;
        border-radius: 8px 8px 0 0;
        padding:5px;
        background-image: linear-gradient(to bottom, #dacdb1 11%, #f0e8d8 56%);
        &>span{
            flex-grow:1;
            line-height: 20px;
            padding: 5px;
        }
    }
    &>span{
        height:100%;
        padding: 5px;
    }
}

img.icon {
    height:1.5rem;
}