@import url('/ml/open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    min-height: 100vh;
}

/*
body
{
    display: flex;
}
*/

section.sidebar {
    /* width: 24vw; */
    /* background-color: #4c5154; */
    background-color: #c21431;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 25vw;
    box-sizing: border-box;
    max-height: 100vh;
    overflow-y: auto;
}

div.logininfo
{
    margin: 2mm 2mm 0px 2mm;
    border-bottom: 1px solid #ffffff;
    padding: 2.5mm 5mm;
    color: #ffffff;
}

div.logininfo > a {
 /*
        position: absolute;
        right: 3mm;
        top: 3.5mm;
        padding: 1mm 3mm 1mm 2mm; */
        cursor: pointer;
        padding: 0.75mm 2mm 0.5mm 1mm;
        position: relative;
        top: -1mm;
        float: right;
    }

div.logininfo > a:hover
{
    background-color: rgba(0,0,0,0.3);
    border-radius: 2mm;
    border-color: rgba(240,255,224,0.9);
}

div.logininfo > a:before
{
    content: '\e001';
    font-family: Icons;
    font-size: 4mm;
}

section.sidebar > nav
{
    padding: 5mm;
    padding-bottom: 3mm;
}

section.sidebar > nav > a
{
    color: #e0e0e0;
    display: block;
    padding: 2mm 5mm;
    text-decoration: none;
    margin-bottom: 2mm;
    border-radius: 1.25mm;
    border: 1px solid #c21431;
    text-decoration: none;
}

section.sidebar > nav > a.specialdevitem
{
    color: #c0c0c0;
    font-style: italic;
}

section.sidebar > nav > a.active
{
    color: #ffffff;
    background-color: rgba(0,0,0,0.3);
    border-color: rgba(240,255,224,0.9);
    text-decoration: none;
}

section.sidebar > nav > a:hover
{
    color: #ffffff;
    background-color: rgba(0,0,0,0.15);
    border-color: rgba(240,255,224,0.45);
    text-decoration: none;
}

section.sidebar > nav > a:before
{
    font-family: Icons;
    padding-right: 0.5em;
}

section.main
{
    width: 74vw;
    padding: 5mm;
    margin-left: 25vw;
    transition: margin-top 1s 0s;
}

section.main iframe
{
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
    border: 0px none transparent;
}


@media screen and (max-width: 30cm)
{
    section.sidebar
    {
        background-color: #ff0000;
    }


    section.sidebar > nav
    {
        padding: 2mm;
        padding-bottom: 2mm;
    }

    section.sidebar > nav > a
    {
        padding: 1mm 2mm;
        margin-bottom: 2mm;
        border-radius: 1.25mm;
        /* font-size: 1.5vw; */
    }

    section.sidebar > nav > a:before
    {
        padding-right: 0.5em;
    }
}

@media screen and (max-width: 25cm)
{
    section.sidebar {
        background-color: #00ff00;
    }
    section.sidebar > nav > a
    {
        word-break: break-all;
    }
}

@media screen and (max-width: 20cm)
{
    section.sidebar
    {
        background-color: #0000ff;
    }
}

@media screen and (max-width: 15cm)
{
    section.sidebar
    {
        background-color: #ff00ff;
    }

    section.sidebar > nav > a
    {
        /* font-size: 7mm; */
    }
}