﻿/* DEFAULTS
----------------------------------------------------------*/

body
{
    background: #4e5055;
    font-size: medium;
    font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #FFFFFF;

    background-image: url('../Images/Templates/grey.png');
    background-repeat: repeat;
}

a:link, a:visited
{
    color: #fe9900;
    text-decoration: none;
}

a:hover
{
    color: #fe9900;
    text-decoration: underline;
}

a:active
{
    color: #fe9900;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #FE9900;
 
    text-transform: none;
    font-weight: bold;
    margin-bottom: 15px;
    
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 100%;
    margin: 0px auto 65px auto;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: black;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 12px;
    min-height: 220px;
    background-color: transparent;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    background-color: #444444;
    color: #FFFFFF;
    font-size: 1.1em;
    font-variant: inherit;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 4px 10px;
    text-transform: none;
    margin: 15px;
    text-align: right;
    height:25px;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color: black;
    width: 100%;
    font-weight: bold;
    color: white;
}

div.menu
{
    padding: 4px 0px 4px 0px;
    margin: 0 auto;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: black;
    color: white;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    font-weight: bold;
}

div.menu ul li a:hover
{
    background-color: black;
    color: white;
    text-decoration: underline;
}

div.menu ul li a:active
{
    background-color: black;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-variant: normal;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline
{
    display: inline;
}

legend
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
    color: #FFF;
}

input.textEntry, .registrationDropdown
{
    width: 200px;
    border: 1px solid #ccc;    
}

.registrationDropdown
{

  height: 51px;
    width: 216px;
}

input.passwordEntry
{
    width: 200px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    clear: both;
    text-align: left;
    background-color: #333333;
    background-image:url('/Images/Templates/banner.jpg');
    background-position:left top;
    background-repeat: repeat-x; 
    height: 154px;
}

@
.title img
{
    margin: 0 auto;
    display:none;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: center;
    padding: 10px;
    padding-left: 0px;
    color: White;
    height:45px;
}




.loginDisplay a.selected
{
    background-color: #444444 !important;
    border: 1px dashed #ccc;
}
.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: left;
    padding-left: 0px;
}

.PrepaidImageButton
{
    height: 100px;
    padding:0px;
    
}


.voucherItem
{
    width: 230px;
    clear: both;
}

.voucherContainer
{
    width: 230px;
    background-color: white;
    margin: 5px 0px 15px;
    clear:both;
}

.voucherPIN
{
    font-family: Verdana;
    font-weight: bold;
    font-size: 16px;
    clear: both;
    text-align: center;
    color: #000000;
}
.voucherText
{
    font-family: Verdana;
    font-weight: bold;
    font-size: 14px;
    clear: both;
    color: #000000;
    padding-left:5px;
    text-align:center;
    font-size:11px;
}

.reportText
{
    font-family: Courier New;
    font-weight: bold;
    font-size: 11px;
    clear: both;
    color: #000000;
}

.messageText
{
    color: white;
    clear: both;
    color: white;
    display: block;
    margin: 5px;
}

input,.registrationDropdown,select
{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: none;
    background-color: #dfdfdf;
    -webkit-box-shadow: 1px 1px 5px 1px #000;
    box-shadow: 1px 1px 5px 1px #444;
    min-height: 35px;
    padding: 8px;
    padding-top: 16px\9; /* IE8 and below */ 
    padding-bottom: 0px\9; /* IE8 and below */ 
    font-size: 16px;
}

.ProceedButton
{
    width: 200px;
    height: 100px;
    background-color: #008400;
    font-weight: bold;
    font-size: large;
    color: #fff;
    float: left;
    margin-right:25px;
    margin-bottom:15px;
}




.CancelButton
{
    float: left;
    width: 200px;
    height: 100px;
    background-color: #A50000;
    font-weight: bold;
    font-size: large;
    color: #fff;
    margin-right: 10px;
    margin-bottom:15px;
}

