body, td {
  background: #8caae6;
  font : 11px Verdana,Arial,Helvetica,sans-serif;
  margin : 2px 6px 2px 6px;
  COLOR: #224fa2; 
}

body {
    text-align: center;
}

img{
    border:0;
}

td {
    font-size : 11px;
}

th {
    font-size : 11px;
    font-weight : bold;
}

a {
    color : #647b98;
    padding : 1px;
    text-decoration : none;
}

a:hover {
    text-decoration : underline;
}

.infoheader {
    font-weight: bold;
}

#topheader { 
    BACKGROUND-COLOR: #5677a6;
    color: white;
    font : 12px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;
    TEXT-ALIGN: left; 
    BORDER-RIGHT: #414c5a 2px solid; 
    PADDING-RIGHT: 3px; 
    BORDER-TOP: orange 2px solid; 
    PADDING-LEFT: 3px; 
    LEFT: 3px; 
    FLOAT: left; 
    PADDING-BOTTOM: 1px; 
    BORDER-LEFT: #414c5a 2px solid; 
    PADDING-TOP: 6px; 
    BORDER-BOTTOM: 0px;
    POSITION: absolute; 
    TOP: 3px;  
    width: 1024px;
}



#menu {
    BORDER-RIGHT: #414c5a 2px solid; 
    PADDING-RIGHT: 6px; 
    BORDER-TOP: #414c5a 0px solid; 
    PADDING-LEFT: 6px; 
    LEFT: 3px; 
    FLOAT: left; 
    PADDING-BOTTOM: 6px; 
    BORDER-LEFT: #414c5a 2px solid; 
    WIDTH: 1194px; 
    PADDING-TOP: 6px; 
    BORDER-BOTTOM: 0px solid; 
    POSITION: absolute; 
    TOP: 30px; 
    BACKGROUND-COLOR: #d1d1d1;
    text-align: left;
}


#body {
    BORDER-RIGHT: #414c5a 2px solid; 
    PADDING-RIGHT: 6px; 
    BORDER-TOP: 0px; 
    PADDING-LEFT: 6px; 
    LEFT: 3px; 
    FLOAT:inherit; 
    PADDING-BOTTOM: 16px; 
    BORDER-LEFT: #414c5a 2px solid; 
    WIDTH: 1018px; 
    min-height:700px;
    PADDING-TOP: 6px; 
    BORDER-BOTTOM: #414c5a 2px solid; 
    POSITION: absolute; 
    TOP: 30px; 
    BACKGROUND-COLOR: #eef2fa;
    text-align: left;
}

#maintitle {
    color: #ffffff;
    font : 12px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold; 
    position:absolute;
    height: 10px;
    width: 520px;
    text-align: center;
    top: 8px;
    left: 450px;
    padding: 1px;
}

#maintitle a {
    color: white;
    text-decoration: underline;
}

#myfooter {
    color: #414c5a;
    font : 8px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold; 
    BACKGROUND-COLOR: #d1d1d1;
    position: absolute;
    height: 16px;
    width: 994px;
    TEXT-ALIGN: center;
    top: 500px;
}

#error {
    color: red;
    font : 12px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;    
    text-align: center;
    border: 0px;
}

#ont_name {
    width:450px;
    border: 2px solid;
    text-align: center;
    margin: 0 auto; 
    padding: 1px;
    margin-bottom: 5px;
}
  
.toolbar {
    BORDER-RIGHT: white 2px solid;
    BORDER-TOP: white 2px solid; 
    BORDER-LEFT: white 2px solid;
    BORDER-BOTTOM: #414c5a 2px solid;
    PADDING-RIGHT: 3px; 
    PADDING-LEFT: 3px; 
    PADDING-BOTTOM: 1px; 
    PADDING-TOP: 1px; 
    COLOR: #ffffff; 
    FONT-WEIGHT: bold; 
    MARGIN-BOTTOM: 2px; 
    BACKGROUND-COLOR: #5677a6; 
    TEXT-ALIGN: center; 
    TEXT-DECORATION: none; 
}

.toolbar:hover {
    BORDER-RIGHT: white 2px solid; 
    BORDER-TOP: white 2px solid; 
    BORDER-LEFT: white 2px solid; 
    COLOR: white; 
    BORDER-BOTTOM: #414c5a 2px solid; 
    BACKGROUND-COLOR: orange; 
    TEXT-DECORATION: underline
}

