@media all and (max-width: 1199px)
{
.column-gap {
column-gap: 4rem;
}
}

@media all and (max-width: 991px)
{
.column-gap {
column-gap: 3rem;
}
}

@media all and (min-width: 1200px)
{
.column-gap {
column-gap: 5rem;
}
}

.column-gap-small {
column-gap: 5rem;
}

@media all and (max-width: 1199px)
{
.display {
display: flex;
}
}

@media all and (max-width: 991px)
{
.display {
display: block;
}
}

@media all and (max-width: 768px)
{
.display {
display: block;
}
}

@media all and (min-width: 1200px)
{
.display {
display: flex;
}
}

@media all and (max-width: 575px)
{
.display {
display: block;
}
}

.login-container {
position:fixed;
display:flex;
justify-content: center;
align-items: center;
width: 100%;
height:100%;
top: 0;
left: 0;
    background: #eee;
}

.login-form {
    width: 100%;
    background: white;
    border: 3px solid #ddd;
    border-radius: 5px;
    padding: 60px 50px 50px;
position:relative;
}

.login-headline {
width: max-content; 
margin: -1em auto 1em auto;
font-szie: x-large;
font-weight: bold;
}

.login-top {
position: absolute;
    width: 100%;
    top: -45px;
    left: 0;
z-index: 2;
}

.login-top-logo {
position: relative;
    width: 80px;
    height: 80px;
    background: #00CB6D;
    border-radius: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #ddd;
    font-size: 36px;
    color: white;
    /*transform: rotate(20deg);*/
background-position: center;
    background-size: 100% auto;
}

.main-container {
    width: 85%;
    background: white;
    border: 3px solid #ddd;
    border-radius: 5px;
    position: fixed;
    height: 80%;
    left: 7.5%;
    top: 10%;
    box-shadow: 0 0 20px -5px #222;
}

.main-content {
    padding: 3rem;
    height: 100%;
    overflow: auto;
}

.main-header {
    position: absolute;
    width: 100%;
    top: -45px;
    left: 0;
    z-index: 2;
}

.main-header-logo {
    position: relative;
    width: 80px;
    height: 80px;
    background: #00CB6D;
    border-radius: 100%;
    margin: 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #ddd;
    font-size: 36px;
    color: white;
    /* transform: rotate(20deg); */
    background-position: center;
    background-size: 100% auto;
flex-shrink: 0;
}

.main-header-menu {
    background: white;
    width: 60%;
    box-shadow: 0 0 10px -4px #222;
    border-radius: 3px;
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
overflow: hidden;
}

.main-header-menu-link {
font-size: 0.8rem;
    padding: 0.6rem 1rem;
    display: inline-block;
    color: #607d8b;
transition: all ease-in 0.2s;
}

.main-header-menu-link-hover {
background-color: #eee;
text-decoration: none;
color: black;
}

.main-header-menu-logoff {
    background: none;
    border: none;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.6rem 1rem;
    background-color: #fce8eb;
border-radius: 3px;
}

@media all and (max-width: 1199px)
{
.min-width-pw-l-xl {
min-width: 20rem;
}
}

@media all and (min-width: 1200px)
{
.min-width-pw-l-xl {
min-width: 30rem;
}
}

@media all and (max-width: 1199px)
{
.min-width-ud-l-xl {
min-width: 45%;
}
}

@media all and (min-width: 1200px)
{
.min-width-ud-l-xl {
min-width: 45%;
}
}

.password-changed {
    position: relative;
    display: flex;
    align-items: center;
    color: green;
    font-size: 22px;
}

.main-header-menu-link:hover {
background-color: #eee;
text-decoration: none;
color: black;
}