html { height: 100%; }

body {
    background: linear-gradient(#21294E 15%, #30559C 55%, #A8CEEE);
    background-attachment: fixed;
    color: #011E48;
    font-family: arial;
    font-size: 12pt;
    height: 100%;
    margin: 0px auto;
    zoom: 1;
}

body.subpage {
    margin: 0 auto;
    max-width: 960px;
}

#container {
    display: flex;
    flex-direction: column;
    margin: 0px auto 10px;
    max-width: 1200px;
    min-width: 330px;
}

#top {
    align-items: flex-end;
    color: white;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    position: relative;
}

.top a { color: white; }

#top > div {
    flex: auto;
    max-width: 30vw;
}

#logo {
    flex-basis: 33%;
    padding: 20px 0 10px 0;
    text-align: center;
}

.subpage #top > #logo { padding-bottom: 20px; }

#logo img { width: 250px; }

#top > .spacer { flex-basis: 33%; }


#top > #loginview, .extra-buttons {
    font-size: 11px;
    font-weight: bold;
}

#top > #loginview > #loginview-buttons, .extra-buttons {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 5px;
}

#top > #loginview > #loginview-buttons > a, .extra-buttons > label{
    align-items: center;
    display: flex;
    flex: auto;
    flex-flow: column nowrap;
    position: relative;
    text-align: center;
    text-decoration: none;
}

#top > #loginview > #loginview-buttons > a::before, .extra-buttons > label::before {
    -webkit-mask-position: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: white;
    content: "";
    display: inline-block;
    flex: 0 1 auto;
    height: 40px;
    mask-position: 50%;
    mask-repeat: no-repeat;
    mask-size: contain;
    min-width: 40px;
    padding: 0 10px;
}

#top > #loginview > #loginview-buttons > a:hover, .extra-buttons a:hover { color: #F29617; }

#top > #loginview > #loginview-buttons > a:hover::before { background-color: #F29617; }

#top > #loginview > #loginview-buttons > .change-password-button::before {
    -webkit-mask-image: url('../Images/Icons/ChangePassword.png');
    mask-image: url('../Images/Icons/ChangePassword.png');
}

#top > #loginview > #loginview-buttons > .admin-panel-button::before {
    -webkit-mask-image: url('../Images/Icons/AdminPanel.svg');
    mask-image: url('../Images/Icons/AdminPanel.svg');
}

#top > #loginview > #loginview-buttons > .manage-company-button::before {
    -webkit-mask-image: url('../Images/Icons/CompanyOverview.svg');
    mask-image: url('../Images/Icons/CompanyOverview.svg');
}

#top > #loginview > #loginview-buttons > .login-status::before {
    -webkit-mask-image: url('../Images/Icons/Logout.png');
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url('../Images/Icons/Logout.png');
}

#top .extra-buttons {
    justify-content: flex-end;
}

#top .extra-buttons > label {
    flex: 0;
}

#top .extra-buttons > label::before {
    content: 'collections_bookmark';
    font-family: 'Material Icons';
    font-size: 32px;
    background: none;
}

#top .extra-buttons > label:hover {
    color: #F6941D;
}

#top .logininfo {
    color: #C5DDF4;
    font-size: 11px;
}

#bottom {
    background-color: #1B355F;
    padding: 15px 0;
    text-align: center;
}


#bottom a {
    background: none;
    border: none;
    color: #fff;
    float: none;
    margin: 0;
    text-align: initial;
    text-decoration: none;
    width: auto;
}

#container .home-menu {
    margin-top: 5px;
    min-height: 200px;
    min-width: 330px;
}

#container .main-arena {
    background: white;
    padding: 20px;
}

#menu .user-name {
    margin-bottom: 5px;
    text-transform: capitalize;
}

#menu.main-arena {
    background: white;
    margin: 0 auto;
    padding: 30px;
}

#logo { overflow: hidden }

#logo a {
    background: 0;
    border: 0;
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
    width: auto;
}



h1 {
    font-size: 24px;
    font-weight: normal;
}

#basic-regulation {
    align-items: center;
    background: #C5DDF4;
    background-color: #fff;
    display: flex;
    flex: auto;
    flex-direction: column;
    padding: 4px 0;
    text-align: center;
}

#basic-regulation a {
    color: #1B355F;
    display: block;
    font-size: 22px;
    max-width: 85%;
    padding: 4px 8px;
    position: relative;
    text-align: center;
    text-decoration: none;
}

#basic-regulation a::before {
    background-image: url('../Images/Icons/play_circle_filled_yellow_24dp.svg');
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 30px;
    left: -25px;
    position: absolute;
    width: 30px;
}

#basic-regulation a:hover { color: #F6941D; }

#package-list {
    display: grid;
    flex-direction: row;
    flex-wrap: wrap;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 10px 0;
}

#package-list .package-category {
    /*background:linear-gradient(white 70%, rgba(1.0, 1.0, 1.0, 0.0));*/
    background: white;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 255px;
    padding: 10px 20px;
}

