content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

listbox {
    margin: 0 1em 2em 1em;
    border-radius: 1.5em;
    width: 100%;
    max-width: 650px;
    background-color: $color-0;
    box-shadow: 1px 1px 2px #777;
    &:hover,
    &:focus,
    &:active {
        box-shadow: 3px 3px 8px #777;
    }
    .list {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 0.7em;

        listheader {
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 3em 1fr 3em;
            grid-template-areas:
                ". title question"
                "info info info";
            margin: 0;
            text-align: center;
            padding: 0.5em;
            border-top-left-radius: 1.2em;
            border-top-right-radius: 1.2em;
            h2 {
                grid-area: title;
                margin: 0;
                line-height: 150%;
            }
            h6 {
                grid-area: info;
                margin: 0;
                font-size: 80%;
            }
            tooltip {
                grid-area: question;
                justify-self: end;
            }
        }

        row {
            display: grid;
            grid-template-columns: 1fr 1em 3em;
            grid-template-rows: auto;
            grid-template-areas:
                "address . del"
                "info info info";
            align-items: center;
            padding: 0.3em 0.3em 0.3em 1.3em;

            user {
                grid-area: address;
                overflow: hidden;
                overflow-wrap: break-word;
            }
            & > post {
                grid-area: del;
                place-self: center;
            }
        }
        add {
            display: grid;
            grid-template-columns: 1fr 2em;
            grid-template-rows: auto;
            margin-top: auto;
            border-top: $lightest 2px solid;
            padding: 0.3em 0.5em 0.5em 0.5em;
            align-items: center;
            label {
                transition: 0.5s;
                img {
                    width: 2em;
                    transition: 0.5s;
                }
            }
            form {
                justify-self: end;
                display: flex;
                justify-content: end;
                width: 100%;
            }
            new {
                display: grid;
                grid-template-columns: 5% 1em 1fr 0.5em auto;
                grid-template-areas:
                    "input input input . save"
                    ". arrow domain . save"
                    "helper helper helper helper save";
                align-items: center;
                visibility: hidden;
                width: 0%;
                overflow: hidden;
                margin-left: -5px;
                transition: 0.5s;
                helper {
                    grid-area: helper;
                    font-size: 75%;
                    font-weight: 500;
                    color: $color-100;
                }

                input {
                    grid-area: input;
                    margin: 0;
                }
                post {
                    grid-area: save;
                    place-self: center;
                }
                domain {
                    grid-area: domain;
                    font-size: 80%;
                    color: #333;
                    overflow: hidden;
                    overflow-wrap: break-word;
                }
                img {
                    grid-area: arrow;
                    width: 1.2em;
                    align-self: start;
                }
            }

            input[type="checkbox"] {
                display: none;

                &:checked {
                    & ~ label {
                        transition: 0.5s 0.3s;
                        transform: translate(0, -50%);
                        & > img {
                            transform: rotate(45deg) scale(0.7, 0.7);
                            transition: 0.5s;
                        }
                    }
                    & ~ form > new {
                        visibility: visible;
                        width: 100%;
                        opacity: 1;
                        transition: 0.5s 0.3s;
                        padding: 0.5em;
                        border: 2px solid $color-10;
                        background-color: $color-30;
                        border-radius: 8px;
                    }
                }
            }
        }
    }

    blacklist {
        border: 3px solid black;
        border-radius: 1.5em;
        > listheader {
            background-color: black;
            h2 {
                color: white;
            }
        }
    }
    whitelist {
        border: 3px solid white;
        border-radius: 1.5em;
        > listheader {
            background-color: white;
            h2 {
                color: black;
            }
        }
    }
    faillist {
        border: 3px solid $color-50;
        border-radius: 1.5em;
        > listheader {
            background-color: $color-50;
            h2 {
                color: white;
            }
        }
    }
}

post {
    cursor: pointer;
    transition: 0.5s;
    i.fa-check-circle {
        color: inherit;
        &:hover {
            color: green;
        }
    }
    &:hover {
        i.fa-users {
            color: rgb(75, 160, 194);
        }

        i.fa-cog {
            color: rgb(156, 156, 156);
        }

        i.fa-plus-circle {
            color: rgb(27, 195, 63);
        }

        i.fa-trash-alt {
            color: rgb(245, 42, 35);
        }

        i.fa-copy {
            color: rgb(245, 189, 35);
        }
        i.fa-angle-down {
            top: 3px;
        }
    }
}

.hidden {
    display: none;
}

lists-grid {
    display: grid;
    grid-template: auto / 60% 30%;
}

table.gridTable {
    thead {
        background-color: $color_thead_background;
        color: $color_thead_text;
    }

    td, th {
        align-items: center;
        min-width: 0;

        box-sizing: border-box;

        /*min-height: 50px;*/
        padding: 8px;
    }

    td {
        display: grid;
        grid-auto-flow: column;
    }

    th {
        display: flex;
    }

    tr {
        display: flex; 
        flex-direction: row; 
        flex-wrap: nowrap;

        background-color: transparent;
    }

    tbody{
        tr {
            background-color: transparent;

            border-bottom: 1px solid transparent;
            border-color: $color_tr_border;

            &:last-child {
                border: 0;
            }
        }        
    } 
}


