/* ----------------------------- */
/* ----------------------------- */
/* ------ REMOTE CONTROL ------- */
/* ----------------------------- */
/* ----------------------------- */

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

#remote {
    background:url('../img/remote-bg.jpg') no-repeat #000;
}
#zoneBlockSource{
    display: flex;
}
#remote #zoneBlock,#remote #zoneBlockSource { 
    width:1360px; 
    margin:0 auto;
    margin-top: 1rem; 
}
#remote .block { color:#c3c3c3 }
#remote .remote_label {
    font-size:17px;
    font-weight:bold;
    text-transform: uppercase
}
#remote .remoteElt {
    float: left;
    position: relative;
    font-size: 11px;
    line-height: 18px;
    font-weight: bold;
}
#remote .enhance .remoteElt,
#remote .sub .remoteElt { top:-15px; }
#remote .block .sub .incrementer_field { width:70px; }
#remote .source h1 {
    color:#bba97a;
    font-size:20px;
}
#remote .hdmi-zone-block{
    display:flex;
    flex-direction: column;
}
#remote .source {
    border: 1px solid #bba97a;
    background-color: #353434;
    border-radius: 10px;
    margin: 0px 20px 13px 0px;
    padding-left: 20px;
    width: 944px;
}
.zone-source,.hdmi-pass-through{
    float:right;
}
.hdmi-pass-through,.zone-source {
    width: 374px;
}
.hdmi-pass-through .remote_label{
    margin-right: 55px !important;
    margin-left: -11px;
    margin-top: 0px !important;
}
#remote .source .source-btn {
    float:left;
    background:url('../img/remote-srcBtn.png') no-repeat;
    width:157px; height:50px;
    line-height:50px;
    color:#979797;
    font-size:20px;
    margin:0 12px 12px 0;
    text-align:center;
    font-weight:bold
}
#remote .source .source-btn:hover { cursor:pointer }
#remote .source .source-btn.active,
#remote .source .source-btn:hover {
    color:#dae3e4;
    text-shadow: 0px 0px 13px #dae3e4
}

#remote .zone-source .yblock{
    width: 315px;
}

#remote .zone-source .yblock .remote_label{
    width: 135px;
    padding-top: 21px;
}

#remote .zone-source .yblock .remoteElt,
#remote .zone-source .yblock .tooltip-icon{
    padding-top: 9px;
}

#remote .power { margin:0 0px 0 30px; width:60px; }
#remote .power .remote_label{
    margin:10px 0;
    font-size:14px;
    text-align:center;
}
#remote .power .power-btn{
    margin-left:53px;
    border:none;
    float:none;
    padding:0;
    width:43px; height:128px;
    background:url('../img/remote-power.png') right top no-repeat !important;
    margin-bottom: -38px
}
#remote .power .power-btn.active{
    background:url('../img/remote-power.png') left top no-repeat !important;
}

#remote .yblock {
    border:1px solid #bba97a;
    background-color:#353434;
    border-radius: 10px;
    padding:20px;
    margin:0 17px 14px 0;
}
#remote .power + .yblock { margin-left:0 }
#remote .yblock.sub { padding-top:40px; margin-left:32px; width:363px; padding-right:13px }
#remote .yblock > div{ clear:both; margin-bottom:18px; min-height:36px }
#remote .yblock.sub > div,
#remote .yblock.enhance > div{ min-height:60px;margin-bottom: 10px }
#remote .yblock > div:last-child{ margin-bottom:0; min-height:40px }
#remote .yblock.triggers-panel > div:last-child{ margin-left:100px }
#remote .yblock select{ width:128px; font-size:15px; font-weight:bold;}
#remote .yblock option{ font-weight:bold;}
#remote .yblock.sub .fpcolor input{ font-size: 20px }
#remote .yblock.enhance { padding: 45px 10px 20px 30px }
#remote .yblock.sub .fpcolor input{ font-size: 20px; background:url('../img/remote-input.png') repeat; }

#remote .yblock .remote_label {
    width:104px; height:25px;
    line-height:25px;
    text-align:right;
    margin-right:13px;
    margin-top: -13px;
    float:left
}


#remote .yblock.params.right > div{
    min-height: 50px;
}

#remote .yblock.sub .remote_label { width:183px;margin-top: -13px; }
#remote .yblock.enhance .remote_label { width:96px; }
#remote .block .switcherOnOff_container.inone { background:none }
#remote .block .switcherOnOff_container.inone,
#remote .block .switcherOnOff {
    position:absolute;
    width:66px; height:58px;
    border:none;
    left:-3px; top:-7px;
    margin:0
}

#remote .block .triggers .switcherOnOff_container.inone,
#remote .block .triggers .switcherOnOff {
    position:absolute;
    width:110px; height:58px;
    border:none;
    left:-3px; top:-7px;
    margin:0
}

#remote .block .triggers .switcherOnOff.on{
    background:url('../img/remote-btn-trig.png') -110px 0px no-repeat
}