.toolbarcur {
    BORDER-RIGHT: white 2px solid; 
    BORDER-TOP: white 2px solid;
    BORDER-LEFT: white 2px solid; 
    PADDING-RIGHT: 2px; 
    PADDING-LEFT: 2px; 
    FONT-WEIGHT: bold; 
    MARGIN-BOTTOM: 2px; 
    PADDING-BOTTOM: 1px; 
    COLOR: white; 
    PADDING-TOP: 1px; 
    BORDER-BOTTOM: white 2px solid; 
    BACKGROUND-COLOR: orange; 
    TEXT-ALIGN: center; 
    TEXT-DECORATION: none; 
}

.toolbarcur:hover {
    COLOR: white; 
    BACKGROUND-COLOR: orange; 
    TEXT-DECORATION: underline
}

.pkgf {
    FONT-WEIGHT: bold;
    COLOR: green;
    TEXT-DECORATION: none; 
}

.pkga {
    FONT-WEIGHT: bold;
    COLOR: blue;
    TEXT-DECORATION: none; 
}

.pkga:hover {
    FONT-WEIGHT: bold;
    COLOR: white;
    TEXT-DECORATION: none; 
    BACKGROUND-COLOR: blue;
}

.pkgs {
    FONT-WEIGHT: bold;
    COLOR: red;
    TEXT-DECORATION: none; 
}

.pkgs:hover {
    FONT-WEIGHT: bold;
    COLOR: white;
    TEXT-DECORATION: none; 
    BACKGROUND-COLOR: red;
}

.pkgb {
    FONT-WEIGHT: bold;
    COLOR: black;
    TEXT-DECORATION: none; 
}

.pkgb:hover {
    FONT-WEIGHT: bold;
    COLOR: white;
    TEXT-DECORATION: none; 
    BACKGROUND-COLOR: black;
}

.redbold {
    FONT-WEIGHT: bold;
    COLOR: red;
    TEXT-DECORATION: none; 
}

.bluebold {
    FONT-WEIGHT: bold;
    COLOR: blue;
    TEXT-DECORATION: none; 
}

.orangebold {
    FONT-WEIGHT: bold;
    COLOR: orange;
    TEXT-DECORATION: none; 
}

.greenbold {
    FONT-WEIGHT: bold;
    COLOR: green;
    TEXT-DECORATION: none; 
}

table.error {
    border: 0px;
    background-color: #d1d1d1;
    text-align: center;
}

table.inv td {
    background-color: #d1d1d1;
    border: 0px;
}

table.ont {
    border: 3px solid #224fa2;
    border-bottom : 8px solid #224fa2;
    background-color: white;
    table-layout: fixed;
    /*width: 470px;*/
}

table.ont th {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    border-bottom : 1px solid white;
    background-color: #224fa2;
    width: 32px; 
    color: white;
}

table.ont td {
    text-align: center;
    background-color: #224fa2;
    border: none;
    height: 15px;
}

table.ont td.pwr-off {
    text-align: center;
    background-color: red;
    border: 5px solid #224fa2;
}

table.ont td.pwr-on {
    text-align: center;
    background-color: #4bcd17;
    border: 5px solid #224fa2;
}

table.ont td.pwr-na {
    text-align: center;
    background-color: #d3d5da;
    border: 5px solid #224fa2;
}

table.ont td.lan-inv {
    text-align: center;
    background-color: red;
    border: 6px solid #224fa2;
}

table.ont td.lan-off {
    text-align: center;
    background-color: #d3d5da;
    border: 6px solid #224fa2;
}

table.ont td.lan-on {
    text-align: center;
    background-color: #4bcd17;
    border: 6px solid #224fa2;
}

table.ont td.lanp-inv {
    text-align: center;
    background-color: red;
    border: 6px solid #4bcd17;
}

table.ont td.lanp-off {
    text-align: center;
    background-color: #d3d5da;
    border: 6px solid #4bcd17;
}

table.ont td.lanp-on {
    text-align: center;
    background-color: green;
    border: 6px solid #4bcd17;
}

table.ont td.tel-off {
    text-align: center;
    background-color: #d3d5da;
    border: 8px solid #224fa2;
}

table.ont td.tel-on {
    text-align: center;
    background-color: #d3d5da;
    border: 8px solid #4bcd17;
}

table.ont td.tel-call {
    text-align: center;
    background-color: green;
    border: 8px solid #4bcd17;
}

table.bg {
    border: 0px;
}

table.bg td {
    background-color: #eef2fa;
}


table.gpon {
    border-left: 2px solid #8caae6;
    border-top: 2px solid #8caae6;
    border-bottom: 4px solid #8caae6;
    border-right: 4px solid #8caae6;
    background-color: white;
}