#ConfirmContainer div
{
    float: left;
    width: 150px;
}
/* css for timepicker */
.ui-timepicker-div .ui-widget-header
{
    margin-bottom: 8px;
}
.ui-timepicker-div dl
{
    text-align: left;
}
.ui-timepicker-div dl dt
{
    height: 25px;
    margin-bottom: -25px;
}
.ui-timepicker-div dl dd
{
    margin: 0 10px 10px 65px;
}
.ui-timepicker-div td
{
    font-size: 90%;
}
.ui-tpicker-grid-label
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-rtl
{
    direction: rtl;
}
.ui-timepicker-rtl dl
{
    text-align: right;
}
.ui-timepicker-rtl dl dd
{
    margin: 0 65px 10px 10px;
}

.ReportHeader
{
    background-color: #444444;
    color: #FFFFFF;
    font-size: 1.1em;
    font-variant: inherit;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 4px 10px;
    text-transform: none;
}

.ReprintHeader
{
    background-color: #444444;
    color: #FFFFFF;
    font-size: 1.1em;
    font-variant: inherit;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 4px 10px;
    text-transform: none;
}

.ReportOption
{
    /*font-weight: bold;     font-size: large;     color: white;     text-align: left;     vertical-align: middle;     padding:3px;*/
    background-color: #444444;
    border: 1px solid #555555;
    color: white;
    float: left;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
    padding: 6px;
    text-align: left;
    vertical-align: middle;
    width: 150px;
    *height:82px;
    min-height:82px;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:none;
    cursor:pointer;
}

.ReportOption img
{
    vertical-align: bottom;
}

.ReprintNetworkList
{
}


.ReprintOption IMG
{
    width: 84px;
}

.ReprintOption
{
    width: 84px;
}

.reprintItem
{
        background-color: #444444;
    border: 1px solid #555555;
    color: white;
    float: left;
    font-size: large;
    font-weight: bold;
    margin: 5px;
    padding: 6px;
    text-align: left;
    vertical-align: middle;
    width: 150px;
    min-height:110px;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:none;
    cursor:pointer;
    
}
.reprintItem img
{width:150px;}
#ReprintItemListContainer .CancelButton
{clear:both;}

.main > div {
    float:left;
    clear:left;
}
#securityPanel {
    float:left;
    padding-left:10px;
    padding-right:10px;
    clear:none;
    cursor:pointer;
    margin-bottom:0px;
    background-color:black;
}
#securityPanel div img {
    float:left;
    margin-top:3x;
    cursor:pointer;
}
#securityPanel #username {
    vertical-align: middle;
    cursor:pointer;
    float:left;
}
#securityPanel #username label{
    margin-top: 9px;
    float:left;
    clear:right;
    margin-left:5px;
    cursor:pointer;
}
#PINContainer {
    float:left;
    width:450px;
    clear:left;
}
#PINContainer label {
    float:left;
    clear:left;
    margin:12px 10px 0px 0px;
}
#PINContainer input {
    float:left;
    clear:right;
    margin-bottom:15px;
}



.balanceHeader
{
    background-color: #444444;
    color: #FFFFFF;
    font-size: 1.1em;
    font-variant: inherit;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 4px 10px;
    text-transform: none;
    width:200px;
    float:left;
}

#params
{margin: 5px 0;}

.referencecode
{color:#fff;
 height:1.5em;
 border:solid 1px #ccc;
 background-color:#444;
  padding: 10px 10px 7px;
 margin:0 5px;
 border-radius:6px;

}
 
 .lgnCheckBox input
 {
     min-width:0px;
     min-height:0px;
     padding: 4px;
     background-color: #4f5155;
 }
 fieldset.login
 {
     padding-top: 0px;
 }
 .lgnBtn
 {
     color: #010000;
     font-weight: bold;
     font-size: 14px;
     padding-top: 8px\9; /* IE8 and below */ 
     padding-bottom: 0px\9; /* IE8 and below */ 
     text-align: left\9; /* IE8 and below */ 
      width: 100px;
    
 }



 
#ElectricityTemplate
{
    width: 230px;
    background-color: white;
    margin: 5px 0px 15px;
    clear:both;
    font-family: Courier New;
    overflow:hidden;
}

#ElectricityTemplate img {
    width: 230px;
}

