@charset "utf-8";
/*@font-face{ 
    font-family: 'Axiata Medium'; 
    src: url('font/axiata_medium/axiata_medium-webfont.eot'); 
    src: url('font/axiata_medium/axiata_medium-webfont.eot?#iefix') format('embedded-opentype'), 
         url('font/axiata_medium/axiata_medium-webfont.woff') format('woff'), 
         url('font/axiata_medium/axiata_medium-webfont.ttf') format('truetype'), 
         url('font/axiata_medium/axiata_medium-webfontt.svg#webfont') format('svg'); 
}*/

body {
    margin: 0;
    padding: 0;
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 14px;
    color: #333;
    background-color: #fff;
}

a {
    color: #0134c5;
    background-color: transparent;
    text-decoration: none;
    font-weight: normal;
    outline-style: none;
}
a:visited {
    color: #0134c5;
    background-color: transparent;
    text-decoration: none;
    outline-style: none;
}
a:hover {
    color: #000;
    text-decoration: none;
    background-color: transparent;
    outline-style: none;
}

#breadcrumb {
    float: left;
    background-color: transparent;
    margin: 10px 0 0 42px;
    padding: 0;
    font-size: 10px;
    color: #666;
}
#breadcrumb_right {
    float: right;
    width: 175px;
    background-color: transparent;
    padding: 8px 8px 3px 0;
    text-align: right;
    font-size: 10px;
    color: #666;
}

#masthead {
    margin: 0 40px 0 35px;
    padding: 0 0 0 6px;
    border-bottom: 1px solid #999;
}

#masthead h1 {
    background-color: transparent;
    color: #e13300;
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 0 0 6px 0;
}

#searchbox {
    background-color: transparent;
    padding: 6px 40px 0 0;
    text-align: right;
    font-size: 10px;
    color: #666;
}

#img_welcome {
    border-bottom: 1px solid #D0D0D0;
    margin: 0 40px 0 40px;
    padding: 0;
    text-align: center;
}

#content {
    margin: 20px 40px 0 40px;
    padding: 0;
}

#content p {
    margin: 12px 20px 12px 0;
}

#content h1 {
    color: #e13300;
    border-bottom: 1px solid #666;
    background-color: transparent;
    font-weight: normal;
    font-size: 24px;
    margin: 0 0 20px 0;
    padding: 3px 0 7px 3px;
}

#content h2 {
    background-color: transparent;
    border-bottom: 1px solid #999;
    color: #000;
    font-size: 18px;
    font-weight: bold;
    margin: 28px 0 16px 0;
    padding: 5px 0 6px 0;
}

#content h3 {
    background-color: transparent;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    margin: 16px 0 15px 0;
    padding: 0 0 0 0;
}

#content h4 {
    background-color: transparent;
    color: #444;
    font-size: 14px;
    font-weight: bold;
    margin: 22px 0 0 0;
    padding: 0 0 0 0;
}

#content img {
    margin: auto;
    padding: 0;
}

#content code {
    font-family: "Axiata Medium",Monaco, Verdana, Sans-serif;
    font-size: 12px;
    background-color: #f9f9f9;
    border: 1px solid #D0D0D0;
    color: #002166;
    display: block;
    margin: 14px 0 14px 0;
    padding: 12px 10px 12px 10px;
}

#content pre {
    font-family: "Axiata Medium",Monaco, Verdana, Sans-serif;
    font-size: 12px;
    background-color: #f9f9f9;
    border: 1px solid #D0D0D0;
    color: #002166;
    display: block;
    margin: 14px 0 14px 0;
    padding: 12px 10px 12px 10px;
}

#content .path {
    background-color: #EBF3EC;
    border: 1px solid #99BC99;
    color: #005702;
    text-align: center;
    margin: 0 0 14px 0;
    padding: 5px 10px 5px 8px;
}

#content dfn {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    color: #00620C;
    font-weight: bold;
    font-style: normal;
}
#content var {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    color: #8F5B00;
    font-weight: bold;
    font-style: normal;
}
#content samp {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    color: #480091;
    font-weight: bold;
    font-style: normal;
}
#content kbd {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    color: #A70000;
    font-weight: bold;
    font-style: normal;
}

