/*
*{
border: 1px solid black;
}
.ves-container{
.row-level-1{
border: 1px solid blue;
}
.col-inner{
border: 1px solid yellow;
}
}
*/

/******/

body::before {
    content: 'Development Server (DEVBUILDID)';
    background: #f00;
    padding: 5px 10px;
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
    color: white;
    font-size: 20px;
    font-weight: bold;
    z-index: 9999;
}

/*
.nav-1 .submenu.level0{
display: flex !important;
}
.nav-1-4 .submenu.level1{
display: block !important;
}
*/


/* desktop */
@media (min-width: 768px) { /* desktop */
    /* transparent background*/
    .navigation ul{
        background-color: rgba(255,255,255,0) !important;
    }
    .navigation ul.level0{
        background-color: rgba(255,255,255,0.95) !important;
        width: 95% !important;
    }

    /* remove borders and shadow */
    .navigation ul ul ul{
        box-shadow: none !important;
        border: none !important;
    }

    /* bold 1st level (headers) */
    .navigation li.level1>a{
        font-weight: bold;
        /* remove icon*/
        .ui-menu-icon{
            display: none !important;
        }
    }

    /* make all parents static so absolute positions work */
    .navigation,
    .navigation>ul,
    .navigation>ul>.level0{
        position: static !important;
    }
    /* put the sub menus into the layout columns */
    .submenu.level1{
        position: static !important;
        display: block !important;
    }

    /* make the level 0 a flex layout so sub menus become columns */
    /* and center it */
    .submenu.level0[aria-expanded="true"]{
        display: flex !important;
        justify-content: center;
        left: 50% !important;
        transform: translateX(-50%);
        padding-top: 55px !important;
    }
    /*
    .submenu.level0>li{
    flex-grow: 1;
    flex-shrink: 1;
    max-width: auto !important;
    min-width: auto !important;
    width: auto !important;
}
*/
.submenu.level0>li{
    max-width: auto !important;
    min-width: auto !important;
    width: 15% !important;
}

}

/*** calc ***/

#heatcalc{
    width: auto;

    *{
        position: relative;
        font-family: arial;
    }

    #hc_table{
        border-top:1px solid #f0f0f0;
        border-left:1px solid #f0f0f0;
        text-align: center;
        border-collapse: separate;
        td,th{
            padding: 4px 10px;
            text-align: center;
            border-bottom:1px solid #f0f0f0;
            border-right:1px solid #f0f0f0;
        }
        th{
            z-index: 150;
            background-color: #f0f0f0;
        }
        tbody th{
            z-index: 100;
        }
        thead tr:first-child th{
            background-color: #000;
            color:#fff;
        }
        /*thead tr:nth-child(2) th{
            border-color: #fff;
        }*/

        thead th:nth-child(1){
            z-index: 200;
        }
        td.hover, tr.hover td{
            background-color:#990000;
            color:#fff;
        }
        .filtered{
            color:#aaa;
        }
    }

    select{
        width:auto;
    }
    fieldset{
        text-align: center;
        border:1px solid #888;
        padding:5px;
        margin:5px;
        margin-bottom:10px;
    }
    label{
        text-align: right;
    }
    legend{
        margin: 0 auto;
    }
    #filters input,#temps input{
        width:50px;
    }
    #filters fieldset{
        display: inline;
    }

    #button_container{
        position: relative;
        button{
            margin-top:100px;
            font-size: 50px;
            background-color: rgba(153, 0, 0, 0.75);
            color:#fff;
            z-index: 250;
            position: absolute;
            top: 0;
            &#left{
                left: 8%;
            }
            &#right{
                right: 8%;
            }
        }
    }

    #table_container{
        overflow: auto;
        overflow-y: hidden;
        overflow-scrolling: touch;
    }

    .field{
        white-space: nowrap;
    }
}