#ElectricityTemplate .s {
    font-size: 11px;
    color: #000000;
    align-content :center;
    padding-left:5px;
    padding-right:5px;
}

#ElectricityTemplate .b {
    font-size: 16px;
    color: #000000;
  align-content :center;
    padding-left:5px;
    padding-right:5px;
}

#ElectricityTemplate .n {
    font-size: 12px;
    color: #000000;
  align-content :center;
    padding-left:5px;
    padding-right:5px;
}

#ElectricityTemplate .c {
  text-align :center;
}

#ElectricityTemplate .sp10 {
  padding-top :5px;
}
#ElectricityTemplate .sp20 {
  padding-top :10px;
}
#ElectricityTemplate .sp30 {
  padding-top :15px;
}

.ElectricityNumber {
    clear:both;
    vertical-align:central;
    font-size:26px;
}

.ElectricityNumber #ElecNumber{
    margin-bottom:10px;
    width:350px;
}


#ElectricityPrevend {
    clear:both;
    padding:5px;
    padding-bottom:10px;
    float:left;
    width:315px;
    margin-right:0px;
    font-size:26px;
    
}

#ElectricityPrevend #ElecAmount{    
    margin:  10px 10px 10px 10px;
    width:200px;
    text-align:right;
}

.electricityText {
    color: #000000;
}

.numKey {
        background-color: #444444;
    border: 1px solid white;
    color: white;
    float: left;
    font-size: 40px;
    text-align:center;
    font-weight: bold;
    margin: 5px;
    padding: 6px;
    vertical-align: middle;
    width: 60px;
    min-height:60px;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:none;
    cursor:pointer;
}

.numKey:hover {
    background-color: #336699;
}

.numPad {
    background-color: #333333;
    border: 1px solid #555555;
    color: white;
    float: left;
    width: 246px;
    min-height:213px;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:none;
    cursor:pointer;

}

div.keyPad {
    margin-left:10px;
    background-color: #333333;
    border: 1px solid #555555;
    color: white;
    float: left;
    width: 820px;
    min-height:213px;
     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border:none;
    cursor:pointer;
    clear:none;
}

.preVendText {
    width:230px;
    background:white;
    color:black;
    font-size:14px;
}

.FilterButton.PrepaidImageButton {
    width:90px;
    height:90px;
    margin: 0px;
    padding:0px;
}
.FilterButton.ProceedButton {
    width:90px;
    height:90px;
    margin-right: 4px;
    padding:0px;
}
.optionFilter {
    width:100%;
}

/*--------------MOBILE ADDITIONS------------------*/
#keyPad, #numPad,.numPad

,#MainContent_btnBuy7
,#MainContent_btnBuy8
,#MainContent_btnBuy9
,#MainContent_btnBuy10
{
display:none;}

.PrepaidImageButton, .FilterButton.PrepaidImageButton, .FilterButton.ProceedButton,.ProceedButton
{width:18%;
min-width:65px;
height:auto;
max-width:100px;
min-height:65px;
float:left;
margin:0.5%;
font-size:1em;}

#ConfirmContainer .ProceedButton
{margin:1%;
min-width:45px;}


.main
{padding:0 0px;}

#ConfirmContainer div
{float:none;
width:100%;}

    #ConfirmContainer div img {
       display: block;
    float: none;
    margin: 5px auto 0;
    max-width: 150px;
    width: 150px;
    }

.optionFilter
{position:fixed;
background-color:rgba(0,0,0,0.9);
padding:6px;
border-bottom: solid 2px #666;
}


#OptionContainer
{margin-top:100px;
padding-top:14px;
margin:100px 0px;
width:100%;
}

.header
{display:none;}

.CancelButton
{margin:1%;
width:98%;
clear:both;}

#MainContent_btnBuy1
{width:98%;
max-width:98%;
clear:both;}

#ConfirmContainer
{width:98%;
max-width:500px;
float:none;
margin:auto auto;
}

.CancelButton
{width:98%;
height:auto;
padding:20px;
}
.ShowVoucherContainer .ProceedButton
{width:!00}


/*Login Page*/
.accountInfo
{width:283px!important;
margin:0 auto;
float:none!important;}