#content ul {
    /*list-style-image: url(images/arrow.gif);*/
    margin: 10px 0 12px 0;
}

li.reactor {
    list-style-image: url(images/reactor-bullet.png);
}
#content li {
    margin-bottom: 9px;
}

#content li p {
    margin-left: 0;
    margin-right: 0;
}

#content .tableborder {
    border: 1px solid #999;
}
#content th {
    font-weight: bold;
    text-align: left;
    font-size: 12px;
    background-color: /*#666*/#ED1C24;
    color: #fff;
    padding: 4px;
}

#content .td {
    font-weight: normal;
    font-size: 12px;
    padding: 6px;
    background-color: #f3f3f3;
}

#content .tdpackage {
    font-weight: normal;
    font-size: 12px;
}

#content .important {
    background: #FBE6F2;
    border: 1px solid #D893A1;
    color: #333;
    margin: 10px 0 5px 0;
    padding: 10px;
}

#content .important p {
    margin: 6px 0 8px 0;
    padding: 0;
}

#content .important .leftpad {
    margin: 6px 0 8px 0;
    padding-left: 20px;
}

#content .critical {
    background: #FBE6F2;
    border: 1px solid #E68F8F;
    color: #333;
    margin: 10px 0 5px 0;
    padding: 10px;
}

#content .critical p {
    margin: 5px 0 6px 0;
    padding: 0;
}


#footer {
    background-color: transparent;
    font-size: 10px;
    padding: 16px 0 15px 0;
    /*margin: 20px 0 0 0;*/
    text-align: center;
}

#footer p {
    font-size: 10px;
    color: #999;
    text-align: center;
}
#footer address {
    font-style: normal;
}

.center {
    text-align: center;
}

img {
    padding:0;
    border: 0;
    margin: 0;
}

.nopad {
    padding:0;
    border: 0;
    margin: 0;
}


form {
    margin: 0;
    padding: 0;
}

.input {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 11px;
    color: #333;
    border: 1px solid #B3B4BD;
    width: 250px;
    font-size: 11px;
    height: 1.5em;
    line-height: 1.5em;
    padding: 0;
    margin: 0;
}

.textarea {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 14px;
    color: #143270;
    background-color: #f9f9f9;
    border: 1px solid #B3B4BD;
    width: 100%;
    padding: 6px;
    margin: 0;
}

.select {
    background-color: #fff;
    font-size:  11px;
    font-weight: normal;
    color: #333;
    padding: 0;
    margin: 0 0 3px 0;
}

.checkbox {
    background-color: transparent;
    padding: 0;
    border: 0;
}

.submit {
    background-color: #000000;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 10px;
    font-weight: normal;
    height: 22px;
    line-height: 22px;
    margin: 0 0 1px;
    padding: 1px 5px 3px;
    width: auto;
}

.submit:hover {
    background-color: #99BC99;
    color:#000;
}

.forms .input-long {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 11px;
    color: #333;
    border: 1px solid #B3B4BD;
    width: 400px;
    font-size: 11px;
    height: 25px;
    line-height: 25px;
    padding: 0;
    margin: 0;
}

.forms .input-long {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 11px;
    color: #333;
    border: 1px solid #B3B4BD;
    width: 300px;
    font-size: 11px;
    height: 25px;
    line-height: 25px;
    padding: 0;
    margin: 0;
}

.forms .textarea {
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 11px;
    color: #143270;
    background-color: #f9f9f9;
    border: 1px solid #B3B4BD;
    width: 290px;
    height: 100px;
    padding: 6px;
    margin: 0;
}

.forms label{
    font-weight: bold;
}

.select-right{
    padding:5px;
    margin: 0px 5px 0px 5px;
    float: right;
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 13px;
}

.pagination {
    list-style-type: none;
    display: block;
}
.pagination li {
    display: inline;
}

