/* Copyright © 2018 Cineplex Digital Media, Inc.  All Rights Reserved. */
body {
    font-family: arial;
    font-size: 12pt;
}

.serial-test-device-container {
    position: relative;
    padding-top: 5px;
}

.serial-text-device-container-footer {
    border-bottom-color: #828282;
    border-bottom-color: rgba(0,0,0,.15);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 5px;
}

.serial-test-device-container .icon {
    display: none;
    margin-top: 3px;
}

.serial-test-device-container.offline .icon {
    display: inline-block;
}

.ui-header .ui-select, .ui-header .ui-btn-icon-notext.ui-btn-left {
    position: absolute;
    left: 5px;
    top: 5px;
}

.ui-header .ui-btn-icon-notext.ui-btn-right {
    position: absolute;
    top: 5px;
    right: 5px;
}

.ui-popup {
    min-width: 250px;
}

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

#divProgress {
    margin-top: 0.2em;
}

#divETA {
    margin-top: 0.5em;
}
.ui-header .ui-title {
    margin-right: 12%;
    margin-left: 12%;
}

.ui-content .client-ident-container {
    position: relative; 
    height: 30px; 
    padding: 4px; 
    margin-bottom: 10px;
}

.ui-content .client-ident-logo {
    position: absolute;
    top: 4px;
    right: 8px;
}

.ui-content .client-ident {
    position:relative;
    padding: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;   
    margin-right: 60px;
    font-weight: bold;
}

.addresstitle {
    text-align: center;
}

.address {
    text-align: center;
    padding-bottom: 5px;
}

.buttonbar {
    margin-top: 10px;
}

.displaynone {
    display: none !important;
}

.screenInstructions {
    font-size: 10px;
    background-color: #f2f2f2;
    padding: 5px;
    border: solid 1px #e5e5e5;
}

#frmIpScreen #instruction {
    margin: 5px 0px;
    font-size: 10pt;
}

#frmIpScreen .screen-link,
#frmIpScreen .screen-unlink {
    width: 20px;
    height: 20px;
    float: right;
    position: absolute;
    top: 14px;
    right: 10px;
}

#frmIpScreen .mz-screen-container {
    display: inline-block;
    position: relative;
    height: 45px;
    width: 97%;
    margin: 3px 5px;
}

#frmIpScreen .btnScreenSelect {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: left;
    padding-right: 3em;
}

#frmIpScreen .mz-name {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
}

#frmIpScreen #noDevice {
    text-align: center;
}

#noUnconfiguredScreens {
    margin: 20px 0px;
    text-align: center;
}

#screen-association-container {
    margin: 20px 0px;
}

#frmIpScreen #btnIPScreenAssociation {
    height: 25px;
    line-height: 25px;
}

#frmIpScreen #btnCurrentIp {
    width: 100%;
    height: 35px;
    line-height: 35px;
    cursor: default;
    font-size: 10pt;
}

#frmIpScreen #btnScanning {
    width: 160px;
    height: 35px;
    line-height: 35px;
    cursor: default;
    font-size: 10pt;
}

#frmIpScreen #radioFieldset .ui-controlgroup-controls,
#frmContact #radioPrestageFieldset .ui-controlgroup-controls {
    width: 100%;
}

#frmIpScreen #radioFieldset .ui-radio,
#frmContact #radioPrestageFieldset .ui-radio {
    width: 50%;
}

#frmIpScreen #radioFieldset .ui-radio label,
#frmContact #radioPrestageFieldset .ui-radio label {
    text-align: center;
}

#frmIpScreen .ui-btn-active,
#frmIpScreen .ui-radio-on,
#frmContact .ui-btn-active,
#frmContact .ui-radio-on {
    background-color:#344c70;
    border-color: grey;
    color: white;
    text-shadow: none;
}

#frmIpScreen #btnCurrentIp,
#frmIpScreen #btnScanning,
#frmIpScreen .btnScreenSelect,
#frmIpScreen .ui-radio-off,
#frmContact .ui-radio-off {
    background-color: white;
    border-color: grey;
    color: black;
    text-shadow: none;
}

input.gooddevice, label.gooddevice {
    font-weight: bold;
    color: #006600;
}

.icon_failed {
    background-image:url('../images/delete-white.png');
    background-color: red;
}    

.icon_offline {
    background-image:url('../images/unlink-white.png');
    background-color: red;
}    

.icon_ip {
    background-image:url('../images/check-white.png');
    background-color: green;
}    

.icon_pending{
    background-image:url('../images/forbidden-white.png');
    background-color: grey;
}

.icon_doa{
    background-image:url('../images/forbidden-white.png');
    background-color: red;
}

.icon_inprogress{
    background-image:url('../images/loading_transparent.gif');
    background-color: blue;
}

.icon_ddprogress{
    background-image:url('../images/lildrag.gif');
    background-color: blue;
}

.icon_success {
    background-image:url('../images/check-white.png');
    background-color: green;
}    

.icon_locked {
    background-image:url('../images/lock-white.png');
    background-color: grey;
}    

.ui-icon-question:after {
    background-image:url('../images/question-white.png');
    left: 60%;
}

.icon {
    background-repeat:no-repeat;
    background-position:center;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
}

label.error {
    color: red;
    width: 100%;
    text-align: center;
}

label.info {
    color: #000000;
    opacity: 0.6;
    width: 100%;
    text-align: center;
}

