body {
        /*margin: 0px 0px 0px 0px;
        background-color : #FFFFFF ;
        color : #000000;*/
        /*background: url('../templates/gfx/BG.jpg') no-repeat center center fixed;
        background-size: cover;*/
}

.sidemenu {
        background-color : #123b6e;
}

td,tr,p,div {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #333333;
}

a:link, a:visited {
        font-size: 10px; color: #000000; text-decoration: none;
        font-family:  Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

a:hover {
        color: #FF7A00; text-decoration: none;
}

a.mainlevel:link, a.mainlevel:visited {
        display: block;
        background: url('../../templates/gfx/menu_bg.png') no-repeat;
        vertical-align: middle;
        font-size: 10px;
        font-weight: bold;
        color: #ffffff;
        text-align: left;
        padding-top: 5px;
        padding-left: 5px;
        height: 20px !important;
        height: 25px;
        width: 100%;
        text-decoration: none;
}

a.mainlevel:hover {
        background-position: 0px -25px;
        text-decoration: none;
        color: #333333;
}

.small {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: Black;
        text-decoration: none;
        font-weight: normal;
}

table.menu {
        margin-bottom: 5px;
        width: 162px;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #e4e4e4;
        border-top: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
}

table.menu th {
	background: url(../../templates/gfx/subhead_bg.png) repeat-x;
	text-align: left;
	padding-top: 4px;
	padding-left: 4px;
	height: 21px;
	color: #666666;
    font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid #E6E6E6;
    text-indent: 5px;
}

table.menu td {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: bold;
}

table.form {
        margin: 0px 0px 0px 0px;
        width: 100%;
        /*border-top: 1px solid #617B7B;
        border-left: 1px solid #617B7B;
        border-right: 1px solid #617B7B;
        border-bottom: 1px solid #617B7B;*/
        background-color: #e4e4e4;
}

table.formUnwidth {
        margin: 0px 0px 0px 0px;
        /*border-top: 1px solid #617B7B;
        border-left: 1px solid #617B7B;
        border-right: 1px solid #617B7B;
        border-bottom: 1px solid #617B7B;*/
        background-color: #e4e4e4;
}

table.form th, table.formUnwidth th {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        text-align: left;
        height: 14px;
        line-height: 14px;
        white-space: nowrap;
        background-color: #123b6e;
}

table.form th.textcenter, table.form th div, table.formUnwidth th.textcenter {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        height: 14px;
        line-height: 14px;
        white-space: nowrap;
        background-color: #123b6e;
}

table.form_gadai_details {
        margin: 0px 0px 0px 0px;
        width: 100%;
        /*border-top: 1px solid #617B7B;
        border-left: 1px solid #617B7B;
        border-right: 1px solid #617B7B;
        border-bottom: 1px solid #617B7B;*/
        background-color: #e4e4e4;
}

table.form_gadai_details th.textcenter, table.form_gadai_details th div, table.formUnwidth th.textcenter {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        height: 14px;
        line-height: 14px;
        white-space: nowrap;
        background-color: #888888;
}

table.form td, table.formUnwidth td {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        background-color: #ffffff;
}

table.formprint {
        margin: 0px 0px 0px 0px;
        width: 80%;
        /*border-top: 1px solid #617B7B;
        border-left: 1px solid #617B7B;
        border-right: 1px solid #617B7B;
        border-bottom: 1px solid #617B7B;*/
        background-color: #e4e4e4;
}

table.formprint th.noheight {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
        height: 31px;
        line-height: 14px;
        white-space: nowrap;
        background-color: #123b6e;
}

table.input {
        margin: 0px 0px 0px 0px;
        width: 100%;
}

table.input td {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: normal;
        text-align: right;
}

table.msg {
        width: 100%;
        background-color: #ffffff;
        border-left: 0px solid #0D5999;
        border-right: 0px solid #0D5999;
        border-top: solid 0px #0D5999;
        border-bottom: 0px solid #0D5999;
}

table.msg td.clear {
        font-size: 13px;
        font-weight: bold;
        text-indent: 34px;
        background-color: #ffffff;
        background: url(../../templates/gfx/clear.png) no-repeat bottom left;
        height: 32px;
        color: navy;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

table.msg td.warning {
        font-size: 13px;
        font-weight: bold;
        text-indent: 34px;
        background-color: #ffffff;
        background: url(../../templates/gfx/exclamation.png) no-repeat bottom left;
        height: 32px;
        color: red;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

table.msg td.error {
        font-size: 13px;
        font-weight: bold;
        text-indent: 34px;
        background-color: #ffffff;
        background: url(../../templates/gfx/error.png) no-repeat bottom left;
        height: 32px;
        color: red;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

a.toclink:hover, a.toclink:visited, a.toclink:link {
        font-size: 9px;
}

.button {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: bold;
        font-size: 10px;
        color: #8C8C8C;
        color: black;
        /*border-style: solid;*/
        border-top-width: 1px;
        border-right-width: 1px; 
        border-bottom-width: 1px;
        border-left-width: 1px;
        /*background: #EBEBEB;*/
        background: lightgreen;
        height: 18px;
            cursor: pointer;

        &.next {
            color: black;
            background: yellow;
        }

        &:disabled {
            color: #8C8C8C;
            background: #EBEBEB;
        }
}

.inputbox {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #000000;
        background-color: #e4e4e4;
        border: 1px solid #899898;
}

.selbox {
        /*border-top: #708090 1px inset;
        border-right: #708090 1px inset;
        border-bottom: #708090 1px inset;
        border-left: #708090 1px inset;*/
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        color: #000000;
        font-size: 11px;
        background-color: #e4e4e4;
        /*background-color: #899898;*/
        line-height: 0px;
}

.selboxDis {
        border: #123b6e 1px inset;
        font-size: 11px;
        background-color: #e2e2de;
        color: #ffffff;
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        line-height: 0px;
}

table.pager {
        margin: 0px 0px 0px 0px;
}

table.pager td {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: bold;
        color: Black;
}

table.data {
        margin: 0px 0px 0px 0px;
        width: 100%;
        border-left: 1px solid #DFDFDF;
        border-right: 1px solid #DFDFDF;
        border-top: solid 1px #DFDFDF;
        border-bottom: 1px solid #DFDFDF;
        background-color: #FAFAFA;
}

table.data th {
    font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    font-weight: bold;
}

table.data td {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: normal;
        background-color: #FFFFFF;
        }

table.data td.datamenu {
        background-color: #FAFAFA;
        }

table.data td.subject {
        font-size: 11px;
        font-weight: bold;
        text-align: left;
        color: Black;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        border-bottom: 1px solid #DFDFDF;
        border-top-color: #E6E6E6;
        border-top-style: solid;
        border-top-width: 1px;
        background-color: #FAFAFA;
        }

table.data td.lineOne {
        font-size: 10px;
        font-weight: normal;
        text-align: left;
        color: Black;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
        }

table.data td.lineTwo {
        font-size: 10px;
        font-weight: normal;
        text-align: left;
        color: Black;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #FAFAFA;
}

table.marhun{
        margin: 0px 0px 0px 0px;
        width: 100%;
        border : 2px solid black;
        background-color: #FAFAFA;
}

table.marhun td {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: normal;
        background-color: #FFFFFF;
        border-left : 1px solid black;
        border-top : 1px solid black;
        }

table.marhun th {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: normal;
        background-color: #CCC;
        border-left : 1px solid black;
        }

table.marhun td.no {
    border : 0px;
    border-top : 1px solid black;
}
table.marhun th.no2 {
    border : 0px;
}


table.marhun td.datamenu {
        background-color: #FAFAFA;
        }

table.marhun td.subject {
        font-size: 11px;
        font-weight: bold;
        text-align: left;
        color: Black;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        border-bottom: 1px solid #DFDFDF;
        border-top-color: #E6E6E6;
        border-top-style: solid;
        border-top-width: 1px;
        background-color: #FAFAFA;
        }

table.marhun td.lineOne {
        font-size: 10px;
        font-weight: normal;
        text-align: left;
        color: Black;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #FFFFFF;
        }

table.marhun td.lineTwo {
        font-size: 10px;
        font-weight: normal;
        text-align: left;
        color: Black;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color: #FAFAFA;
}

table.ordernav {
}

.imgclick {
        font-family : Arial, Helvetica, sans-serif;
        cursor: hand;
}

img {
  cursor: pointer;
}

.ontab {
        font-family : Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        background-color: #ffae00;
        border-left: outset 2px #ff9900;
        border-right: outset 2px #808080;
        border-top: outset 2px #ff9900;
        border-bottom: solid 0px #d5d5d5;
        width: 14%;
        text-align: center;
        cursor: hand;
        font-weight: bold;
}

.offtab {
        font-family : Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #FFFFFF;
        background-color : #8A3A04;
        border-left: outset 2px #E0E0E0;
        border-right: outset 2px #E0E0E0;
        border-top: outset 2px #E0E0E0;
        border-bottom: solid 0px #d5d5d5;
        width: 14%;
        text-align: center;
        cursor: hand;
        font-weight: bold;
}

.pagetext {
        visibility: hidden;
        display: none;
        position: static;
        top: 0;
}

#topic {
        position: relative;
        display: block;
        height: 20;
        background: #899898;
        margin-left: 7px;
        margin-right: 7px;
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #ffffff;
}

#subtopic{
    position: relative;
    display: block;
    left: 4px;
    background-position:bottom;
    background-repeat:no-repeat;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #666666;
    width: 100%;  
    padding-bottom: 29px;
}

#subtopic h3{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 30px;
}

#subtopic h3 span{ 
    /*display: none; */
}

