body {
    background: rgb(10,10,10);
}

#canvas {
    border: 1px solid rgb(105,41,23);
}

#idContainer {
    margin: 5px 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#idContainer > input[type=text]{
    text-align: center;
    border: 1px solid black;
    box-shadow: 0px 0px 2px;
}

#txtSelfId {
    background: rgb(194, 194, 194);
}

#mediaControllContainer {
    margin: 5px 0px;
}

#txtMediaURI {
    width: calc(100% - 400px);
}

#sldMediaVolume {
    width: 100px;
    vertical-align: middle;
}

#txtMessage {
    height: 60px;
    padding: 5px;
    margin: 0px;
    border: none;
    box-shadow: 0px 0px 2px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    width: calc(100% - 80px);
}

#btnSubmit{
    vertical-align: top;
    height: 70px;
    padding: 0px 20px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 0px 0px 2px #0033AA;
    border: none;
    cursor: pointer;
}

#btnSubmit:hover {
    text-shadow: 0px 0px 2px #0033AA;
}

#btnSubmit:active {
    color: white;
    text-shadow: 0px 0px 3px #0033AA;
}

#mediaPlayerContainer {
    margin: 5px 0px;
}

#videoPlayer {
    display: none;
    width: 100%;
    height: auto;
}

#audioPlayer {
    display: none;
}