body {

}

@media (min-width: 800px) {
    div.vb_row {
        display: flex;
        gap: var(--vb-margin);
    }
    div.vb_col {
        flex: 1;
        &.vb_main {
            flex-grow: 3;
        }
    }
}

@media (max-width: 800px) {
    div.vb_row {
        display: auto;
    }
    div.vb_col {
        flex: 0;
    }
}

.mobile {
    @media (min-width: 800px) {
        display: none;
    }
}
.desktop {
    @media (max-width: 800px) {
        display: none;
    }
}

header#header {
    background-color: var(--vb-black);

    div#branding h1#site-name {
        a {
            color: var(--vb-higlight);
        }
    }
}

div#user-tools {
    a {
        &:hover {
            text-decoration: underline;
        }
    }
}

div.breadcrumbs {
    background-color: var(--vb-higlight-light);
    color: var(--vb-white);

    a {
        color: var(--vb-white);

        &:hover {
            color: var(--vb-black);
        }
    }
}

img.logo {
    width: 100%;
    margin-bottom: var(--vb-margin);
    border-radius: var(--vb-radius);
}

div.actions {
    float: right;
}
div.tile {
    @media (min-width: 800px) {
        padding: var(--vb-padding);
        background-color: var(--vb-grey);
        margin-bottom: var(--vb-margin);
        border-radius: var(--vb-radius);
    }
    @media (max-width: 800px) {
        margin-bottom: var(--vb-margin);
    }

    &.hot {
        background-color: var(--vb-higlight-light);
    }
}

a {
    &.link {
        color: var(--vb-higlight-dark);
        &:hover {
            color: var(--vb-higlight);
        }
    }
    &.button {
        background-color: var(--vb-higlight);
        &:hover {
            background-color: var(--vb-higlight-dark);
        }
    }
}

div.score {
    text-align: center;
    font-size: 60px;
}

div.content {
    img {
        width: 100%;
        border-radius: 10px;
    }

    ul li {
        font-size: 14px;
    }

    a {
        color: var(--vb-higlight-dark);
    }
}

table {
    width: 100%;
    &.vb_mb {
        margin-bottom: var(--vb-margin);
    }
    &.vb_hover {
        tr:hover {
            background-color: var(--vb-grey-dark);
        }
    }

    tr {
        &.active {
            background-color: var(--vb-higlight-light);
        }
        th, td {
            &.id {
                width: 10px;
                color: #ccc;
                text-align: center;
            }
            &.width-10 {
                width: 10px;
            }
            &.width-100 {
                @media (min-width: 800px) {
                    width: 100px;
                }
            }
            &.width-150 {
                @media (min-width: 800px) {
                    width: 150px;
                }
            }
            &.width-250 {
                @media (min-width: 800px) {
                    width: 250px;
                }
            }
            &.center {
                text-align: center;
            }
            &.right {
                text-align: right;
            }
        }
    }

    &.vb_agenda {
        th, td {
            text-align: center;
        }
        td.inactive {
            color: var(--vb-grey-dark);
        }
        td.active {
            background-color: var(--vb-higlight-light);
        }
        td a.event, td span.event {
            cursor: help;
            padding: 2px 6px;
            color: var(--body-fg);
            border-radius: var(--vb-radius);
            background-color: var(--vb-higlight);

            &:hover {
                color: var(--vb-white);
                background-color: var(--vb-higlight-light);
            }
        }
    }
}

form {
    select {
        width: calc(100%);
    }
    input {
        width: calc(100% - 15px);
    }
    input[type=submit] {
        background-color: var(--vb-higlight);
        width: calc(100%);
        &:hover {
            background-color: var(--vb-higlight-dark);
        }
    }
    textarea {
        width: calc(100% - 15px);
    }
}

form textarea {
    @media (max-width: 800px) {
        width: 100%;
    }
}


footer {
    text-align: center;
    background-color: var(--vb-grey);
    padding: var(--vb-padding);
    border-radius: var(--vb-radius);
}