#subtopic h3{ 
    /*background-image:url("/templates/gfx/exclamation.png");*/
    background-repeat:no-repeat; 
}


legend {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: bold;

}
#warn {
        font-size: 13px;
	position : relative;
	width: 200px;
	height : 100px;
        font-weight: bold;
        text-indent: 34px;
        background-color: #ffffff;
        background: url(../../templates/gfx/exclamation.png) no-repeat bottom left;
        height: 32px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
}

.hide {
    display : none;
}
.show {
    display : block;
}
.inputboxfocus {
        font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
        color: #000000;
        background-color: #f2f200;
        border: 1px solid #899898;
}



/************************ CSS UNTUK ADD CAWANGAN ****************** */



/************************* TAMAT CSS UNTUK ADD CAWANGAN *********************/

/************************* CSS UNTUK KAUNTER **********************/
#gadai_maklumat_penggadai{
    border : 1px solid black;
    position : relative;
    /*width: 360px;*/
    width: auto;
    /*top : 50px;*/
    padding-left : 7px;
    padding-right : 7px;
    padding-top : 7px;
    padding-bottom : 7px;
    float : left;
    -moz-border-radius: 7px 7px 7px 7px;
}
#gadai_maklumat_marhun{
    border : 1px solid black;
    float: left;
    position : relative;
    /*width: 380px;*/
    width: 700px;
    margin-left : 10px;
    padding-left : 7px;
    padding-right : 7px;
    padding-top : 7px;
    padding-bottom : 7px;
    -moz-border-radius: 7px 7px 7px 7px;
}
#gadai_maklumat_pinjaman{
    border : 1px solid black;
    position : relative;
    float: left;
    width: 180px;
    margin-left : 10px;
    margin-right : 10px;
    padding-left : 7px;
    padding-right : 7px;
    padding-top : 7px;
    padding-bottom : 7px;
    -moz-border-radius: 7px 7px 7px 7px;
}
#gadai_post_nosiri{
    position : absolute;
    top : 38px;
    left : 680px;
}
#overlap_post_nosiri{
    position : absolute;
    top : 38px;
    left : 480px;
}
#kaunter_single{
    position : relative;
    width: 480px;
    left : 200px;
    float : left;
}
#kaunter_first_step {
    border : 1px solid black;
    -moz-border-radius: 7px 7px 7px 7px;
    position : relative;
    width: 450px;
    padding-left : 10px;
    padding-right : 10px;
    padding-top : 10px;
    padding-bottom : 10px;
    float :left;
}
#kaunter_second_step{
    position : relative;
    float : left;
    margin-left : 10px;
    width: 710px;
}
#kaunter_sub_second {
    border : 1px solid black;
    -moz-border-radius: 7px 7px 7px 7px;
    position : relative;
    width: 710px;
    padding-left : 10px;
    padding-right : 10px;
    padding-top : 10px;
    padding-bottom : 10px;
}
/* new */
#kaunter_third_step{
    position : relative;
    float : left;
    margin-left : 20px;
    width: 470px;
}
#kaunter_sub_third {
    border : 1px solid black;
    -moz-border-radius: 7px 7px 7px 7px;
    position : relative;
    width: 470px;
    padding-left : 10px;
    padding-right : 10px;
    padding-top : 10px;
    padding-bottom : 10px;
}
#kaunter_button{
    position : relative;
    float : left;
    margin-top : 20px;
    /*margin-right : 20px;*/
    margin-left : 20px;
    width: 180px;
}

/**************************TAMAT CSS KAUTTER **********************/


/**************************PRINT***********************************/
#divprint{
    border : 1px solid black;
    -moz-border-radius: 7px 7px 7px 7px;
    width : 380px;
    position : relative;
    padding-left : 10px;
    padding-right : 10px;
    padding-top : 10px;
    padding-bottom : 10px;
    margin-left : 220px;

}

.header-container {
    width: 99%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
.header-container td {
    border: 1px solid #ddd;
    padding: 6px 10px;
}
.header-label {
    font-weight: bold;
    color: #333;
    width: 150px;
    background: #f9f9f9;
}
.header-value {
    color: #000;
}
.header-top {
    display: flex;
    width: 99%;
    margin-top: 10px;
    justify-content: space-between;
    align-items: center;
    background: #0d3c6b;
    color: white;
    padding: 6px 10px;
    font-weight: bold;
}
.header-top button {
    background: white;
    border: 1px solid #0d3c6b;
    padding: 3px 8px;
    cursor: pointer;
}