.pagination > .active > a, .pagination > .active > a:hover {
    background-color: #ED1C24;
    border-color: #ED1C24;
    color:#fff;
}

.pagination a,.pagination strong{
    position: relative;
    float: left;
    /*background: #EAEAEA;*/
    padding: 6px 12px;
    font-size: 15px;
    border: 1px solid #ddd;
    /*margin-left: -1px;*/
}

.pagination strong{
    background: #cccccc;
    padding: 3px 5px;
    font-weight: normal;
}

.pagination a:hover{
    background: #CCCCCC;
}

.loading
{
    background: url('images/small-loading.gif') no-repeat;
    height:15px;
    padding-left:25px;
    padding-top:1px;
    display: none;
    float: right;
}

label{
    font-weight: bold;
}

span.small-text{
    font-size: 10px;
    font-weight: bold;
    color: red;
}

.parent a, a.parent {
    background: none repeat scroll 0 0 #ED1C24;
    border: medium none;
    clear: both;
    color: #FFFFFF;
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: auto;
    line-height: 25px;
    margin-bottom: 20px;
    margin-top: 5px;
    margin-left:auto;
    margin-right: auto;
    max-width: 450px;
    min-width: 400px;
    padding: 20px 10px;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    word-wrap: break-word;
    width:auto;
    box-shadow: 0 0 3px red;
}

.parent a:hover{
    color:black;
}

/** menu **/
.box {
    background-color: #666666;
    box-shadow: 0 0 1px #666666;
    height: 55px;
    left: 0;
    margin-top: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    -moz-box-shadow:0px 0px 10px #aaa;
    -webkit-box-shadow:0px 0px 10px #aaa;
    box-shadow:0px 0px 10px #aaa;
    z-index: 1;
}

ul.ldd_menu{
    width: 1024px;
    margin:0px;
    padding:0;
    display:block;
    height:50px;
    background-color:#666666;
    list-style:none;
    font-family:"Axiata Medium","Trebuchet MS", sans-serif;
    border-left:10px solid #666666;
    -moz-box-shadow:0px 3px 4px #666666;
    -webkit-box-shadow:0px 3px 4px #666666;
    box-shadow:0px 3px 4px #666666;
}
ul.ldd_menu a{
    text-decoration:none;
}
ul.ldd_menu > li{
    float:left;
    position:relative;
}
ul.ldd_menu > li > span{
    float:left;
    color:#fff;
    background-color:#666666;
    height:50px;
    line-height:50px;
    cursor:default;
    padding:0px 40px;
    text-shadow:0px 0px 1px #fff;
    border-left:1px solid #cccccc;
}
ul.ldd_menu > li > span > a{
    color:#fff;
    font-size: 14px;
}
ul.ldd_menu > li > span > a:hover{
    color:#000;
}

ul.ldd_menu  li  span.selected{
    background-color: #99BC99;
    color: #000000;
}

ul.ldd_menu .ldd_submenu{
    position:absolute;
    top:50px;
    width:635px;
    display:none;
    opacity:0.95;
    left:0px;
    font-size:10px;
    background: #666666;
    z-index: 999;
    -moz-box-shadow:0px 3px 4px #666666;
    -webkit-box-shadow:0px 3px 4px #666666;
    box-shadow:0px 3px 4px #666666;
}
a.ldd_subfoot{
    background-color:#f0f0f0;
    color:#444;
    display:block;
    clear:both;
    padding:15px 20px;
    text-transform:uppercase;
    font-family: "Axiata Medium",Arial, serif;
    font-size:12px;
    text-shadow:0px 0px 1px #fff;
    -moz-box-shadow:0px 0px 2px #777 inset;
    -webkit-box-shadow:0px 0px 2px #777 inset;
    -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
    list-style:none;
    float:left;
    border-left:1px solid #666666;
    margin:20px 0px 10px 30px;
    padding:10px;
}
li.ldd_heading{
    font-family: "Axiata Medium",Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color:#EAEAEA;
    text-shadow:0px 0px 1px #B03E23;
    padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
    font-family: "Axiata Medium",Arial, serif;
    font-size:10px;
    line-height:20px;
    color:#fff;
    padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
    -moz-box-shadow:0px 0px 2px #333;
    -webkit-box-shadow:0px 0px 2px #333;
    box-shadow:0px 0px 2px #333;
    background:#99BC99;
    color:#000000;
}

