*, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;    
}

#page {
    position: relative;
    max-width: 1150px;
    margin: 0 auto;          
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}

#page-header-logo {   
    margin: 10px;    
}

#page-header-user {   
    margin: 10px;
    text-align: right;
}

    #page-header-user > span,
    #page-header-user > a { 
        display: inline-block;
        vertical-align: middle;
        padding: 5px 10px;
        border-radius: 5px 0 0 5px;        
    }

    #page-header-user > a {        
        margin-left: -5px;
        text-decoration: none;        
        cursor: pointer;
        border-radius: 0 5px 5px 0;
    }

#page-navbar {
    position: sticky;
    top: 0;    
    z-index: 1; 
    margin-bottom: 20px;
}

    #page-navbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        #page-navbar ul li {
            line-height: 4em;               
        }

            #page-navbar ul li a {
                display: block;                
                padding: 0 10px;
                text-decoration: none;
            }

#page-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}

#page-footer { 
    text-align: center;
}

#page-footer-dss,
#page-footer-lab {
    flex-grow: 1;
    white-space: nowrap;
}

    #page-footer-dss h4,
    #page-footer-lab h4 {
        margin: 10px 0;
    }

    #page-footer-dss span,
    #page-footer-lab span {
        display: block;
        font-size: .8em;
    }

#copy-right {
    font-size: .8em;
    padding-top: 20px;
    padding-bottom: 5px;
    text-align: center;    
}

#results-methods-settings form {
    height: 600px;
}
  
    #results-methods-settings form:first-child tbody th[kind=zkratka] {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }    

.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align items in Main Axis */
    align-items: stretch; /* align items in Cross Axis */
    align-content: stretch; /* Extra space in Cross Axis */
}

.flex-center {
    align-items: center!important; /* align items in Cross Axis */
}

.flex-horizontal-center {
    justify-content: center!important;
}

.flex-space {
    justify-content: space-around !important;
}

.flex-end {
    justify-content: flex-end !important;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex-grow: 1;
    flex-shrink: 1;
}

.flex-2 {
    flex-grow: 2;
    flex-shrink: 2;
}

.flex-1-1-45 {
    flex: 1 1 46%;
}

.flex-outer li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-outer > li:not(:last-child) {
    margin-bottom: 5px;
}

.flex-outer > li > span {
    flex: 1 0 150px;
    max-width: 150px;
}