@import "/style/oxygen.css";

:root {
    --body-background: url("/external-resources/v1-background.png");

    --navbar-background: radial-gradient(circle,rgba(61, 61, 61, 0.2) 0%, rgba(61, 61, 61, 0.4) 50%, rgba(61, 61, 61, 0.6) 100%);
    --navbar-border: rgba(255, 255, 255, 0.5);

    --dolphin-file-selected-background: #3A4467;
    --dolphin-file-selected-background-hover: #323B59;

    --panel-border: #323B59;
    --panel-outline: #262D44;
    --panel-radius: 4px;
    --panel-header-height: 24px;

    --toolbar-height: 24px;

    --window-background: linear-gradient(0deg, #2C324D 60%, #3A4467 100%);
    --window-shadow: 0px 0px 10px 5px #63699E;
    --window-border: #353D5E;
    --window-outline: #63699E;
    --on-window-primary: white;

    --window-content-background: #171C30;
    --window-content-border: #3A4076;
    --window-content-outline: #545CA9;
    --window-content-border-unselected: #1C2134;
    --window-content-outline-unselected: #22273C;

    --window-listview-background: #171C30;
    --window-listview-background-alt: #2C324D;
    --window-listview-hover: #323B59;
    --window-listview-hover-alt: #3A4467;

    --kcm-selected-background: #3A4467;
    --kcm-selected-background-hover: #323B59;
}

body {
    background: var(--body-background) center center/cover no-repeat fixed #63699E;
}

main {
    margin-left: auto;
    margin-right: auto;

    max-width: 1200px;
}

.v-spacer-m {
    height: 40px;
}
.v-spacer-s {
    height: 20px;
}

#tile-contacts {
    display: flex;
    flex-direction: column;

    gap: 16px;

    @media (min-width: 800px) {
        display: grid;
        grid-template-columns: auto 400px;
    }

    .window-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .contacts-user-info {
            display: flex;
            align-items: center;
            margin: 8px;
        }
    }
}


.fill-width {
    width: 100%;
}

.text-align-center {
    text-align: center;
}