table.gpon th {
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid #414c5a;
    background-color: #224fa2;
    color : white;
}

table.gpon td {
    background-color : white;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #C4E1FF;
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
}


table.gpon th.cc {
    vertical-align: middle;
    text-align: center;  
}

table.gpon th.ccred {
    vertical-align: middle;
    text-align: center;
    background-color: red;
}

table.gpon th.ccgreen {
    vertical-align: middle;
    text-align: center;
    background-color: green;
}

table.gpon th.ccorange {
    vertical-align: middle;
    text-align: center;
    background-color: orange;
}


table.gpon td.b {
    font-weight: bold;
}

table.gpon td.b_r {
    font-weight: bold;
    text-align:right;
}

table.gpon td.b_l {
    font-weight: bold;
    text-align:left;
}

table.gpon td.b_c {
    font-weight: bold;
    text-align:center;
}

.headertable {
    border : 1px solid #000000;
    background-color : #647b98;
}

.BB {
    /* Button Class*/
    COLOR: #FFFFFF;
    CURSOR: Hand;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 8pt;
    FONT-WEIGHT: bold;
    TEXT-ALIGN: center;
    Vertical-align: top;
    background: #4c70e4;
}

.YES {
    COLOR: #FFFFFF;
    CURSOR: Hand;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 8pt;
    FONT-WEIGHT: bold;
    TEXT-ALIGN: center;
    Vertical-align: top;
    background: green;
}

.NO {
    COLOR: #FFFFFF;
    CURSOR: Hand;
    FONT-FAMILY: Verdana, Arial, Helvetica;
    FONT-SIZE: 8pt;
    FONT-WEIGHT: bold;
    TEXT-ALIGN: center;
    Vertical-align: top;
    background: red;
}

table.faktura td  {
    font : 13px "Times New Roman", "Times", "serif" ;
}

.txtred {
    color: red;
    font : 12px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;    
}

.date {
    color: green;
    font-weight: bold;    
}

.item_code {
    color: blue;
    font-weight: bold;    
}

.item_url {
    color: white;
    font-weight: bold;
    background: blue;    
}

.item_price {
    color: red;
    font-weight: bold;    
}

.item_unkcust {
    color: green;
    font-weight: bold;
}

.cash {
    color: blue;
    font-weight: bold;
}

.bank {
    color: red;
    font-weight: bold;     
}

.card {
    color: green;
    font-weight: bold;     
}

.cust_name {
    color: black;
    font : 12px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;    
}


.error {
    color: red;
    font : 12px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;    
}

.txtheader {
    color: #414c5a;
    font : 14px Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;    
}

.clock {
    color: orange;
}

#pagesbar {
    padding: 0px 0px 8px 0px;
    font-weight : bold;
    text-decoration : none;
}

#pagesbar a {
    color: black;
    background-color: #e0e0e0;
    padding: 3px;
    border: 1px solid black;
    line-height: 25px;
}

#pagesbar a:hover {
    background-color: #ffc;
    text-decoration : underline;
}

#pagesbar b {
    color: silver;
    background-color: #e0e0e0;
    padding: 3px;
    border: 1px solid black;
    line-height: 25px;
}

#pagesbar i {
    color: white;
    background-color: #909090;
    font-style : normal;
    padding: 3px;
    border: 1px solid black;
    line-height: 25px;
}

.showmeright {
    display:block;
    float:right;
    margin-left:10px;
}

  input:required:invalid, input:focus:invalid {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
    background-position: right top;
    background-repeat: no-repeat;
    -moz-box-shadow: none;
  }
  input:required:valid {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
    background-position: right top;
    background-repeat: no-repeat;
  }


#login {
    width: 250px;
    
    border-left: 2px solid #8caae6;
    border-top: 2px solid #8caae6;
    border-bottom: 4px solid #8caae6;
    border-right: 4px solid #8caae6;
    
    margin-left: auto ;
    margin-right: auto ;  
    background-color: white;
    font-weight: bold;   
    text-align: center; 
    padding-bottom: 4px;   
}

.login1 {
    font-weight: bold;
    font-size: 12px;
    padding: 2px;               
    margin: 2px;
    border-top: 2px solid black;
    
    border-bottom: 1px solid #414c5a;
    background-color: #224fa2;
    color : white;    
}

.login2_container {

}

.login3 {
    width: 40%;
    margin: 0px auto;
    display: inline-block;
    text-align: left;
    padding: 2px;
    margin: 4px;
}