/* LL::NG Portal CSShtml,body{background:url("/static/common/backgrounds/Aletschgletscher_mit_Pinus_cembra1.jpg") no-repeat center fixed;background-size:cover;}*/

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-Regular.ttf");
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-Black.ttf");
    font-weight: 900;
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-ExtraBold.ttf");
    font-weight: 800;
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-Thin.ttf");
    font-weight: 100;
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-ExtraLight.ttf");
    font-weight: 200;
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-Light.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "Inter";
    src: url("/static/common/fonts/Inter-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Gilroy";
    src: url("/static/common/fonts/Gilroy-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: "Gilroy";
    src: url("/static/common/fonts/Gilroy-Regular.ttf");
}

@font-face {
    font-family: "Gilroy";
    src: url("/static/common/fonts/Gilroy-medium.ttf");
    font-weight: 500;
}

:root{
    --banner-h: 65px;
    --bg-h: 613px;
    --z-red: #E73936;
    --z-violet: #851F6E;
    --menu-t: 60px;
    --menu-b: 60px;
    --menu-h: 75px;
    --menu-s: 20px;
    --menu-svg-h: 28px;
    --menu-svg-r: 15px;
    --logo-w: 360px;
    --logo-t: 44px;
    --login-blk-t: 195px;
    --content-head-h: 90px;
    --menu-sp: 150px;
    --text-color: #B4B9D0;
}

body{
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    background-color: #F8F8F8;
}

.container{max-width: 1600px;}

#wrap{
    margin: 0;
    padding: 0;
    background: url("/static/common/backgrounds/header.jpg") no-repeat;
    background-size: auto var(--bg-h);
    background-position: top center;
    background-color: white;
}

#top-banner{
    background-color: black;
    min-height: var(--banner-h);
    width: 100%;
}

#header{padding-top: var(--logo-t);}

#header img{
    background-color: transparent;
    width: 100%;
    max-width: var(--logo-w);
    height: auto;
    margin-bottom: 0;
}

.btn{
    min-height: 40px;
    border-radius: 32px;
}

.btn-success,
.btn-success:hover{
    background-color: var(--z-red);
    border-color: var(--z-red);
}

.card{
    box-shadow: rgba(0,0,0,.09) 0 3px 26px;
}

.card, .card-header{
    border: none;
}

.card-header{
    min-height: var(--content-head-h);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.card-header h4{margin-bottom: 0;}

.card-header, .card-header h4{
    text-transform: uppercase;
    font-size: 20px;
    color: white;
    font-family: Inter, sans-serif;
}

.card-header h4 span{margin-left: 15px;}

.card-body{background-color: white}

/* ===================================
        Login & Check Code
=====================================*/

#logincontent{
    margin-top: var(--login-blk-t);
}

/* ===================================
            Dashboard
=====================================*/

#menucontent{
    margin-top: var(--menu-t);
}

.navbar{
    background-color: black;
    border-radius: 4px;
    box-shadow: rgba(0,0,0,.09) 0 3px 26px;
    margin-bottom: var(--menu-b);
}
.navbar-nav{width: 100%; justify-content: space-between;}
.navbar-dark .navbar-nav .nav-link{color: white; transition: color .3s ease; font-family: Gilroy, sans-serif; font-weight: bold; font-size: var(--menu-s);}
.navbar-dark .navbar-nav .nav-link:hover{color: var(--z-red);}
li.ui-state-active, .dropdown-menu{background-color: #555;}
.navbar-dark .navbar-brand{font-size: var(--menu-svg-h);}

.navbar-nav li{position: relative; width: 100%; border-right: #777 1px solid;}
.navbar-nav li a{display: flex; justify-content: center; align-items: center}
.navbar-nav.user li{border-right: none;}
/*.navbar-dark .navbar-brand:after{*/
/*    content: '';*/
/*    position: absolute;*/
/*    height: var(--menu-svg-h); width: 2px;*/
/*    background-color: #777;*/
/*    right: calc(var(--menu-sp) / -2); top: 50%; transform: translateY(-50%);*/
/*}*/
.navbar-nav li svg{max-height: var(--menu-svg-h); height: auto; width: auto; margin-right: var(--menu-svg-r);}
.navbar-nav li svg path{transition: fill .3s ease;}
.navbar-nav li:hover svg path{fill: white;}
.navbar-nav li.dropdown-item svg path{fill: white}
.navbar-nav li.dropdown-item:hover svg path{fill: var(--z-red);}
.dropdown-item:focus, .dropdown-item:hover{background-color: #333;}

ul.user.nav{max-width: max-content;}
ul.user.nav .nav-link{padding-left: 20px; padding-right: 20px;}
.buttons{margin: 0;}

.navbar-dark .navbar-brand{position: relative; margin-right: 20px;padding-right: 20px;border-right: #777 1px solid;}

#appslist, #password, #loginHistory, #logout, #oidcConsents{max-width: 1146px; margin: 0 auto;}

.info.table caption{display: none;}

h5.appname, .appdesc{color: var(--text-color); transition: color .3s ease;}
div.application{overflow: unset;}
.application > a:hover h5.appname{color: var(--z-red);}
.application.card{box-shadow: unset; height: auto;}

.application .card-body .col-3{
    display: flex;
    justify-content: center; align-items: center;
    border: #eee 1px solid;
    border-radius: 4px; max-height: 75px;
    transition: transform .3s ease;
    transform-origin: center center;
    padding-right: 0;
    padding-left: 0;
}

.application a:hover .col-3{
    transform: scale(1.2);
}

.application .card-body .col-3 svg path{
    transition: fill .3s ease;
}

.application > a:hover .col-3 svg path{
    fill: var(--z-violet);
}

.table td, .table th{
    font-family: Inter, sans-serif;
    font-size: 20px;
}

.table thead th{border: none; font-family: Inter, sans-serif; font-weight: bold;}
.table td{border-color: var(--z-red);}

@media (max-width: 1920px){
    :root{
        --bkpt: 1920;
        --banner-h: calc(100vw * 65 / var(--bkpt));
        --bg-h: calc(100vw * 613 / var(--bkpt));
        --logo-w: calc(100vw * 360 / var(--bkpt));
        --logo-t: calc(100vw * 44 / var(--bkpt));
        --menu-t: calc(100vw * 60 / var(--bkpt));
        --menu-h: calc(100vw * 75 / var(--bkpt));
        --login-blk-t: calc(100vw * 195 / var(--bkpt));
        --content-head-h: calc(100vw * 90 / var(--bkpt));
    }
}

@media (max-width: 1630px){
    :root{
        --menu-s: calc(100vw * 20 / var(--bkpt));
        --menu-svg-h: calc(100vw * 28 / var(--bkpt));
        --menu-svg-r: calc(100vw * 15 / var(--bkpt));
    }
}

@media (max-width: 992px){
    :root{
        --menu-s: 20px;
        --menu-svg-h: 28px;
    }

    ul.user.nav{max-width: 100%;}
    .navbar-nav li{border-right: none;}
}

@media (max-width: 768px){
    :root{
        --banner-h: 25px;
        --logo-w: 200px;
        --logo-t: 50px;
        --bg-h: 320px;
        --login-blk-t: 50px;
    }
}

@media (max-width: 480px){
    :root{
        --logo-w: 150px;
    }

    .card-header h4{text-align: center;}
    .table td, .table th{
        font-size: 16px;
    }
}