#package-list .package-category h2 {
    font-size: 20px;
    margin-top: 0;
}

#package-list .package-category ul {
    list-style: none;
    margin: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
}

#package-list .package-category .package {
    height: 22px;
    margin: 13px 0;
    overflow: visible;
    position: relative;
}


#package-list .package-category .package .left label {
    left: 5px;
    position: relative;
    top: 4px;
}

#package-list .package-category .implementing-rule {
    color: #011F4B;
    font-size: 18px;
    text-decoration: none;
}

#package-list .package-category .implementing-rule.inactive {
    color: #011F2B;
    font-weight: normal;
}

#package-list .package-category .implementing-rule:hover {
    color: #F6941D;
    text-decoration: underline;
}

#package-list .package-category .implementing-rule.inactive:hover {
    color: inherit;
    text-decoration: none;
}

#package-list .package-category .package .package-validity {
    font-size: 9px;
    font-style: italic;
}

#package-list .package-category .package .package-description {
    display: block;
    padding: 4px;
}

#package-list .package-category .package .button {
    display: block;
    float: left;
    font-weight: bold;
    margin-right: 5px;
    text-align: center;
    width: 25px;
}

#package-list .package-category .package .button a i { font-size: 25px; }

#package-list .package-category .package .button:hover a { color: #F6941D; }

/*#package-list .package-category .package .meta .package-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    transition: opacity 500ms;
    color: #000;
}*/

#package-list .package-category .package .meta input[type=checkbox] { display: none; }


#package-list .package-category .package .meta input[type=checkbox]:checked ~ .package-popup {
    display: block;
    opacity: 1;
    visibility: visible;
}

#package-list .package-category .package .meta .package-popup {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #333;
    display: none;
    left: 0;
    line-height: 1.12em;
    margin: 5px auto;
    max-width: 400px;
    opacity: 0;
    padding: 20px;
    position: absolute;
    transition: all 500ms ease-in-out;
    visibility: hidden;
    z-index: 30;
}



#package-list .package-category .package .meta .package-popup .close {
    color: #333;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    text-decoration: none;
    top: 6px;
    transition: all 200ms;
}


#package-list .package-category .package .meta {
    display: flex;
    float: left;
    line-height: 0.7;
    margin-left: 5px;
}

#package-list .package-category .package .meta .package-title {
    color: #1B355F;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

#package-list .package-category .package .meta .package-title:hover:not(.aspNetDisabled) { color: #F3981A; }

#package-list .package-category .package a.package-link {
    color: #fff;
    display: block;
    height: 100%;
    text-decoration: none;
    width: 100%;
}

#package-list .package-category .package a.package-link.inactive {
    color: #fff;
    opacity: 0.4;
}


/*old stuff below here*/

.partname {
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
    text-transform: uppercase;
}

.partdescription {
    font-size: 12px;
    font-weight: normal;
    padding-left: 20px;
    text-transform: uppercase;
}

.partvalid {
    font-size: 16px;
    font-weight: normal;
    padding-left: 20px;
}

.hyperlink-home {
    background: none repeat scroll 0% 0% transparent;
    border: 0px none;
}

.old-package a {
    background: none repeat scroll 0% 0% #444444;
    border-color: #444444;
    border-style: solid;
    border-width: 7px;
    color: #FFFFFF;
    float: left;
    font-size: 12px;
    margin-right: 4px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    width: 106px;
}

input[type=text], input[type=password] {
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #eaeaea;
    font-family: Arial;
    font-size: 0.8em;
    height: 2em;
    letter-spacing: 0.05em;
    margin: 0.5em;
    padding: 2px;
}

input[type=text]:focus, input[type=password]:focus { border-bottom: 1px solid #F6941D; }

#BookReturnMessage {
    border: 1px solid #F6941D;
    font-weight: bold;
    margin: 25px;
    padding: 25px;
    text-align: center;
}

input[type="submit"], .hyperlink-button, #GoBack {
    background: #C5DDF4;
    color: #1B355F;
    cursor: pointer;
}

input[type="submit"]:hover, .hyperlink-button:hover, #GoBack:hover {
    background: #1B355F;
    color: #C5DDF4;
}

#GoBack {
    display: block;
    margin-top: 75px;
    max-width: 100px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
}

input[type="submit"], .hyperlink-button {
    border: none;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
}

.case-list li {
    margin-bottom: 2em;
}

.failure {
    color: red;
}

@media (max-height: 400px) {
    #loginButtons a, #GoBack { padding: 3px 0; }

    #logo { height: 90px; }
}

@media (max-width: 820px) {
    #top > .spacer { display: none; }

    #top > div { max-width: 50vw; }
}

@media (max-width: 520px) {
    #top > .spacer { display: none; }

    #top > div { max-width: unset; }

    #top {
        align-items: initial;
        flex-flow: column nowrap;
    }

    #top > #loginview > #loginview-buttons > a { width: 75px; }

    #top .logininfo {
        align-items: center;
        display: flex;
        flex-flow: column nowrap;
    }

    #package-list { mask-image: unset; }
}