#webcam {
    background-color: #a5bfdd;
    height: 600px;
    width: 740px;
}

#settings {
    bottom: 0;
}

#shot {
    top: 20px;
    left: 20px;
    cursor: crosshair;
}

#pan {
    background-image: url(/images/cara-horizontalni.png);
    width: 640px;
    height: 20px;
    top: 500px;
    left: 20px;
    visibility: hidden;
    cursor: pointer;
}

#tilt {
    background-image: url(/images/cara-vertikalni.png);
    width: 20px;
    height: 480px;
    top: 20px;
    left: 660px;
    visibility: hidden;
    cursor: pointer;
}

#zoom {
    background-image: url(/images/cara-vertikalni.png);
    width: 20px;
    height: 480px;
    top: 20px;
    left: 700px;
    visibility: hidden;
    cursor: pointer;
}

#zoomMinusMobile, #zoomPlusMobile, #exitFullscreen {
    display: none;
}

#panScroll, #tiltScroll, #zoomScroll {
    background-color: #999999;
    width: 20px;
    height: 20px;
    position: absolute;
    visibility: hidden;
}

#pan div, #tilt div, #zoom div {
    position: absolute;
    width: 20px;
    height: 20px;
}

#panLeft {
    background-image: url(/images/vlevo.png);
    z-index: 3;
}

#panRight {
    right: 0;
    background-image: url(/images/vpravo.png);
    z-index: 3;
}

#tiltPlus {
    background-image: url(/images/nahoru.png);
    z-index: 3;
}

#tiltMinus {
    bottom: 0;
    background-image: url(/images/dolu.png);
    z-index: 3;
}

#zoomPlus {
    background-image: url(/images/posunout-nahoru.png);
    z-index: 3;
}

#zoomMinus {
    bottom: 0;
    background-image: url(/images/posunout-dolu.png);
    z-index: 3;
}

#panScroll {
    background-image: url(/images/posuvnik-horizontalni.png);
    z-index: 2;
}

#tiltScroll, #zoomScroll {
    background-image: url(/images/posuvnik-vertikalni.png);
    z-index: 2;
}

#ip {
    width: 200px;
}

#resolution {
    font-size: 14px;
    width: 120px;
    height: 35px;
}

#presetList {
    font-size: 14px;
    max-width: 180px;
    visibility: hidden;
    height: 35px;
}



#zoomInfo {
    display: none;
}



#fullscreen {
    cursor: pointer;

}

#fullscreenDIV {
    display: inline-block;
    justify-content: center;
    align-items: center;
}


/* mobil na sirku */

@media screen and (max-width: 767px) {
    
    #fullscreenDIV {
        width: 100%;
    }

    #pan, #tilt, #zoom, #exitFullscreen {
        display: none;
    }

    #webcam {
        width: 100%;
        height: 420px;
    }

    #shot {
        top: initial;
        left: initial;
        position: relative;
    }

    #webcam img {
        width: 100%;
    }
}