.ldd_submenu_row {
    display: block;
    clear: left;
}
/** menu ends **/
#content{
    margin-top: -50px
}

#content .tableborder td {
    background-color: #F3F3F3;
    font-size: 12px;
    font-weight: normal;
    padding: 6px;
}
.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover {

}

#content .tableborder td.tokenStyle{
    font-size:54px;
    text-align: center;
    color: #ED1C24;
    font-weight:bold;
}

#content .tableborder td.tokenStyle.off,#content .tableborder td.tokenStyle.counterCode.off{
    opacity: 0.3
}

#content .tableborder td.tokenStyle.counterCode{
    color:/*#ED1C24*/#000;
    border-right: 2px solid #ED1C24
}

#content .tableborder td.waitingStyle{
    font-size:35px;
    font-weight:bold;
}

.bigbutton {
    background: none repeat scroll 0 0 #ED1C24;
    border: 1px solid #e13300;
    box-shadow: 0 0 3px red;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: "Axiata Medium",arial;
    font-size: 25px;
    font-style: normal;
    font-weight: bold;
    height: auto;
    line-height: 38px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    text-indent: 0;
    text-shadow: 1px 1px 0 #FFFFFF;
    white-space: normal;
    width: 160px;
    vertical-align: middle;
}

a.bigbutton{
    line-height: 32px;
    vertical-align: middle;
}
.bigbutton:hover {
    background: repeat scroll 0 0 #9d261d;
    color:#fff;
}
.bigbutton:active {
    position: relative;
    top: 1px;
    color:#fff;
}
.bigbutton:visited{
    color:#fff;
}

#keypadrow{
    clear:both;
    width: 100%;
    display: block;
}

#keypadrow .keys.green {
    -moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811));
    background:-moz-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background:-webkit-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background:-o-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background:-ms-linear-gradient(top, #77d42a 5%, #5cb811 100%);
    background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811',GradientType=0);
    background-color:#77d42a;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #268a16;
    display:inline-block;
    cursor:pointer;
    color:#FFFFFF;
    font-family:"Axiata Medium",Verdana;
    font-size:25px;
    padding:25px;
    margin: 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #aade7c;
}
#keypadrow .keys.green:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a));
    background:-moz-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background:-webkit-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background:-o-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background:-ms-linear-gradient(top, #5cb811 5%, #77d42a 100%);
    background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a',GradientType=0);
    background-color:#5cb811;
}
#keypadrow .keys.green:active {
    position:relative;
    top:1px;
}

#keypadrow .keys.red{
    padding:25px;
    font-size: 25px;
}

#keypadrow .keys {
    -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
    box-shadow:inset 0px 1px 0px 0px #f5978e;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
    background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
    background-color:#f24537;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #d02718;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Axiata Medium",Verdana;
    font-size:40px;
    padding:25px 40px;
    margin: 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #810e05;
}
#keypadrow .keys:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
    background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
    background-color:#c62d1f;
}
#keypadrow .keys:active {
    position:relative;
    top:1px;
}

.button-medium{
    -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
    box-shadow:inset 0px 1px 0px 0px #f5978e;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
    background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
    background-color:#f24537;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #d02718;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Axiata Medium",Verdana;
    font-size:20px;
    padding:5px 25px;
    text-decoration:none;
    text-shadow:0px 1px 0px #854629;
    margin-bottom: 5px;
}

.button-medium:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
    background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
    background-color:#c62d1f;
}
.button-medium:active {
    position:relative;
    top:1px;
}

a.button-medium,a.button-medium:hover{
    text-decoration: none;
    color:white;
}

.tokenInput{
    border: 1px solid #B3B4BD;
    color: #333333;
    font-family: "Axiata Medium",Lucida Grande,Verdana,Geneva,Sans-serif;
    font-size: 25px;
    height: 1.5em;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    width: 280px;
}