tooltip {
    grid-area: question;
    justify-self: end;
    position: relative;
    display: inline;

    input[type="checkbox"] {
        display: none;
    }

    p {
        position: absolute;
        width: 250px;
        color: #fff;
        background: $color-70;
        text-align: center;
        visibility: hidden;
        opacity: 0;
        padding: 0.5em;
        border: 5px solid $color-90;
        border-radius: 0.5em;
        top: 50%;
        right: 0;
        box-shadow: 5px 5px 10px 3px #8c8c8c;
        transition: opacity 0.5s linear;

        &::before {
            content: "";
            position: absolute;
            right: 10px;
            bottom: 100%;
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-right: 15px solid $color-90;
        }
    }

    input {
        display: none;

        &:checked ~ p {
            visibility: visible;
            opacity: 1;
            z-index: 999;
        }
    }
}

.highlighted {
    font-size: 110%;
    text-shadow: 0px 0px 5px #84cff7;
    color: #2fa1e5;
}

addnew {
    padding: 1em 1em 0.5em 1em;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.5em 1.5em;
    grid-template-areas:
        "input . plus"
        "domain . ."
        "helper helper helper";
    align-items: start;

    helper {
        grid-area: helper;
        font-size: 75%;
        font-weight: 600;
        color: $color_input_focus;
    }
    input {
        font-size: 90%;
        outline: none;
        grid-area: 1 / 1 / 2 / 2;
        background-color: inherit;
        padding: 0.5em 0 0 0.5em;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border: none;
        border-bottom: 2px solid black;
        width: 100%;
        z-index: 15;

        &:focus {
            grid-area: input;
            border-bottom: 2px solid $color_input_focus;

            & + label {
                top: -0.1em;
                color: $color_input_focus;
                font-size: 70%;
                font-weight: 600;
                transition: color 0.5s ease-out;
            }

            & ~ domain {
                color: $color_input_focus;
                transition: color 0.5s ease-out;
            }

            & ~ post {
                visibility: visible;
                color: $color_input_focus;
            }
        }

        &:placeholder-shown {
            & + label {
                visibility: visible;
            }
        }

        &:not(:placeholder-shown) {
            & + label {
                top: -0.1em;
                color: $color_input_focus;
                font-size: 70%;
                font-weight: 600;
                transition: color 0.5s ease-out;
            }
        }
    }

    domain {
        color: grey;
        grid-area: domain;
        font-size: 80%;
        justify-self: end;
    }

    post {
        grid-area: plus;

        color: grey;
    }

    label {
        padding: 0.5em;
        font-size: 90%;
        color: grey;
        position: absolute;
        left: 1em;
        width: 100%;
        z-index: 10;
        top: 0.9em;
        width: max-content;
    }
}

.help2 {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    -moz-box-shadow: inset -1px 1px 2px 0px #bbdaf7;
    -webkit-box-shadow: inset -1px 1px 2px 0px #bbdaf7;
    box-shadow: inset -1px 1px 2px 0px #bbdaf7;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
    background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
    background-color: #79bbff;
    -webkit-border-radius: 42px;
    -moz-border-radius: 42px;
    border-radius: 42px;
    text-indent: 0px;
    border: 1px solid #84bbf3;
    display: inline-block;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    height: 28px;
    line-height: 28px !important;
    width: 28px;
    text-align: center;
}

.help2:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
    background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
    background-color: #378de5;
}

.help2:active {
    position: relative;
    top: 1px;
}

.clickable {
    font-weight: bold;
    color: $color_a_text;
    &:hover {
        color: $color_a_text_hover;
    }
}
confirm {
    grid-area: info;
    margin-right: 1em;
    font-weight: bold;
    p {
        grid-area: text;
    }
    .yes {
        grid-area: yes;
    }
    .no {
        grid-area: no;
    }
    padding: 0.8em;
    margin: 0.5em 0;
    color: $color_markdown_error_text;
    background-color: $color_markdown_error_background;
    border-radius: 0.5em;
    display: grid;
    grid-template-columns: 1fr auto 0.5em auto;
    grid-template-areas:
        "text text text text"
        ". yes . no";
}

.tabsetting,
.tabmember {
    border: 3px solid #70bcf9;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 4px 4px 8px grey;
    margin-bottom: 1.5em;
}

.tabsetting {
    border-top-right-radius: 0;
}
.activeTab {
    border: 3px solid #70bcf9;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #fff;
    border-bottom: none;
    margin-bottom: -4px;
    z-index: 10;
    box-shadow: 11px 0px 9px -8px gray;
}
members {
    div {
        width: 100%;
        display: flex;
        padding: 0 0.5em;
        margin-bottom: 1em;
        select {
            flex: 1;
            margin: 0.5em;
            width: inherit;
        }
        .button {
            margin: 0.5em;
        }
        & > post {
            display: flex;
        }
    }
    memberrow {
        display: grid;
        grid-template-columns: 1fr 1em 2fr 0.5fr 2em;
        align-items: center;
        margin: 0 1em;
        line-height: 1.8em;
        &:last-of-type {
            margin-bottom: 1em;
        }
        name {
            overflow: hidden;
            text-overflow: ellipsis;
            overflow-wrap: initial;
        }
        user {
            overflow: hidden;
            text-overflow: ellipsis;
            overflow-wrap: initial;
            @media screen and (max-width: 1199px) {
                grid-column: 1 / 5;
            }
        }
        post {
            justify-self: center;
        }
        confirm {
            grid-column: 1 / 6;
        }
    }
}
groups {
    h3 {
        margin: 0.8em 0.8em 0.5em 0.8em;
    }
    helper {
        margin: 1em;
        color: $color-80;
        font-weight: bold;
    }
}

formular {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    align-content: center;
    div {
        display: flex;
        align-items: center;
        p,
        span {
            margin-left: 0.5em;
        }
    }
    addnew {
        margin: 0.5em 0;
    }
    input[type="checkbox"] {
        margin: 0.5em;
    }
}