.page div.accountInfo
{text-align:left;}

.footer
{position:fixed;
bottom:0px; right:0px;
margin:0px;
height:auto;
background-color:#000;}

.footer ul
{margin-top:0px;
padding-left:0px;
display:inline-block;
float:left;
margin-bottom:0px;}

.footer ul li
{width:auto;

padding-right:11px;
list-style:none;

}


#loginFooter #HeadLoginView_HeadLoginStatus
{display:inline-block!important;}

/*No Logout on device at all. Factory reset if needed to change user*/
a#HeadLoginView_HeadLoginStatus{
display:none!important;}

#loginFooter span
{display:none;}

.page
{margin-bottom:95px;}

.footer ul li a img, #loginFooter #HeadLoginView_HeadLoginStatus img
{padding:3px!important;}

.footer ul li a
{display:inline-block!important;}

#PINContainer {
    width: 320px;
    margin: 10px auto;
    float: none;
}
#PINContainer .ProceedButton
{width:98%;
margin:1%;
max-width:98%;}

#PINContainer div
{float:left;
margin-top:15px;}
#PINContainer #txtPIN
{float:right;}
#PINContainer label
{word-wrap:normal;
width:72px;
text-align:right;}

#ShowVoucherContainer
{width:320px;
margin:0 auto;
float:none;}
#ShowVoucherContainer .ProceedButton
{width:98%;
max-width:98%;
margin:1%;}
#VoucherContainer
{margin:0 auto;
}

#ShowVoucherContainer .CancelButton
{margin-bottom:10px;}

#ReportDisplay
{width:320px;
margin:10px auto 0;
float:none;}

#ReportDisplay .ProceedButton, #ReportParameters .ProceedButton, #ShowElecNumber .ProceedButton, #ShowElectricityContainer .ProceedButton,#SmartProductContainer
{width:98%;
max-width:98%;
margin:1%;
margin-top:10px;}

#VoucherContainer
{margin:10px auto 0; float:none;
 color:#000;

}

#ShowElecNumber , #ShowElectricityContainer,#SmartProductContainer
{width:320px;
 margin:0 auto;

}

#ElectricityTemplate{
margin:0 auto;}
.referencecode
{display: inline-block;
margin-top:3px;
clear:both;
}

.ElectricityNumber #ElecNumber
{width:94%;
margin:1%;
padding-left:2%;
padding-right:2%;
}

#ShowLoadingContainer img
{display:block;
float:none;
margin: 20px auto 20px;
}
#balancemeta {
    font-size:10px;
    color:#555;
    clear:both;
    display:inline-block;
    padding-left:10px;
}
#BalanceContainer {
background-color:transparent!important;
padding-left:0px;
float:right;
}
#BalanceAmount {
font-size:15px;
padding-left:15px;
}
.balanceHeader {
margin-bottom:0px;
font-size:1em;
width:auto;
}
.footer {
width:100%;
padding:4px 0px;
} 

    .footer ul {
    margin-left:15px;}
#Hide  span{

cursor:pointer;
}
#Hide {
background-color:transparent!important;
height:30px;
display:inline-block;
clear:left;
margin-left:7px;
}
    @media only screen and (max-width:480px){
        #balancemeta {
        display:none!important;}
    }

      @media only screen and (max-width:640px) and (min-width:481px){
     .PrepaidImageButton, .FilterButton.PrepaidImageButton, .FilterButton.ProceedButton,.ProceedButton
{width:18%;
min-width:65px;
height:auto;
max-width:97px;
min-height:65px;
float:left;
margin:0.5%;
font-size:1em;}
    }
    /* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

input.pinEntry
{width:200px;}
#ShowLoadingContainer
{float:none;
margin: 0 auto;}
#PINContainer input[type=number] {
    -webkit-text-security: disc;
    text-security: disc;
}

/*#ElectricityPrevend input[type=number] {
    -webkit-text-security: none;
}*/

.nofloat {
float:none!important;
clear:both;
}
#ShowPreVendContainer .CancelButton{
    width:47%;
    clear:none;
    float:left;
    margin:5px 0; 
}