a.button, a.button:hover,a.button:visited,a.button:active{
    color:#fff;
    height:auto;
}

.button-xs {
    padding: 2px 5px !important;
    border-radius: 0px !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
    #content{
        margin-top: 0px
    }
}

.mobilePrefix{
    width: auto;
    margin-right: -20px;
    margin-left: 25px;
    font-size: 30px;
    vertical-align: top;
}

.mb{
    font-size:20px;
    padding: 0;
    vertical-align: middle
}

.text-scroller marquee{
    background-color:#ED1C24;
    border-bottom: none;
    font-weight: normal;
    font-family: "Axiata Medium",Verdana;
    font-size: 30px;
    color:white;
    margin:10px 0 0 0;
    padding:0 0 3px;
    line-height: 40px;
    text-shadow: 1px 2px #f24537;
    margin:2px 0 0 0;
    width:100%;
    bottom: 0
}

.tokenTableDivLeft{
    float:left;
    width: 50%;
    border: 0px solid black;
}
.tokenTableDivRight{
    float:right;
    width: 50%;
    border: 0px solid black
}

#content th.thbig{
    color: #ED1C24;
    font-size: 25px;
    text-align: center
}

#content .tableborder .vduTokenTable{
    border-collapse:separate
}

.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
    -webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
    box-shadow:inset 0px 1px 0px 0px #f5978e;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
    background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
    background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f',GradientType=0);
    background-color:#f24537;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #d02718;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:"Axiata Medium",Verdana;
    font-size:12px;
    font-weight:bold;
    padding:5px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #810e05;
    margin-bottom: 5px;
}
.button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
    background:-moz-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-webkit-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-o-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:-ms-linear-gradient(top, #c62d1f 5%, #f24537 100%);
    background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537',GradientType=0);
    background-color:#c62d1f;
}
.button:active {
    position:relative;
    top:1px;
}

a.button,a.button:hover{
    text-decoration: none;
    color:#ffffff;
}

input, textarea, .uneditable-input {
    width: auto;
}
textarea {
    height: auto;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline: 0 none;
}

.vduTokenTable {
    border: 0px solid #ffffff !important;
    border-collapse: collapse !important;
}

.vduTokenTable .thbig{
    background: #ffffff !important;
    border-bottom: 2px solid #ED1C24 !important;
    border-top: 2px solid #ED1C24 !important;
}
.vduTokenTable tbody tr:nth-child(odd){
    background-color: #FFFFFF !important;
    color:white !important;
}

.vduTokenTable tbody tr:nth-child(even){
    background-color: #F9E3D4 !important;
    color:white !important;
}
.vduTokenTable td{
    background: none !important;
    padding:0px !important;
}

.waitingListLabel{
    background: none repeat scroll 0 0 #58BB47;
    border-top: 2px solid #fff;
    border-bottom: 1px solid #fff;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: bold;
    padding: 0 10px;
    width: 100px;
    text-align: center;
}
.vduWaitingList{
    display: table;
    width: 100%;
    margin: 2px 0 0 0
}
.vduWaitingListTable{
    border: 0px solid #ffffff;
    padding: 0px;
    margin: 0px;
    width: 100%;
    border-collapse: collapse
}
.waitingListDataDiv{
    border: 0px solid white;
    border-collapse: collapse;
    width: 100%
}
.waitingListDataDiv td{
    font-size: 30px;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px
}
.waitingListDataDiv tr:last-child td{
    border-bottom: 0px solid white
}
.waitingListDataDiv td:nth-child(even){
    background-color: #F9E3D4
}
.waitingListDataDiv td:nth-child(odd){
    background-color: #FEEDCC
}

#footer-vdu{
    margin:0px;
    padding:0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#templateHeader{
    min-height: 10px
}

.badge {
    background:red;
    color:white;
    border-radius: 4px;
    padding:2px 4px;
    margin:2px 4px;
    font-weight: bold;
    font-size: 10px;
    display: inline-block
}
.text-pull-right{
    text-align: right;
}

