@font-face {
    font-family: default_font;
    src: url(../img/DejaVuSans.ttf)
}

html, body{
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
}

*{
       -moz-user-select: none;
        -ms-user-select: none;
     -khtml-user-select: none;
    -webkit-user-select: none;
  -webkit-touch-callout: none;
            user-select: none;

    cursor:default;

    font-family: default_font;
}

/*for browsers that don't support this properly*/
template, audio{
    display:none;
}

@media screen and (min-width: 720px) {
    .desktop_only{
        display:initial;
    }
    .mobile_only{
        display:none;
    }
}

@media screen and (max-width: 720px) {
    .desktop_only{
        display:none;
    }
    .mobile_only{
        display:initial;
    }
}

.hide_the_fucking_address_bar{
    display:none;
}
@media screen and (max-device-width: 720px){
    .hide_the_fucking_address_bar{
        display: initial;
        position: absolute;
        top:100%;
        width:100%;
        background-color: black;
        height:512px;
        z-index: -1;
    }
}

.MPD_disconnected{
    position: fixed;
    width: 100%;
    height: calc(100% - 2em + 2px);
    background-color: rgba(0,0,0,0.5);
    color: red;
    text-align: center;
    z-index: 2;
}

.MPD_disconnected > *{
    position:relative;
    font-size: 3em;
    top:calc(50% - 1.5em);
}

input[type=button]{
    padding: 0;
    border: 0;
}

input[type=range][orient=vertical]{
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: bt-lr;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/chevron-bottom.svg) no-repeat right 5px center;
}

.MPD_button{
    cursor: pointer;
    margin-left: 0.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
}

.MPD_button *{
    cursor: pointer;
}


.hbox{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
}

.vbox{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
}

.vbox > *, .hbox > *{
    flex-grow: 1;
}

.hbox > .colapse{
    flex-grow:0;
}

.MPD_icon{
    flex-grow: 0;
}

.UI_main{
    width: 100%;
    height:100%;
    position:fixed;
}

.UI_main .TAB_control{
    overflow-x: auto;
}

.UI_main .TAB_button{
    border-style: solid;
    border-width: 2px;
    border-right-style: none;
    white-space: nowrap;
    padding: 0.25em 1em;
    min-width: -webkit-min-content; /*screw you Steve Jobs, I want my sunday back*/
}

.UI_main .TAB_selected + .TAB_button{
    border-left-style: none;
}

.UI_main .TAB_button.TAB_selected{
    border-radius: 0 0 10px 10px;
    border-width: 2px;
    border-right-style: solid;
}

.UI_main .TAB_button.TAB_selected:first-child{
    border-radius: 0 0 10px 0;
}

.UI_main .TAB_button.TAB_selected:last-child{
    border-radius: 0 0 0 10px;
}

.UI_main .TAB_page{
    border-top-style: solid;
}


.marque_overflow{
    overflow: hidden;
    white-space: nowrap;
    position:relative;
}

.marque_overflow > div{
    overflow-x: hidden;
    white-space: nowrap;
    position:absolute;
}

.MPD_toolbar .MPD_button{
    display: inline-block;
    padding-left: 1.5em;
    margin-left: 0.75em;
}

.MPD_toolbar{
    padding-left:0;
}