#remote .block .triggers .switcherOnOff {
    background:url('../img/remote-btn-trig.png') no-repeat;
}

#remote .block .switcherOnOff {
    position:absolute;
    background:url('../img/remote-btn.png') no-repeat;
    color:#2f2f2f !important;
    text-shadow:1px 1px 1px #fff;
}
#remote .block .switcherOnOff.active {
    z-index:2; position:relative;
}
#remote .block .switcherOnOff.on {
    background:url('../img/remote-btn.png') right top no-repeat;
    color:#7dc026 !important;
    text-shadow:1px 1px 1px #fff;
}

#remote .block .switcherOnOff.on.green {
    background:url('../img/remote-btn-green.png') right top no-repeat;
}

#remote .block .incrementer_field {
    float:left !important;
    border:none !important;
    width:60px ;
    height:55px !important;
    color:#c3c3c3 !important;
    font-size: 32px !important;
    font-weight: bold !important;
    margin: 0 4px !important;
    padding:0 !important;
    background:url('../img/remote-input.png') repeat-x;
}

#remote .dtsdialogcontrol .incrementer_field {
    width:35px;
    height:55px;
}

#remote .incrementer_field.db,
#remote .incrementer_field.ms {
    padding:0 24px 0 0 !important;
    text-align:right;
    background:url('../img/remote-db.jpg') right no-repeat;
}

.brightness .remote_input2{
    padding: 0 27px 0 0 !important;
    text-align: right;
}

#remote .third .incrementer_field.db {
    padding: 0 24px 0 0;
    text-align: right;
    background: url(../img/remote-db.jpg) right no-repeat;
}
#remote .block .incrementer_field.ms{
    background: url(../img/remote-ms.jpg) right no-repeat;
}
#remote .third .incrementer_field.ms {
    padding: 0 24px 0 0;
    text-align: right;
    background: url(../img/remote-ms.jpg) right no-repeat;
}
#remote .block .incrementer_dec,
#remote .block .incrementer_inc {
    width:44px; height:56px;
    float:left
}
#remote .block .incrementer_dec:hover,
#remote .block .incrementer_inc:hover { cursor:pointer }

#remote .block .incrementer_inc {
    background:url('../img/remote-inc.png') right top repeat-x;
}
#remote .block .incrementer_dec {
    background:url('../img/remote-inc.png') left top repeat-x;
}

#remote .trigger {
    text-transform: uppercase;
    display: inline-block;
    margin: 11px 13% 0 0;
}

#remote .third .yblock > div{
    min-height: 46px;
}

#remote .third .yblock > div.avzone{
    min-height: 30px;
}

#remote .third .yblock .remoteElt{ top:-15px; }

#remote .third .yblock > div input.incrementer_field.db{
    text-align: right;
}
#remote .third .yblock > div input.incrementer_field.ms{
    text-align: right;
}

#remote .third .incrementer_field{ width:145px; }
#remote .trigger .remote_label {
    width:94px;
    line-height:normal !important
}

#remote .trigger .remoteElt { top:0 }

#remote .block .zone2M .switcherOnOff_container{
    background: none;
    border: 0 none;
    height: auto;
    margin: 0;
    width: auto;
}
#remote .block .zone2M .switcherOnOff{
    background:url('../img/remote-btn2.png') no-repeat;
    width:118px; height:38px;
    position:relative;
    color:#979797 !important;
    text-shadow: none;
    padding:0;
    line-height:38px;
    font-size:17px;
    margin:10px 7px 0 0;
    top:0; left:0
}
#remote .block .zone2M .switcherOnOff.active{
    color:#fff !important;
    text-shadow: 0px 0px 13px #dae3e4
}

#remote .selectUl { width:160px }
#remote .selectUl ul{ z-index:4; }

#remote .selectUl li{
    width:160px;
    z-index:5;
    position:relative;
    text-align:center;
    height:24px;
    line-height:24px;
    font-size: 12px !important;
    font-weight: bold;
    color:#000;
    display:none;
    white-space:nowrap;
    background:url('../img/remote-select-li.png') repeat-y #fff;
}
#remote .selectUl li:hover{
    cursor:pointer;
    background:#ccc;
}
#remote .selectUl li.disabled{ color:#999}

#remote .selectUl li:first-child{
    background:url('../img/remote-select.png') no-repeat;
    width:136px;
    padding-right:24px;
    display:block;
    z-index:3;
}

#remote .selectUl ul.expanded{
    position:absolute;
}

#remote .selectUl ul.expanded li{
    display: block;
}

.loudness {
    margin-left: 2rem;
}

#remote .upmixMode li:not(.active).activeUpmix::before{
    content: "> ";
}

#remote .trigger.disable .remoteElt,
#remote .trigger.disable{
    opacity: 0.5
}

.remoteElt.text{
    width: 156px;
    text-align:center;
    font-size: 15px;
    color: black;
    background: white;
    border: 2px solid black;
    padding: 3px 0px;
}