.colorPanel {
    padding:5px;
    color:white;
    font-size: 10px;
    font-weight: bold;
    max-width: 80px;
    text-align: left;
    border-bottom: 1px dotted white
}
.slideShowNextBtn,.slideShowPrevBtn{
    height:50px;
    background: blue;
    margin-top: 10px;
    margin-bottom: 10px;
    padding:5px;
    color:white;
    font-size: 10px;
    font-weight: bold;
    max-width: 80px;
    text-align: left;
}

.one-third{
    width:32%;
    float:left;
    display:table;
    padding:5px
}
.one-half{
    width:47%;
    float:left;
    display:table;
    padding:5px;
    height:360px
}
.full-size{
    width:90%;
    float:left;
    display:table;
    padding:5px;
    height:700px
}
.full-width{
    width:100%;
    float:left;
    display:table;
    padding:5px;
}

.containermodal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    opacity: 0.8;
    background: #000000
        url('images/flyingdots.gif')
        50% 50%
        no-repeat;
}

.modal {
    display:    none;
    position:   fixed;
    z-index:    100;
    overflow-y: auto;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba(0, 0, 0, 0.8)
        50% 50%
        no-repeat;
}

.modal-content {
    background-color: #fefefe;
    position: relative;
    margin: 5% auto;
    border: 1px solid #888;
    overflow: auto;
    opacity: 1;
    width: 80%;
}

.modal-header {
    padding: 2px 10px;
    /*border-bottom: 1px solid #999;*/
}

.modal-body {
    padding: 2px 10px
}

.modal-footer {
    padding: 2px 10px;
    /*border-top: 1px solid #999;*/
}

.containermodal .processing {
    margin-top:20%;
    width: 100%;
    text-align: center;
    color:white;
    vertical-align: middle;
    font-size:25px
}
.ui-autocomplete-loading {
    background: white url('jquery/images/ui-anim_basic_16x16.gif') right center no-repeat;
}

/** feedback **/
.feebackGrid{
    text-align: center
}
a.feedbackOption{
    background-color: red;
    padding: 10px 15px;
    display: block;
    max-width: 100%;
    word-wrap: break-word;
    margin:20px 5px;
    color:white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
}

.feedbackDiv{
    margin: 0 auto;
    width: 100%;
    display: table
}

a.feedbackOption:hover, a.feedbackOption:active,a.feedbackOption:visited{
    background: #red
}

a.feedbackSave, a.feedbackBack{
    background-color: #29BE29;
    padding: 10px;
    display: inline-block;
    width: 100%;
    height: auto;
    word-wrap: break-word;
    /*margin: 20px 5px;*/
    color: white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
}

a.feedbackSave{
    float:left
}
a.feedbackBack{
    float: left
}

@media(max-width:767px) {
    .feedbackTopLogo {
        width : 110px !important;
    }

    .feedbackHeaderText {
        font-size: 0.9em !important;
    }

    .tokenSelector {
        font-size: 1.1em !important;
    }

    #content.feedback {
        margin-left : 5px;
        margin-right: 5px;
    }

    #int-box a {
        font-size : 1.0em !important;
    }

    #int-box, #ext-box {
        height: 80px !important;
    }

    a.feedbackSmiley.previousPage{
        padding: 0px;
    }
}

.tokenSelector{
    width: 100px;
    font-size: 20px;
    margin-bottom: 20px;
    padding:10px 5px;
    box-shadow: 0px 5px 5px #ccc;
    border: 1px solid #ccc
}
.tokenSelector.tokenNumber {
    width: 100%;
    text-align: center;
    display:table;
    margin-bottom: 5px;
    font-weight: bold
}
a.feedbackSmiley{
    background-color: red;
    padding: 10px 5px 5px 5px;
    display: table;
    width: 100%;
    height: auto;
    word-wrap: break-word;
    /*margin: 20px 5px;*/
    color:white;
    font-size: 25px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
}

