#footer                         { padding-bottom: 5px; }
#version                        { margin:         0px; }
#layout-groups                  { margin-top:    -1em; }    /* Remove small gap at the top  */
.bookmark-group                 { margin-top:     2em; }    /* Add gap at top of bookmarks  */
.services-group                 { margin-top:     2em; }    /* Add gap at top of groups     */
.services-group .services-group { margin-top:  -0.5em; }    /* Remove gap for nested groups */
.information-widget-datetime    { margin-left:    2em; }    /* Gap left of date/time        */

/* ********************************************************************************************* */
/*  Tab/Page Headers  */
#tabs, #myTab {
    background-color: transparent;
}
#myTab li {
    height: 3.5em;
    padding-left: 5px;
    padding-right: 5px;
}
#myTab li:first-child {
    padding-left: 0px;
    padding-right: 5px;
}
#myTab li:last-child {
    padding-left: 5px;
    padding-right: 0px;
}
#myTab li button::before {
    content: "";
    display: inline-block;
    height: 32px;
    width: 32px;
    margin-right: 20px;
    vertical-align: middle;
    background-size: 100%!important;
}
#myTab li:nth-child(1) button::before { background: url(/icons/z_tabs_management.png); }
#myTab li:nth-child(2) button::before { background: url(/icons/z_tabs_docker.png);     }
#myTab li:nth-child(3) button::before { background: url(/icons/z_tabs_hardware.png);   }
#myTab li:nth-child(4) button::before { background: url(/icons/z_tabs_bookmark.png);   }

#myTab li button[aria-selected] {
    border: 1px solid rgba(127, 127, 127, 75%);
    font-size: 1.2em;
}
#myTab li button[aria-selected="false"] {
    cursor: pointer;
}
#myTab li button[aria-selected="true"] {
    background-image: linear-gradient(178deg,
        rgba(191, 191, 191, 0.2)   0%,
        rgba(191, 191, 191, 0.1)  50%,
        rgba( 63,  63,  63, 0.1)  60%,
        rgba( 63,  63,  63, 0.2) 100%
    );
    font-weight: bold;
}


/* ********************************************************************************************* */
/*  Default service card background shading  */
.bookmark-text, .service-card {
    background-image: linear-gradient(178deg,
        rgba(191, 191, 191, 0.2)   0%,
        rgba(191, 191, 191, 0.1)  50%,
        rgba( 63,  63,  63, 0.1)  60%,
        rgba( 63,  63,  63, 0.2) 100%
    );
}
/*  Small tweaks  */
.bookmark                { margin:         1px 5px; }
.bookmark-icon           { border-left:    3px solid rgb(var(--color-500)); }
.bookmark-name           { margin:         5px; font-size: 1em;}
.bookmark-description    { margin-right:   5px; }
.service-name            { font-size:      1em; }
.service-card            { border-radius:  6px; }
.service-card .font-bold { font-weight: normal; }
.service-card .font-thin { font-weight:   bold; }

*:is(.dark  *).service-description { color: var(--color-white); }
*:not(.dark *).service-description { color: var(--color-black); }

.service-card:hover {
    background-color: color-mix(in srgb, rgb(var(--color-500)) 50%, transparent);
}


/* ********************************************************************************************* */
/*  Small detail window colouring  */
*:is(.dark *).service-block {
    background-color: color-mix(in srgb, var(--color-black) 20%, transparent);
    border-top:    1px solid     var(--color-black);
    border-right:  1px solid rgb(var(--color-500));
    border-bottom: 1px solid rgb(var(--color-500));
    border-left:   1px solid     var(--color-black);
}
*:not(.dark *).service-block {
    background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
    border-top:    1px solid rgb(var(--color-500));
    border-right:  1px solid     var(--color-white);
    border-bottom: 1px solid     var(--color-white);
    border-left:   1px solid rgb(var(--color-500));
}


/* ********************************************************************************************* */
/*  "Disable" cards that do not have links  */
.service-card:has(> .service-title .service-icon:not(a)) {
    background-color: transparent;
    background-image: none;
}

*:is(.dark *).service-card:has(> .service-title .service-icon:not(a)) {
    border: 1px solid rgb(var(--color-600));

    .service-block {
        background-color: color-mix(in srgb, var(--color-white) 7%, transparent);
        border: 0px;    /* Removes extra padding from above */
    }
}
*:not(.dark *).service-card:has(> .service-title .service-icon:not(a)) {
    border: 1px solid rgb(var(--color-400));

    .service-block {
        background-color: color-mix(in srgb, var(--color-black) 7%, transparent);
        border: 0px;    /* Removes extra padding from above */
    }
}



/* ********************************************************************************************* */
/*  CARD COLOURING - DONE VIA "ID:" TAGS IN SERVICES.YAML  */
.service-card::before {
    content: "";
    top:     0px;
    left:    0px;
    right:   0px;
    bottom:  0px;
    z-index: 0;
    opacity: 0.4;
    position: absolute;
}

*:is(.dark  *).service-card  { --percent: 40% !important; }
*:not(.dark *).service-card  { --percent: 65% !important; }
*:is(.dark  *).bookmark-text { --percent: 20% !important; }
*:not(.dark *).bookmark-text { --percent: 25% !important; }
* {
    --red:    #ff0000;
    --yellow: #ffff00;
    --green:  #00ff00;
    --cyan:   #00ffff;
    --blue:   #0000ff;
    --purple: #ff00ff;
}

#red {
    .service-card::before { background-color: color-mix(in srgb, var(--red) var(--percent), transparent); }
    .bookmark-text        { background-color: color-mix(in srgb, var(--red) var(--percent), transparent); }
    .bookmark-icon        { border-left: 3px solid var(--red); }
}
#yellow {
    .service-card::before { background-color: color-mix(in srgb, var(--yellow) var(--percent), transparent); }
    .bookmark-text        { background-color: color-mix(in srgb, var(--yellow) var(--percent), transparent); }
    .bookmark-icon        { border-left: 3px solid var(--yellow); }
}
#green {
    .service-card::before { background-color: color-mix(in srgb, var(--green) var(--percent), transparent); }
    .bookmark-text        { background-color: color-mix(in srgb, var(--green) var(--percent), transparent); }
    .bookmark-icon        { border-left: 3px solid var(--green); }
}
#cyan {
    .service-card::before { background-color: color-mix(in srgb, var(--cyan) var(--percent), transparent); }
    .bookmark-text        { background-color: color-mix(in srgb, var(--cyan) var(--percent), transparent); }
    .bookmark-icon        { border-left: 3px solid var(--cyan); }
}
#blue {
    .service-card::before { background-color: color-mix(in srgb, var(--blue) var(--percent), transparent); }
    .bookmark-text        { background-color: color-mix(in srgb, var(--blue) var(--percent), transparent); }
    .bookmark-icon        { border-left: 3px solid var(--blue); }
}
#purple {
    .service-card::before { background-color: color-mix(in srgb, var(--purple) var(--percent), transparent); }
    .bookmark-text        { background-color: color-mix(in srgb, var(--purple) var(--percent), transparent); }
    .bookmark-icon        { border-left: 3px solid var(--purple); }
}