@media only screen and (min-width: 960px) {

    body {
        display: grid;
        grid-template-areas: "nav body" /*header"*/
            "nav body";
        grid-template-rows: 64px auto;
        grid-template-columns: 64px auto;
    }

    nav {
        grid-area: nav;
        background-color: #fff;
        box-shadow: var(--elevation-0);
    }

    header {
        display: none;

        background-color: transparent;
        color: var(--primary-color);
        overflow: hidden;
    
        transition: var(--transition-theme);
        --ripple-color: var(--ripple-color-on-dark);
        grid-area: header;
        width: 960px;
        justify-self: center;
        align-self: center;
    }

    header h1 {
        padding: 0;
        height: unset;
    }

    nav {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-items: center;
        padding: 0;
        margin: 0;
        position: relative;
    }

    nav li {
        display: flex;
        align-items: center;
        border-radius: 4px;
        margin: 4px 4px 0px;
        width: 56px;
        height: 56px;
        box-sizing: border-box;
        transition: var(--transition-theme);
    }

    nav li:hover,
    nav li.active:hover  {
        background-color: var(--backdrop);
    }
    nav li.active{
        background-color: unset;
    }
    
    nav li.active,
    nav li:hover{
        color: var(--primary-color);
        cursor: pointer;
    }

    nav li#logout {
        position: absolute;
        bottom: 4px;
    }

    /*
    div.form {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        font-size: var(--default-font-size);
        color: var(--fg-color);
        position: relative;
    }

    div.form > div {
        display: flex;
        flex-direction: column;
        margin: 16px 16px 8px;
        position: relative;
    }


    div.form input ~ label,
    div.form textarea ~ label,
    div.form .dd-select ~ label {
        position: absolute;
        top: 18px;
        left: 16px;
        color: var(--fg-color-light);
        transition: all var(--theme-transition-time) ease-out;
        cursor: text;
    }

    div.form input:focus ~ label,
    div.form input:not(:placeholder-shown) ~ label {
        top: 12px;
        left: 12px;
        font-size: 16px;
        font-weight: 400;
        background-color: #fff;
        padding: 0 4px;
    }

    div.form input,
    div.form textarea,
    div.form .dd-select {
        padding: 16px;
        font-family: "Roboto", sans-serif;
        font-size: var(--small-font-size);
        border: 2px solid var(--border-color-inactive);
        
        border-radius: 4px;
        margin: unset;

        background-color: transparent;
        background-image: none !important;
        
        color: var(--fg-color);
        /*border-bottom: 2px solid var(--border-color-inactive)* /;
        transition: var(--transition-theme);
        flex: 1;
    }
    div.form input:focus,
    div.form textarea:focus {
        border: 2px solid var(--border-color);
        transition: var(--transition-theme);
    }

    div.form textarea {
        height: 42px;
        resize: none;
    }
    
    div.form .input.icon .icon {
        position: absolute;
        right: 14px;
        top: 16px;
    }

    /*
    div.form input:focus ~ label,
    div.form input:read-only ~ label,
    div.form input:not(:placeholder-shown) ~ label,
    div.form textarea:focus ~ label,
    div.form textarea:read-only ~ label,
    div.form textarea:not(:placeholder-shown) ~ label,
    div.form .dd-select ~ label {
        transform: scale(0.75) translateY(-30px);
        font-weight: 500;
    }
    * /


    div.form input:not(:read-only):focus ~ label,
    div.form textarea:not(:read-only):focus ~ label {
        color: var(--primary-color);
    }


    div.form button {
        border: none;
        border-radius: 4px;
        background-color: var(--primary-color);
        color: var(--on-primary-color);
        text-transform: uppercase;
        font-weight: 500;

        padding: 16px;

        transition: var(--transition-theme);
        margin-top: 16px;
    }
    */

    .page.dashboard,
    .page.domains,
    .page.domain-details,
    .page.test,
    .page.certs,
    .page.authlog {
        width: 960px;
        margin: 0 auto;
        margin-bottom: 32px;
        height: auto;
    }

    /***************************************************
    *
    * Page Domains
    *
    ***************************************************/

    .page.domains ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .page.domains ul li {
        margin-bottom: 16px;
        padding: 12px;

        display: grid;
        grid-template-areas: 
            "domainname isemail emailaddresses emailusers vhosts";
        grid-template-columns: auto repeat(4, 64px);
        grid-template-rows: auto;
        grid-gap: 12px;
        align-items: center;
        cursor: pointer;
    }

    .page.domains ul li .domainname {
        font-size: 24px;
        font-weight: 300;

        grid-area: domainname;
        color: var(--fg-color);
    }

    .page.domains ul li.inactive .domainname:before {
        font-family: "Material Icons";
        font-size: 24px;
        line-height: 24px;
        margin-right: 4px;
        content: "lock";
    }

    .page.domains ul li.inactive .domainname {
        color: var(--fg-color-light);
    }

    .page.domains ul li span {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 300;
        color: var(--fg-color-light);
    }
    .page.domains ul li span:before {
        margin-right: 4px;
        font-size: 18px;
    }
    /*
    .page.domains ul li span:before {
        font-family: "Material Icons";
        font-size: 18px;
        line-height: 18px;
        margin-right: 4px;
    }
    */

    .page.domains ul li span.vhosts { grid-area: vhosts; }
    /*.page.domains ul li span.vhosts:before { content: "public"; }*/

    .page.domains ul li span.is-email { grid-area: isemail; }
    /*.page.domains ul li span.is-email:before { content: "alternate_email"; }*/

    .page.domains ul li span.email-addresses { grid-area: emailaddresses; }
    /*.page.domains ul li span.email-addresses:before { content: "email"; }*/

    .page.domains ul li span.email-users { grid-area: emailusers; }
    /*.page.domains ul li span.email-users:before { content: "contact_mail"; }*/

    /***************************************************
    *
    * Page Domain Details
    *
    ***************************************************/

    .page.domain-details h1 {
        color: var(--primary-color);
    }

    .page.domain-details h2 {
        margin: 32px 0 8px;
        display: flex;
        align-items: center;
    }
    .page.domain-details h2 span.name {
        flex: 1;
    }
    .page.domain-details h2 span.button {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        padding: unset;
        background-color: unset;
        color: unset;
    }


    .page.domain-details ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
    }

    .page.domain-details ul li {
        display: grid;
        grid-template-rows: 24px;
        grid-gap: 8px;
        align-items: center;
        padding: 8px 12px;
        cursor: pointer;
    }

    .page.domain-details ul li:not(.header) {
        font-size: 14px;
    }

    .page.domain-details ul li.header,
    .page.domain-details ul li.header:hover {
        color: var(--fg-color-light);
        font-size: var(--header-font-size);
        font-weight: 500;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border-color-light-inactive);
        overflow: hidden;

        /*position: sticky;*/
        top: 0px;
    }

    .page.domain-details ul li.empty {
        padding: 32px;
        text-align: center;
        display: block;
        color: var(--fg-color-light);
    }

    .page.domain-details ul#vhosts li {
        grid-template-areas: "name";
        grid-template-columns: auto;
    }


    .page.domain-details ul#vhosts li.inactive {
        color: var(--fg-color-light);
    }

    .page.domain-details ul#vhosts li span.name { grid-area: name; }

    .page.domain-details ul#email-addresses li {
        grid-template-areas: "type name destination";
        grid-template-columns:  24px 1fr 1fr;
    }

    .page.domain-details ul#email-addresses li span.name { grid-area: name; }
    .page.domain-details ul#email-addresses li span.destination { grid-area: destination; }
    .page.domain-details ul#email-addresses li span.type { 
        grid-area: type; 
        /*height: 24px; */
        color: var(--fg-color-light); 
    }
    .page.domain-details ul#email-users li {
        grid-template-areas: "username email path";
        grid-template-columns:  1fr 1fr 1fr;
    }

    .page.domain-details ul#email-users li span.username { grid-area: username; }
    .page.domain-details ul#email-users li span.email { grid-area: email; }
    .page.domain-details ul#email-users li span.path { 
        grid-area: path; 
        color: var(--fg-color-light); 
    }

    /***************************************************
    *
    * Page Certificates
    *
    ***************************************************/
    .page.certs ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .page.certs ul#certs > li {
        margin-bottom: 16px;
        padding: 12px;

        display: grid;
        grid-template-areas: 
            "name from to"
            "desc desc desc"
            "hosts hosts hosts";
        grid-template-columns: auto 112px 112px;
        grid-template-rows: auto;
        grid-gap: 12px;
        align-items: center;
        cursor: pointer;
        font-size: var(--default-font-size);
    }

    .page.certs ul#certs > li.will-expire span.to, 
    .page.certs ul#certs > li.will-expire span.to:before,
    .page.certs ul#certs > li.expired span.to, 
    .page.certs ul#certs > li.expired span.to:before {
        color: var(--on-primary-color);
    }
    
    .page.certs ul#certs > li.will-expire span.to,
    .page.certs ul#certs > li.expired span.to { 
        border-radius: 4px;
        padding: 4px;
    }
    .page.certs ul#certs > li.will-expire span.to {
        background-color: hsl(0, 50%, 70%);
    }
    .page.certs ul#certs > li.expired span.to {
        background-color: hsl(0, 50%, 54%);
    }

    .page.certs ul#certs > li.will-expire span.name {
        color: hsl(0, 50%, 70%);
    }
    .page.certs ul#certs > li.expired span.name {
        color: hsl(0, 50%, 54%);
    }

    
    .page.certs ul#certs li span.name {
        grid-area: name;
        font-size: var(--large-font-size);
        display: flex;
        align-items: center;
    }
    .page.certs ul#certs li span.name:before {
        margin-right: 4px;
    }
    .page.certs ul#certs li span.description {
        grid-area: desc;
        font-size: var(--small-font-size);
    }
    .page.certs ul#certs li span.from {
        grid-area: from;
    }

    .page.certs ul#certs li span.to {
        grid-area: to;
    }
    
    .page.certs ul#certs li span.from,
    .page.certs ul#certs li span.to {
        font-size: var(--small-font-size);
        text-align: center;
        display: flex;
        align-items: center;
    }
    .page.certs ul#certs li span.from:before,
    .page.certs ul#certs li span.to:before {
        color: var(--fg-color-light);
        margin-right: 4px;
        
    }

    .page.certs ul#certs .hosts {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: var(--small-font-size);
        grid-area: hosts;
    }

    .page.certs ul#certs .hosts {
        border-top: 1px solid var(--border-color-light-inactive);
        padding-top: 12px;
    }

    
    .page.certs ul#certs .hosts label {
        font-weight: 500;
        color: var(--fg-color-light);
    }

    .page.certs ul#certs .hosts li {
        background-color: var(--primary-color);
        color: var(--on-primary-color) !important;
        height: 22px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        margin-left: 8px;
    }

    /***************************************************
    *
    * Page Dashboard
    *
    ***************************************************/
    .page.dashboard .tiles {
        display: grid;
        grid-template-areas: "a a a a a a";
        grid-auto-columns: 1fr;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
    }

    .page.dashboard .tile {
        display: grid;
        grid-template-areas: "icon" "label" "value";
        grid-template-rows: 36px 24px 20px;
        grid-gap: 4px;
        justify-items: center;
        align-items: center;
        padding: 12px;
    }    

    .page.dashboard .tile .mdi {
        grid-area: icon;
    }

    .page.dashboard .tile .mdi:before {
        font-size: 36px;
        font-weight: 300;
        color: var(--fg-color-light);
    }
    .page.dashboard .tile .label {
        grid-area: label;
        color: var(--fg-color-light);
        font-size: var(--small-font-size);
        text-align: center;
    }
    .page.dashboard .tile .value {
        grid-area: value;
        font-size: var(--large-font-size);
        color: var(--primary-color);
        font-weight: 500;
    }

    /***************************************************
    *
    * Page AuthLog
    *
    ***************************************************/
    .page.authlog .head {
        display: grid;
        grid-template-areas: "title select filter";
        grid-template-columns: auto 256px 56px;
    }

    .page.authlog .head h1 {grid-area: title;}
    .page.authlog .head .form {grid-area: select;}
    .page.authlog .head .filter {grid-area: filter;}
    .page.authlog .head .filter {
        border: 2px solid var(--border-color-inactive);
        color: var(--fg-color);
        justify-self: end;
        align-self: center;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: var(--transition-theme);
    }
    .page.authlog .head .filter:hover {
        cursor: pointer;
        background-color: var(--backdrop-hover);
    }
    .page.authlog .head .filter:active {
        background-color: var(--backdrop-active);
    }

    .page.authlog .head .form  {
        display: flex;
        justify-content: center;
    }
    .page.authlog .head .form .dd-select {
        flex: unset;
        background-color: #fff;
        height: 48px;
    }

    .page.authlog ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .page.authlog li {

        display: grid;
        grid-template-areas: "checkbox count address action" "details details details details";
        grid-template-rows: 32px auto;
        grid-template-columns: 32px 48px 1fr 64px;
        align-items: center;
        padding: 16px;
        margin-bottom: 4px;
    }
    .page.authlog li span.checkbox { grid-area: checkbox; }
    .page.authlog li span.address { grid-area: address; }
    .page.authlog li span.count { grid-area: count; }
    .page.authlog li button { grid-area: action; }

    .page.authlog li span.count {
        font-size: 12px;
        justify-content: center;
        align-items: center;
        display: flex;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color:hsl(0, 40%, 85%);
    }
    .page.authlog li span.count.warn {
        background-color: hsl(0, 50%, 70%);
        color: var(--on-primary-color);
    }
    .page.authlog li span.count.severe {
        background-color: hsl(0, 50%, 54%);
        color: var(--on-primary-color);
    }

    .page.authlog li button {
        background-color: hsl(0, 50%, 60%);
        border: none;
        color: var(--on-primary-color);
        border-radius: 4px;
        display: none;
    }

    .page.authlog li ul.details:not(:empty) {
        grid-area: details;
        padding: 0;
        margin: 4px;
        list-style: none;
    }

    .page.authlog li ul.details:not(:empty) li {
        padding: 4px 12px;
        margin: 0;
        display: grid;
        grid-template-areas: /*"address username password" */"logentry logentry logentry";
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 32px;
        font-size: var(--small-font-size);
    }
    .page.authlog li ul.details:not(:empty) li,
    .page.authlog li ul.details:not(:empty) li * {
        user-select: text;
    }

    .page.authlog li ul.details:not(:empty) li:nth-child(odd) {
        background-color: var(--backdrop);
        border-radius: 4px;
    }

    .page.authlog li ul.details .address { grid-area: address; }
    .page.authlog li ul.details .username { grid-area: username; }
    .page.authlog li ul.details .password { grid-area: password; }
    .page.authlog li ul.details .logentry { grid-area: logentry; }
    .page.authlog li ul.details .logentry { 
        font-family: monospace;
    }
    .page.authlog li ul.details .address,
    .page.authlog li ul.details .username,
    .page.authlog li ul.details .password { display: none; }
}

.ctx-menu {
    max-height: 400px;
    overflow-y: auto;
    display: unset;
}