.ui-field-contain span.textdata {
    margin: 0.5em 2% 0 0;
}

/* responsive stuff */
.page_main {
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 10px;
}
.ui-field-contain label {
    text-align: left;
}

.classETA {
    text-align: center;
    margin-top:5px;
    font-size: .9em;
}

/* First breakpoint at 448px - match jquery mobile */
@media all and (min-width: 448px){
    .ui-field-contain label {
        text-align: right;
    }
}

@media all and (min-width: 576px){
    .page_main {
        width: 540px;
    }
}

/* Second breakpoint at 800px */
@media all and (min-width: 800px){

}

.float-right {
    float: right;
}

#frmConfiguration td.device-textbox-cell {
    position: relative;
}
#frmConfiguration input.marketingZone {
    padding-right: 2em;
}
.connection {
    position: relative;
    border: 1px solid #999999;
    border-radius: 6px;
    margin-top: 1.4em;
    padding: 10px 0px 0px 0px;
}
.connection span.connection-name {
    position: absolute;
    top: -.75em;
    left: 1em;
    background-color: #F5F5F5;
    border: 1px solid #999999;
    border-radius: 1em;
    padding: 0px 10px 0px 10px;
    font-weight: bold;
}
.connection .ui-input-text,
.connection .ui-btn {
    margin: 0px;
}
.connection .icon-container {
    padding-top: 4px;
    width: 1%;
}
.not-last-marketingzone {
    border-bottom: 1px solid #CCCCCC;
    margin-bottom: 10px;
}
.marketingzone-table {
    margin: 5px;
}
.serial-number {
    font-size: .9em;
}

#frmConfirmation .btnScreenTest,
#frmFailoverConfirmation .btnFailoverTest {
    width: 52px;
}

#frmFailoverConfirmation .failover-to {
    font-style: italic;
    font-size: .9em;
    margin-top: -4px;
}

.test-status {
    font-size: .9em;
    font-style: italic;
}
.test-status a,
.test-status a:hover {
    color: inherit;
    text-decoration: none;
}
.test-status .test-help-indicator {
    display: none;
    border-radius: 12px;
    margin-right: 6px;
    color: white;
    font-size: 14px;
    line-height: 16px;
    padding: 2px 6px 2px 6px;
}
.test-status a.notfound .test-help-indicator,
.test-status a.offline .test-help-indicator {
    display: inline-block;
}
.test-status a.notfound,
.test-status a.offline {
    cursor: pointer;
}
.test-status.working {
    color: #333333;
}
.test-status.working .test-help-indicator {
    background-color: #333333;
}
.test-status.failure {
    color: red;
}
.test-status.failure .test-help-indicator {
    background-color: red;
}
.test-status.success {
    color: darkgreen;
}
.test-status.success .test-help-indicator {
    background-color: darkgreen;
}

.dialog-support-footer {
    text-align: center;
}

.qrcode-text-btn {
    display:inline-block;
    position: absolute;
    top: 10px;
    right: 2px;
    height: 1.2em;
    width: 2em;
    background: url('../images/qrcode.svg') 50% 50% no-repeat;
    cursor: pointer;
}

.qrcode-text-btn input[type=file] {
    position: absolute;
    top: -10px;
    right: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    cursor: inherit;
}

.qrcode-text-btn .ui-input-text,
.confirmation-photo-btn .ui-input-text {
    border: none;
}

.confirmation-photo-btn {
    position: relative;
    display:inline-block;
    top: 2px;
    right: 2px;
    height: 1.2em;
    width: 2em;
    background: url('../images/camera.svg') 50% 50% no-repeat;
    cursor: pointer;
}

.confirmation-photo-btn input[type=file] {
    position: absolute;
    top: -10px;
    right: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    cursor: inherit;
}

.photo-preview img {
    cursor: pointer;
}

.distributionError {
    background-color: #f3ced3;
    padding: 5px;
    border: solid 1px #ff0000;
}

.distributionStatusOk {
    background-color: #f2f2f2;
    padding: 5px;
    border: solid 1px #e5e5e5;
}

.distributionStatusText {
    font-size: 14px;
}
.distributionStatusSubText {
    font-size: 12px;
}

.help-content {
    font-size: 14px;
}
.help-content > div {
    margin-top: 4px;
}
.help-content .help-overview {
    font-size: 1.2em;
}
.help-content .help-title {
    margin-top: 6px;
    font-size: 1.2em;
    font-weight: bold;
}
.help-content .help-subtitle {
    margin-left: 10px;
    font-weight: bold;
    font-style: italic;
}
.help-content .help-instruction {
    margin-left: 20px;
}
.help-content .help-bullet {
    display: list-item;
    list-style-type: circle;
    list-style-position: inside;
    margin-top: 2px;
}
.help-content .help-images {
    margin-left: 40px;
    font-size: 0.9em;
    line-height: 30px;
    font-style: italic;
}
.help-content .help-images img {
    height: 30px;
    vertical-align: middle;
}
.help-settings {
    padding-top: 10px;
    width: 200px;
    margin: 0 auto;
}
.help-settings .ui-btn,
.help-settings .ui-btn:hover {
    background-color: white;
    border-color: #CCCCCC;
    color: #333333;
    text-shadow: none;
    padding: .6em .5em .5em 2.5em;
}
.help-settings .ui-btn-icon-left:after {
    background-color: #344c70;
}

#privacyPolicy {
    color: #eeeeee;
    font-size: 0.6em;
}