#ShowPreVendContainer .buybutton{
    width:47%;
    clear:none;
    float:right;
}

.small,.field-description {
font-size:0.7em;
color:#ccc;
}
.BDC_CaptchaDiv
{transform: scale(0.73);
transform:scale(0.73);-webkit-transform:scale(0.73);transform-origin:0 0;-webkit-transform-origin:0 0;


}
.BDC_CaptchaDiv
{margin-left:9px!important;}

.BDC_CaptchaDiv
{width:240px!important;}

#restrict {
width:249px;
overflow:hidden;
}
    #restrict.forgotpassword {
    padding-left:3px;}
    #restrict.forgotpassword .BDC_CaptchaDiv{
        transform-origin: center center;-webkit-transform-origin:center center

    }

input[type="button"],input[type="submit"]
{font-size:13px;}

#username label {
display:none;}

#username img {
margin-top:3px;}

a#HeadLoginView_HeadLoginStatus {
display:block;
clear:both;
position:relative;
top:20px;
border:solid 1px #ccc;
border-radius:5px;
padding:5px;
color:#ccc;
text-decoration:none!important;
}
#HeadLoginView_HeadLoginStatus img {

    vertical-align: middle;
    border-radius: 17px;
    border: solid 1px #111;
    margin-right: 6px;
}

img[src*="Images/loggedout.png"] {
  background:gray;
  /*animation:pulse 1s infinite alternate;*/
  border-radius:13px;
  border: 0px solid #000;
  border-radius: 17px;
}

@keyframes pulse {
  from { box-shadow:0px 0px 5px 1px #fe9900; }
  to { box-shadow:0px 0px 10px 10px #fe9900; }
}

.ss {
font-size:5px;}

/*For the v1 device specific screen adjustments*/
body.v1 #Panel1 {
margin-left:8px; margin-top:6px;}
#Panel1 {
padding-left:7px;}

body.v1 .optionFilter {
padding-left:8px;}
/*End of v1 device specific adjustments*/
.sweet-alert fieldset {
display:none!important;
}
.sweet-alert button.confirm {
margin-top:20px!important;}
.sweet-alert h2 {
margin-top:0px!important;
font-size:20px!important;
line-height:30px!important;

}
#supportCommands {
 
padding:0 0; margin:0 0;

}
#VoucherContainer
{background-color:#fff;}
#VoucherContainer img
{height:auto}
#drawcanvas{
width:230px;
}
#barcodeText {
display:none;}

#ShowLoadingContainer {
    text-align: center;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: #000;
    z-index: 9999;
    opacity: 0.7;}
a#HeadLoginView_HeadLoginStatus {
text-align:center;}
#ReprintNetworkList {
text-align:center;}
.bankdetails {
    border: 1px solid #ccc;
    border-radius: 6px;
    float: left;
    width: 213px;
    padding-bottom:10px!important;
    font-size:12px;
    margin-top:3px;
}
.ui-widget {
    font-family: Arial,sans-serif;

}
.ui-accordion .ui-accordion-content {
background-color:rgba(0,0,0,0.7);
background-image:none;
padding:5px 5px 25px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-color:rgba(110,110,110,0.7);
background-image:none;
border:solid 1px rgba(110,110,110,0.7);
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background-image:none;}
#accordion,#WebDetails {
padding:0 0!important;
min-width:330px;
}
#WebDetails {
font-size:12px;}
#supportCommands a {
 border: 1px solid #ccc;
    border-radius: 6px;
    margin: 10px 0 0px 10px ;

    text-align: center;
    width: 98px;
    padding:30px 10px;
 display:block;
 float:right;

}
.ui-accordion .ui-accordion-header {
font-size:1.3em;}
.ui-timepicker-div {
display:none;}
.ui-datepicker .ui-datepicker-buttonpane {
margin-top:0px;}
.amountreprintvoucher {
    background-color: #000;
    border-radius: 3px 0 5px;
    float: left;
    padding: 2px;
    position: absolute;
}
.adminPanel {
display:none;}
.passlabel {
font-size:1.5em;
padding:3px;
border:dotted 1px #ccc;
display:inline-block;
margin:2px;
border-radius:3px;
}