a.feedbackSmiley:hover, a.feedbackSmiley:active,a.feedbackSmiley:visited{
    background: #red
}

a.feedbackSmiley img{
    vertical-align: middle;
    width:80px
}

.feedbackSmiley{
    background-color: red;
    padding: 10px 5px 5px 5px;
    display: table;
    width: 100%;
    height: auto;
    word-wrap: break-word;
    margin: 20px 0px;
    color:white;
    font-size: 18px;
    font-weight: bold;
    box-shadow: -5px 5px 5px #ccc;
    cursor: pointer;
}
.feedbackSmiley .feedbacktext {
    min-width: 49%;
    float:left;
    text-align: right;
    margin-right: 10px
}
.feedbackSmiley .feedbackimage {
    width: auto;
    float:left;
    text-align: left
}
.feedbacktext span.text{
    float:right
}

.message-box {
    display: none;
    width: 100%;
    background: /*rgba(22,52,68,0.7);*/red;
    height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    font-family: helvetica neue, arial;
    position: absolute;
    bottom: 0;
    left:0px;
    right: 0px;
    line-height: 50px;
    opacity: 0.9;
}

.customerHistory{
    position: absolute;
    width: 100%;
    top: -10px;
    left: 10px;
    background-color: white;
    border-color: #e2d5f0;
    z-index: 100;
    box-shadow: -2px 3px 3px 1px;
}

.customerHistory span.close{
    position: absolute;
    top : -12px;
    right: -12px;
    float:right;
    width: auto;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 2px;
    padding: 3px 5px;
    color:white;
    background: black;
    border-radius: 50%;
    border: 2px solid white;
}

span.customerHistoryShow {
    cursor: pointer;
    float: right;
}

input.error{
    border: 1px solid red;
}

input[readonly],
input[disabled] {
    background-color: #eeeeee;
    opacity: 1;
}

.containermodal {
    display:    none;
    position:   fixed;
    z-index:    9999;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    opacity: 0.8;
    background: #000000
        /*url('bootstrap/images/flyingdots.gif') 
        50% 50% 
        no-repeat*/;
}

.spinner {
    position: relative;
    display: inline-block;
    margin: 25px auto;
    width: 40px;
    height: 40px;
    border: 1.5px solid #d9d9d9;
    border-top-color: #2b579a;
    z-index: 1051;
    border-radius: 50%;
    -ms-border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    animation-delay: 0s;
    -ms-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-direction: normal;
    -ms-animation-direction: normal;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    animation-duration: 1.3s;
    -ms-animation-duration: 1.3s;
    -webkit-animation-duration: 1.3s;
    -moz-animation-duration: 1.3s;
    animation-fill-mode: none;
    -ms-animation-fill-mode: none;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: none;
    animation-name: ms-Spinner-spin;
    -ms-animation-name: ms-Spinner-spin;
    -webkit-animation-name: ms-Spinner-spin;
    -moz-animation-name: ms-Spinner-spin;
    animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.53,.21,.29,.67);
    -ms-animation-timing-function: cubic-bezier(.53,.21,.29,.67);
    -webkit-animation-timing-function: cubic-bezier(.53,.21,.29,.67);
    -moz-animation-timing-function: cubic-bezier(.53,.21,.29,.67);
    animation-name: spin;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.containermodal .spinner{
    margin: 0 auto;
    left: 50%;
    top: 50%;
    border: 2.5px solid white;
    border-top-color: green;
}

.pull-right{
    float:right !important;
}
.tableborder {
    margin-bottom: 5px;
}

.dropdown {
    position: relative;
    display: inline-block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}

.dropdown > a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    background-color: white;
    border: 1px solid #ccc;
    padding: 6px 20px 6px 10px;
    border-radius: 4px;
    display: inline-block;
    color: black;
    text-decoration: none;
}

.dropdown > a:before, .dropdown > button:before {
    position: absolute;
    right: 7px;
    top: 12px;
    content: ' ';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
}

.dropdown input[type=checkbox] {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0px;
    opacity: 0;
}

