/*
    @uhd-and-larger: ~"only screen and (min-width: 1200px)";
    @desktop-and-larger: ~"only screen and (min-width: 1025px)";
    @tablet-and-larger: ~"only screen and (min-width: 601px)";

    @desktop-and-smaller: ~"only screen and (max-width: 1199px)";
    @tablet-and-smaller: ~"only screen and (max-width: 1024px)";
    @phone-and-smaller: ~"only screen and (max-width:600px)";

    @uhd-only: ~"only screen and (min-width: 1200px)";
    @desktop-only: ~"only screen and (min-width: 1025px) and (max-width: 1199px)";
    @tablet-only: ~"only screen and (min-width: 601px) and (max-width: 1024px)";
    @phone-only: ~"only screen and (max-width: 600px)";

    @color-primary: #0094ff;
    @color-secondary: #dadada;

    @color-error: #dc3545;
    @color-success: #28a745;
    @color-html-silver: #C0C0C0;
*/

html,
body {
    height: 100%;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

body {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0px, 1fr) 420px minmax(0px, 1fr);
    grid-template-columns: minmax(0px, 1fr) 420px minmax(0px, 1fr);
    -ms-grid-rows: 1fr 3fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-areas: ". . ." ". Content ." ". . .";
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    body {
        -ms-grid-columns: minmax(0px, 1fr) 420px minmax(0px, 1fr);
        grid-template-columns: minmax(0px, 1fr) 420px minmax(0px, 1fr);
        -ms-grid-rows: 1fr 3fr 1fr;
        grid-template-rows: 1fr 3fr 1fr;
        grid-template-areas: ". . ." ". Content ." ". . .";
    }
}

@media only screen and (max-width:600px) {
    body {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "Content";
    }
}

.front {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: Front;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0px, 1fr) 1fr minmax(0px, 1fr);
    grid-template-columns: minmax(0px, 1fr) 1fr minmax(0px, 1fr);
    -ms-grid-rows: minmax(0px, 1fr) 1fr minmax(0px, 1fr);
    grid-template-rows: minmax(0px, 1fr) 1fr minmax(0px, 1fr);
    grid-template-areas: ". . ." ". Passport ." ". . .";
    background-image: url("/images/landscape.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 30px;
    border-radius: 4px 0px 0px 4px;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

@media only screen and (max-width: 1024px) {
    .front {
        display: none;
    }
}

.content {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    grid-area: Content;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 20px 30px;
    border-color: #4b4b4b;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-radius: 4px 4px 4px 4px;
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .content {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }
}

@media only screen and (max-width:600px) {
    .content {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
}

@media only screen and (max-width:600px) {
    .content {
        border-width: 0px;
    }
}

.content .header {
    margin-bottom: 20px;
}

.content .header img {
    margin-left: 20%;
    width: 60%;
}

.content .body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

h2.heading {
    color: #1b1b1b;
    font-size: 1.5rem;
    font-weight: 600;
}

span.copyright {
    color: #696969;
    font-size: 0.78em;
}

#login-usernamebrowser {
    display: none;
}

/* Links */
.link-right {
    float: right;
}

.link-left {
    float: left;
}

.link:link, .link:visited, .link:active {
    color: #4b4b4b;
    text-decoration: none;
}

.link:hover {
    color: #a7a7a7;
    text-decoration: none;
}