#batterylevel {
    background-color: #fff;
    border-radius: 0px 5px 0px;
    color: black;
    float: right;
    font-size: 0.5em;
    padding: 2px 5px;
    position:fixed;
    right:3px;
    top:0px;

}

#smartProductPanel .ProceedButton
{
    width:46%;
    clear:right;
    float:left;
}
#smartProductPanel .CancelButton {
    width:46%;
    clear:left;
    float:left;
}
#smartProductPanel .ProceedButton, #smartProductPanel .CancelButton {
min-height:65px;
margin:5px 5px 8px;
padding:20px;
}
img.PrepaidImageButton.pinless {
clear:both;}
#SmartProductContainer {
margin:0px auto;
float:none;
}
#smartProductPanel > *{
    margin-left:5px;
}
.margincenter {
margin:0px auto!important;
width:150px;

}
    .margincenter img {
    width:100%;
    max-width:100%;
    border-radius:5px 5px 5px 5px;
    margin-top:5px;
    }
#smartProductPanel input, #smartProductPanel select {
min-height:20px;}

#smartProductPanel input[type="text"],#smartProductPanel input[type="number"], #smartProductPanel select {
    width:90%;
    font-size:1.3em;
}
#smartProductPanel label.error {
  clear: both;
    display: block;}
.sweet-alert .sa-icon.sa-custom {
    border-radius: 7px!important;
    background-size: 103% 103%!important;
}
#smartProductPanel select {
width:95%;
}

.hide {
display:none;

}
.signalindicator {
width:20px;
height:20px;
background-color:green;
border-radius:50%;
margin-top:10px;
margin-right:5px;
float:right;
background-size:contain;
background-image:url('../images/connected.png');
}

#OptionContainer .PrepaidImageButton {
    min-width: 84px;
    min-height: 84px;
    margin-bottom: 0px;
    border-bottom: solid 3px #4c4d4f;
}

.daily {
border-bottom: solid 3px aquamarine!important;
margin-bottom: 0px!important;
}

.weekly {
border-bottom: solid 3px coral!important;
margin-bottom:0px!important;
}

.monthly {
    border-bottom: solid 3px chartreuse !important;
    margin-bottom: 0px!important;
}
.abnormal {
border-bottom: solid 3px floralwhite!important;
margin-bottom:0px!important;
}


#smartProductPanel .reprintItem {
width:135px;
}
#smartProductPanel .reprintItem {
display:none!important;
}

.main-notice {
    margin: 100px auto;
    width: 95px;
    background-color: black;
    padding: 11px;
    border: solid 1px #888;
    border-radius: 5px;
    text-align: center;
}
.notice-container {
    width: 100%;
    position: fixed;
    bottom: 0px;
    display: block;
    left: 0px;
    z-index:2
}
@media only screen and (max-width : 320px) {
    body {
        zoom: 89% !important;
    }
}
#LinkToPayments a {
    text-indent: 100%;
    background-image: url(/images/paymentsicon.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 36px;
    height: 34px;
    overflow: hidden;
    margin-right: 5px;
    margin-top: 4px;
}
.FilterButton.PrepaidImageButton, .FilterButton.ProceedButton{
    width: 27%;
    min-width: 65px;
    height: auto;
    max-width: 120px;
    min-height: 65px;
    float: left;
    margin: 0.5%;
    font-size: 1em;
    margin: 3%;
}



.optionFilter
{
    display: block;
    height: 100%;
    margin-bottom: 300px;
    overflow: scroll;
z-index:1;
background-color:rgb(94 94 94);
    background-image: url(../Images/Templates/grey.png);
background-repeat:repeat;
}
.CancelButton.sticky
{position:fixed;
top:4px;
width:94%!important;}

#OptionContainer {
    margin-top: 0px!important;
	padding-top:70px;
}
.footer
{z-index:2;}
#LinkToPayments a {
 
    background-image: url(/images/paymentsicon.png?1);
display:none!important;
}

#Hide #hidebtn
{display:none!important;}

#Hide {
    height: 0px;
}

.AlwaysHide
{display:none!important;
visibility:hidden;}