.dropdown input[type=checkbox]:checked {
    position: fixed;
    z-index:+0;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.dropdown ul {
    position: absolute;
    top: 18px;
    border: 1px solid #ccc;
    border-radius: 3px;
    right: 0px;
    list-style: none;
    padding: 4px 0px;
    display: none;
    background-color: white;
    box-shadow: 0 3px 6px rgba(0,0,0,.175);
    z-index: 99;
}

.dropdown input[type=checkbox]:checked + ul {
    display: block;
}

.dropdown ul li {
    display: block;
    white-space: nowrap;
    min-width: 100px;
}

.dropdown ul li:hover {
    background-color: #F5F5F5;
    cursor: pointer;
}

.dropdown ul li a {
    text-decoration: none;
    padding: 6px 20px;
    display: block;
    color: black
}

.dropdown .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
    font-size: 1px;
    padding: 0;
}

.dropdown > button {
    padding: 6px 20px 6px 10px;
    display: inline-block;
    text-decoration: none;
}

.ordersearch {
    display: table;
    margin-bottom: 3px;
    width: 98%;
}
.ordersearch td{
    padding: 6px;
    font-weight: normal;
    font-size: 12px;
    display: table-cell;
    vertical-align: inherit;
}
.ordersearch tr {
    display: table-row;
    vertical-align: inherit;
}

.input-xs{
    width: 50px !important;
}

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content{
    overflow-y: scroll;
}

.ui-menu .ui-menu-item a{
    font-size: 13px;
}
form .ng-invalid-required {
    border: 1px solid #ED1C24;
}
.sales_table tr:nth-child(even) td {
    background-color: #f9f9f9 !important;
}
.product_table td{
    font-size: 11px !important;
    padding: 4px !important;
}

.product_table tr:nth-child(even) td {
    background-color: #f9f9f9 !important;
}


.fc_table {
    border: 1px solid #999;
}
.fc_table td {
    font-size: 12px;
    font-weight: normal;
    padding: 6px;
}

.fc_table tr:nth-child(even) td {
    background-color: #f9f9f9;
}
.fc_table tr:nth-child(odd) td {
    background-color: #F3F3F3;
}

tr.bg-total td{
    background: #dcd4d4 !important;
}

.bold{
    font-weight: bold !important;
}

.row{
    display: table;
    clear:both;
    width: 100%;
}

.text-right{
    text-align: right !important;
}

.text_left {
    text-align: left !important;
}
.mr_5{
    margin-right: 5px;
}
.no_margin{
    margin: 0 !important;
}
.ml_15{
    margin-left: 15px !important;
}
.text-center{
    text-align: center !important;
}
.display_inline{
    display: inline !important;
}
.inline_block{
    display: inline-block !important;
}
.padding_10{
    padding: 10px !important;
}
.mt_5{
    margin-top: 5px !important;
}
.mb_5{
    margin-bottom: 5px !important;
}
.custom_form_control{
    font-family: "Axiata Medium",Lucida Grande, Verdana, Geneva, Sans-serif;
    font-size: 15px !important;
    color: #333;
    border: 1px solid #B3B4BD;
    min-width: 300px;
    height: 25px;
    line-height: 25px;
    padding: 3px 10px 3px 10px;
    margin: 0;
}
.font_size_15{
    font-size: 15px;
}
.width_20px{
    width: 20px !important;
}
.width100{
    width: 100% !important;
}
.width98{
    width: 98% !important;
}
#approvalModal .modal-content{
    width: 35% !important;
}
#approvalModal table tbody tr td:first-child{
    width: 35% !important;
}
#approvalModal table tbody tr td{
    width: 65% !important;
}
.font_size_16{
    font-size: 16px;
}
.sim_icon{
    max-width: 15px;
}
.icon_div{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f9dee3;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper{
    text-align: center;
    justify-content: center;
    display: flex;
}
.wrapper .content{
    margin: 0px 0px 0px 30px;
    text-align: left;
}
div.wrapper div.content p{
    margin: 0px !important;
}
div.wrapper div.content p:last-child{
    margin-top: 5px !important;
}