.general .power .switcher{
    transform:rotate(270deg);
    -ms-transform:rotate(270deg); /* IE 9 */
    -webkit-transform:rotate(270deg);
    margin-top: -43px
}

.general .yblock{
    width: 206px
}

#remote .general .power .remote_label{
    float: right;
    display: block;
    text-align: center;
    width: 236px !important;
    margin-right: -126px;
    font-size: 17px;
}

.general .yblock #volume.volume .remote_label{
    width: 200px !important;
    text-align: center;
    margin-bottom: 10px;
}

#remote .general .remote_label{
    width: 104px !important
}

#connexionOverlay{
    position: absolute;
    z-index: 999999999999999999999999999;
    top: 228px;
    height: 25px;
    width: 123px;
    cursor: pointer;
}

.yblock.params > div {
    margin-top: 32.2px;
}

.tooltip-icon:not(#statusbar *){
    position: absolute;
}

.tooltip-icon{
    line-height: 11px !important;
}

.triggers-help{
    margin-left: -5px;
    margin-top: -10px;
}

.drc-help,
.dtsImaxMode-help{
    margin-top: -10px;
}

.block{
    position: relative;
}

.reboot-help{
    position: relative;
}

#remote .drcMode,
#remote .dtsImaxMode{
    min-height: 20px !important;
}

#remote .drcMode .remoteElt,
#remote .dtsImaxMode .remoteElt{
    margin-top: -13px !important
}

#remote .selectUl.select-preset li.active.disabled{
    color: #000;
}

#remote .third .yblock{
    height: 100%;
    width: 315px;
}

.thirdBlockAlign {
    margin-top: 0rem;
    margin-left: -1rem;
}

#remote .third .yblock > div.avzone{
    margin-top: 20px;
}

.mute2,.eq2,.zoneSource2,.volume2,.lypsinc2,.treble2,.bass2{
    display: none;
}

#remote .third .yblock div.zoneSource2{
    margin-top: 5px;
    min-height: 33px;
}

#remote .third .yblock div.mute2{
    margin-top: 20px;
    margin-bottom: 15px;
    min-height: 33px;
}

#remote .third .yblock div.eq2{
    clear: none;
    margin-top: 38px;
    margin-bottom: 5px;
    min-height: 33px;
}

#remote .third .yblock {
    margin-bottom: 15px;
    min-height: 33px;
}

#remote .rpreset .custom{
    font-weight: bold !important;
    background: url(../img/remote-select-custom.png) no-repeat !important;
}

#remote div .remoteElt .switcherOnOff_container.disabled,
#remote .disabled .remoteElt {
    opacity: 0.2;
}

#remote .rpreset,
#remote .inputStream,
#remote .upmixMode,
#remote .auropreset,
#remote .aurostrength,
#remote .centerspread,
#remote .drcMode,
#remote .dtsImaxMode,
#remote .dtsdialnorm,
#remote .dtsdialogcontrol,
#remote .aupreset,
#remote .stormXT{
    margin-top: 25px;
}
.stormXT{
    min-height:25px !important;
}
#remote .logo {
    float: right;
    top: 7px;
}

.stormXT .remoteElt {
    margin-top: -11px !important;
}
@media (max-width:1720px){
    #remote .logo {

    }
}

#remote .triggers-panel{
    width: 924px;
}

#remote .triggers {
    display: contents;
}

#remote .helpUseZ2{
    top:79px;
}

/* ### Bryston specific ### */

#remote.bryston{
    background: #282828;
}

#remote.bryston .yblock {
    border:3px solid #f5f5f5;
    background-color:#2c2c2c;
    border-radius: 0;
}

#remote.bryston #zoneBlock {
    width:1375px;
}

#remote.bryston .triggers-panel{
    width: 933px;
}

#remote.bryston .selectUl li:hover{
    background:#5e74dd;
}

#remote.bryston .source {
    margin:0 0 15px 0px
}

#remote.bryston .source .source-btn {
    background: #3d3d3d;
    color: #eef3fd;
    margin-right: 3px;
    margin-bottom: 3px;
    width: 167px;
}

#remote.bryston .source .source-btn.active,
#remote.bryston .source .source-btn:hover {
    background: #5e74dd;
    text-shadow: none;
}

#remote.bryston .source h1 {
    color: #eef3fd;
}
/* Focal */

#remote.focal .yblock,
#remote.focal .source h1 {
    color:#fff;
}
#remote.focal .remote_label {
    font-size: 15px;
}

@media (min-width:1910px){
    .focal#remote .logo img {
        margin-top: 0px !important;
    }
}

#remote.focal .block .incrementer_field {
    font-size: 28px;
}

#remote.focal .zone-source .yblock .remote_label{
    width: 137px;
}

#remote.focal .yblock {
    border:1px solid #4c4c4c;
    background-color:#353434;
}