/*******************************************************************

    Module        : /assets/css/view.css
    Desc.         : CSS Class for Normal Page
    Created By    : Siau Pheng (siaupheng@3fonia.com).
    Created Date  : December 20th, 2007.
    Last Modified : December 21st, 2019.

    (c) 2009 - 2019, 3FONIA Software; WWW.3FONIA.COM.

*******************************************************************/

@media screen, projection {

    /****** CONTENT ******/

    html {
        background: #FFF url(../images/main-bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body {
        background: none !important;
        text-align: left;
        color: #000;
        font-family: "museo_sans_500", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        font-size: 11pt;
        margin: 0;
    }
    table { border-collapse: collapse; border-spacing: 0; }
    :focus { outline: none; }
    a, a:hover { text-decoration: none; cursor: pointer; }
    img { border: none; max-width: 500px; vertical-align: middle; }
    p { margin: 0; padding: 0 0 9px 0; }
    #hidden { display: none; }
    input, textarea, select {
        font-family: "museo_sans_500", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        font-size: 11pt;
        margin: 1px;
        vertical-align: middle;
        padding: 0 3px;
        border: solid 1px #434;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    input[type="text"], input[type="password"] { height: 22px; }
    select {
        height: 22px;
        max-width: 600px;
        white-space: pre-wrap;
        text-indent: 0.01px;
        text-overflow: '';
        appearance: none;
        -webkit-appearance: none;
        -webkit-padding-end: 18px;
        -webkit-user-select: none;
        -moz-appearance: none;
        -moz-padding-end: 18px;
        -moz-user-select: none;
    }
    select.enabled {
        background: #FFF url(../images/icons/dd_arrow-on.gif) no-repeat center right;
    }
    select.disabled {
        background: #FFF url(../images/icons/dd_arrow-off.gif) no-repeat center right;
    }
    select.table-navi {
        height: 25px;
    }
    option { padding-right: 10px; }
    .angka { text-align: left; }
    .text, .phone, .email { text-align: left; }
    .integer, .number, .double { text-align: right; }
    input.pickdate, input.pickdate.enabled {
        width: 110px;
        padding-right: 14px;
        background: #FFF url(../images/icons/date_on.gif) no-repeat 95% 50%;
    }
    input.pickdate.disabled {
        background: #FFF url(../images/icons/date_off.gif) no-repeat 95% 50%;
    }
    input:enabled, textarea:enabled, select:enabled { color: #000; background-color: #FFF; }
    input:disabled, textarea:disabled, select:disabled { color: #000; border: solid 1px #A7A7A7; }
    input.req:enabled, textarea.req:enabled, select.req:enabled { border: solid 1px #FF5B5B; }
    input.red, textarea.red, select.red { color: #F00; }
    input.blue, textarea.blue, select.blue { color: #00F; }
    input.bred, textarea.bred, select.bred { border: solid 1px #F00 !important; }
    input.bblue, textarea.bblue, select.bblue { border: solid 1px #00F !important; }
    #dataPrint { display: none; visibility: hidden; }
    #printText { color: #000; font-size: 14px; font-family: "Courier New"; }
    #linebreak { color: #FF0000; text-align: center; font-size: 10px; }
    #autopage, #pagebreak { display: none; }
    input.tombol, input.tomapp, input.additem {
        min-width: 100px;
        height: 22px;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
        font-size: 10pt !important;
    }
    input.tomapp {
        height: 25px;
        margin: 5px;
        background-color: #E0E0E0;
    }
    input.tommodul {
        cursor: pointer;
        font-size: 15pt;
        height: 40px;
        width: 250px;
        margin: 5px;
        color: #000;
        background-color: #E0E0E0;
    }
    input.tommodul:hover { color: #FFF; background-color: #F00; }
    input.tombol:disabled { border: solid 1px #858585; }
    input.tomapp:disabled, input.additem:disabled { border: solid 1px #FFF; }
    input.tomapp:enabled:hover, input.tombol:enabled:hover, input.additem:enabled:hover { background-color: #808080; }
    input.additem { min-width: 60px; height: 20px; font-size: 11px; }
    hr { margin: 5px 0; border: 1px solid #999; }
    .nobr { white-space: nowrap; }
    div.tabel { margin-top: 10px; }

    /****** LAYOUT ******/

    #desktop {
        min-width: 800px;
        height: 100%;
        min-height: 100%;
        cursor: default;
    }
    #desktopHeaderWrapper {
        position: relative;
        left: 0;
        width: 100%;
        height: 40px;
        margin-top: 0;
    }
    #desktopHeader, .desktopHeaderBG {
        top: 0;
        height: 40px;
        width: 100%;
        margin: 0 auto;
        padding: 5px;
    }
    .desktopHeaderBG {
        background-color: #333;
        filter: alpha(opacity=50);
        opacity: 0.5;
        position: absolute;
    }
    #desktopMainWrapper {
        background-color: #FFF;
        padding: 10px;
        overflow-x: auto;
        position: absolute;
        top: 40px;
        right: 0;
        bottom: 40px;
        left: 0;
    }
    #desktopMainWrapper #pageHeader {
        background-color: #FFA275;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        padding: 10px 6px;
    }
    #desktopMainWrapper #pageHeader #pageTitle {
        padding: 0 6px;
        font-size: 15pt;
        height: 30px;
        vertical-align: bottom;
    }
    #desktopMainWrapper #pageHeader #pageToolbar {
        border-top: 1px solid #FFF;
        height: 30px;
    }
    #desktopMainWrapper #pageContent{
        padding: 15px 0 0;
        min-height: 450px;
    }
    #desktopFooterWrapper {
        background-color: #333;
        filter: alpha(opacity=50);
        opacity: 0.5;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40px;
        margin-top: 0;
        overflow: hidden;
        clear: both;
        z-index: 10;
    }
    #desktopFooter {
        font-size: 8pt;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: center;
        color: #FFF;
        height: 24px;
        padding: 6px 8px 0 8px;
    }
    #desktopFooter a { color: #FFF; text-decoration: none; }
    #desktopFooter a:hover { text-decoration: none; }
    #desktopLogo {
        width: 40%;
        height: 66%;
        position: absolute;
        left: 5%;
        top: 15%;
        text-align: center;
        vertical-align: middle;
        padding: 10px;
    }
    #desktopLogo span.reg_name, #desktopLogo span.reg_addr, #desktopLogo span.reg_city, #desktopLogo span.reg_app1 { text-shadow: 1px 1px #666; }
    #desktopLogo span.reg_name { font-size: 17pt; color: blue; }
    #desktopLogo span.reg_addr { font-size: 14pt; color: blue; }
    #desktopLogo span.reg_city { font-size: 15pt; color: blue; text-transform: uppercase; }
    #desktopLogo span.reg_app1 { font-size: 12pt; color: #A6283C; }
    #desktopLogo span.reg_app2 { font-size: 9pt; font-style: italic; }
    #desktopLogo span.reg_id { font-size: 9pt; font-style: italic; color: orange; }
    #desktopUserInfo, #desktopUserInfoBG {
        width: 45%;
        height: 13%;
        position: absolute;
        right: 5%;
        bottom: 15%;
        text-align: center;
        line-height: 1.5;
    }
    #desktopUserInfoBG {
        background-color: #333;
        filter: alpha(opacity=50);
        opacity: 0.5;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    #desktopUserInfo { 
        font-size: 10pt;
        margin: 10px;
        height: 10%;
        margin: 0 auto;
    }
    #desktopTextInfo, #desktopTextInfoBG {
        width: 45%;
        height: 55%;
        position: absolute;
        right: 5%;
        top: 15%;
    }
    #desktopTextInfo {
        font-size: 10pt;
        width: 43%;
        height: 46%;
        margin: 10px;
        text-align: left;
        overflow-y: auto;
    }
    #desktopTextInfoBG {
        background-color: #FFF;
        filter: alpha(opacity=60);
        opacity: 0.6;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    #desktopTextRun {
        width: 43%;
        margin: 10px;
        padding: 5px 0;
        position: absolute;
        right: 5%;
        top: 61%;
    }
    #desktopTextRun marquee {
        text-align: center;
        vertical-align: middle;
        font-size: 20pt;
        color: #F34374;
    }
    #loadingFrame, #loadingFrameBG {
        width: 20%;
        height: 14%;
        padding: 22px;
        position: absolute;
        margin-left: -10%;
        margin-top: -1%;
        left: 70%;
        top: 50%;
        text-align: center;
    }
    #loadingFrameBG {
        background-color: #FFF;
        filter: alpha(opacity=50);
        opacity: 0.5;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    #loadingBox { background:url(../images/bar/progress-bar-back.gif) right center no-repeat; width:200px; height:20px; float:left; }
    #loadingPersen { background:url(../images/bar/progress-bar.gif) right center no-repeat; height:20px; }
    #loadingText { font-size:10pt; color:#000; float:none; padding:3px 0 0 10px; }
    #loadingModule { float: inherit; }

    /* ----------------- DROP DOWN MENU & USER PROFILE ----------------- */

    #divUser {
        color: #868e96;
        float: right;
        display: flex;
        align-items: center;
    }
    .nav {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }
    .nav-link-profile {
        display: block;
        padding: 0 1rem;
        position: relative;
        color: #868e96;
        transition: all 0.2s ease-in-out;
    }
    .nav-link-profile img {
        opacity: .85;
        transition: all 0.2s ease-in-out;
        width: 32px;
        border-radius: 50%;
    }
    .nav-link-profile .square-green {
        right: 15px;
        bottom: 2px;
        position: absolute;
        border-radius: 100%;
        border: 2px solid #fff;
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: #23BF08 !important;
    }
    .nav-link-profile .logged-name {
        display: inline-block;
        font-size: 12pt;
        margin-right: 5px;
        color: #FFF;
    }
    .dropdown-menu {
        z-index: 3000;
        width: 240px;
        display: none;
        float: left;
        min-width: 10rem;
        margin: 0.125rem 0 0;
        font-size: 0.875rem;
        color: #868ba1;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 3px;
        box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.16);
        position: relative;
        border-top: 0;
        margin-top: 1px;
        padding: 10px 20px 20px;
        box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.16);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        left: auto !important;
        right: -1px !important;
        top: 40px !important;
        transform: none !important;
        will-change: unset !important;
    } 
    .dropdown-menu.show {
        display: block;
    }
    .dropdown-menu img {
        width: 100px;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }
    .dropdown-menu .header {
        text-align: center;
    }
    .dropdown-menu .header .user-name {
        font-size: .8rem;
        margin-top: 15px;
        margin-bottom: 5px;
        color: #343a40;
    }
    .dropdown-menu .header .user-pos {
        font-size: 11pt;
    }
    .dropdown-menu .header .user-last {
        font-size: 8pt;
        font-style: italic;
    }
    .dropdown-menu .list-unstyled {
        padding-left: 0;
        list-style: none;
        margin: 0;
        font-size: 10pt;
    }
    .dropdown-menu .list-unstyled a {
        display: block;
        padding: 7px 10px;
        border-radius: 2px;
        transition: all 0.2s ease-in-out;
    }
    .dropdown-menu .list-unstyled a:hover, .dropdown-menu .list-unstyled a:focus {
        background-color: #dee2e6;
    }
    .dropdown-menu .list-unstyled .icon {
        display: inline-block;
        width: 20px;
        line-height: 0;
        text-align: center;
        font-size: 12pt;
        position: relative;
        color: #17a2b8;
        top: 2px;
        margin-right: 5px;
    }
    .dropdown-menu hr {
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }

    /* ----------------- HORIZONTAL NAVIGATOR MENU ----------------- */

    #divNavi {
        margin: 0;
        font-size: 11pt;
        left: 5px;
        position: absolute;
    }
    #subNavi {
        display: block;
        position: relative;
        list-style: none;
        margin: 0 0 0 0;
        z-index: 9000;
        text-align: center;
        display: block;
    }
    #subNavi .icon {
        display: inline-block;
        width: 20px;
        line-height: 0;
        text-align: center;
        font-size: 12pt;
        position: relative;
        color: #F00;
        top: 2px;
        margin-right: 5px;
    }
    #subNavi a:hover .icon, #subNavi a:focus .icon { 
        color: #FFF;
        -webkit-animation-name: icon-ani; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
        animation-name: icon-ani;
        animation-duration: .5s;
    }
    @-webkit-keyframes icon-ani {
        from {color: #FFF;}
        to {color: #F00;}
    }
    @keyframes icon-ani {
        from {color: #FFF;}
        to {color: #F00;}
    }
    #subNavi a {
        cursor: pointer;
        text-decoration: none;
        display: block;
        padding: 10px;
        background-color: #fff;
        margin: 0;
        float: left;
        border-radius: 7px;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
    }
    #subNavi > li > a { padding: 10px 20px; }
    #subNavi a:hover, #subNavi a:focus { background-color: #F00; color: #FFF; }
    #subNavi li a:hover, #subNavi li a:focus { background-color: #F00; color: #FFF; }
    #subNavi, #subNavi ul {
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 8pt;
    }
    #subNavi ul {
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        background: #fff;
        border: 1px solid #C3D46A;
        left: 0;
        position: absolute;
    }
    #subNavi li {
        display: block;
        list-style: none;
        position: relative;
        float: left;
        margin: 0 2px;
    }
    #subNavi li li { float: none; margin: 0;}
    #subNavi li li a { position: relative; float: none; text-align: left; }
    #subNavi li ul {
        position: absolute;
        width: 200pt;
        margin-left: -10000pt;
        margin-top: 22pt;
        z-index: 999;
    }
    #subNavi li ul ul { margin: -10pt 0 0 -10000pt; }
    #subNavi li:hover ul ul { margin-left: -10000pt; }
    #subNavi li:hover ul { margin-left: 0; }
    #subNavi li li:hover ul { margin-left: 185pt; margin-top: -25pt; }
    #subNavi li a:focus + ul { margin-left: 0; margin-top: 22pt; }
    #subNavi li li a:focus + ul { left: 0; margin-left: 10100pt; margin-top: -22pt; }
    #subNavi li li a:focus {left: 0; margin-left: 10000pt; width: 170pt;  margin-top: 0; }
    #subNavi li li li a:focus {left: 0; margin-left: 20100pt; width: 170pt;  margin-top: -10pt; }
    #subNavi li:hover a:focus{ margin-left: 0; }
    #subNavi li li:hover a:focus + ul { margin-left: 100pt; }
    #subNavi ul ul, #subNavi ul li:hover ul ul, #subNavi ul ul li:hover ul ul { display: none; }
    #subNavi ul li:hover ul, #subNavi ul ul li:hover ul, #subNavi ul ul ul li:hover ul { display: block; }
    #subNavi li * a.returnFalse {
        background-image: url(../images/rightarrow-dropdown.gif);
        background-repeat: no-repeat;
        background-position: right center;
    }
    li.divider {
        margin-top: 2px;
        padding-top: 3px;
        border-top: 1px solid #ebebeb;
    }

    /* ----------------- AUTO COMPLETER ----------------- */

    div.fon-autotext {
        position: absolute;
        z-index: 11000;
    }
    input.fon-autotext-input {
    }
    input.fon-autotext-input:active, input.fon-autotext-input:focus {
        border: solid 1px #FF5B5B;
    }
    div.fon-autotext div.fon-autotext-menu {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        background: #f5f5f5;
        border: 1px solid #e4e4e4;
        height: 150px;
        overflow-y: scroll;
    }
    div.fon-autotext div.fon-autotext-menu ul { list-style: none; }
    div.fon-autotext div.fon-autotext-menu ul li {
        border-bottom: 1px solid #ebebeb;
        border-top: 1px solid #ffffff;
        color: #9f9f9f;
        padding: 7px;
        line-height: 15px;
    }
    div.fon-autotext div.fon-autotext-menu ul li:first-child { border-top: 0px none; }
    div.fon-autotext div.fon-autotext-menu ul li:last-child { border-bottom: 0px none; }
    div.fon-autotext div.fon-autotext-menu ul li img {
        margin: -1px 20px 0px 4px;
        vertical-align: middle;
    }
    div.fon-autotext div.fon-autotext-menu ul li.active,
    div.fon-autotext div.fon-autotext-menu ul li:hover {
        background: #008000;
        color: #FFF;
        font-weight: bold;
        cursor: pointer;
    }
    div.fon-autotext div.fon-autotext-menu ul li.fon-autotext-separator,
    div.fon-autotext div.fon-autotext-menu ul li.fon-autotext-separator:hover {
        background: #434;
        color: #FFF;
        font-weight: bold;
    }
    div.fon-autotext blue { color: blue; }
    div.fon-autotext red { color: red; }

    div.fon-autopos {
        position: absolute;
        z-index: 11000;
    }
    input.fon-autopos-input {
        height: 25px;
        font-size: 14pt;
        padding-left: 3px;
        border: solid 1px #434;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    input.fon-autopos-input:active, input.fon-autopos-input:focus {
        border: solid 1px #FF5B5B;
    }
    div.fon-autopos div.fon-autopos-menu {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        background: #f5f5f5;
        border: 1px solid #e4e4e4;
        height: 150px;
        overflow-y: scroll;
    }
    div.fon-autopos div.fon-autopos-menu ul { list-style: none; }
    div.fon-autopos div.fon-autopos-menu ul li {
        border-bottom: 1px solid #ebebeb;
        border-top: 1px solid #ffffff;
        color: #9f9f9f;
        padding: 7px;
        line-height: 15px;
    }
    div.fon-autopos div.fon-autopos-menu ul li:first-child { border-top: 0 none; }
    div.fon-autopos div.fon-autopos-menu ul li:last-child { border-bottom: 0 none; }
    div.fon-autopos div.fon-autopos-menu ul li img {
        margin: -1px 20px 0px 4px;
        vertical-align: middle;
    }
    div.fon-autopos div.fon-autopos-menu ul li.active,
    div.fon-autopos div.fon-autopos-menu ul li:hover {
        background: #008000;
        color: #FFF;
        font-weight: bold;
        cursor: pointer;
    }
    div.fon-autopos div.fon-autopos-menu ul li.fon-autopos-separator,
    div.fon-autopos div.fon-autopos-menu ul li.fon-autopos-separator:hover {
        background: #434;
        color: #FFF;
        font-weight: bold;
    }
    div.fon-autopos blue { color: blue; }
    div.fon-autopos red { color: red; }

    /* ----------------- VIEW TABLE ----------------- */

    div.vnormal { margin: 3px 0; }
    table.vnormal {
        border-collapse: collapse;
        border: 1px solid #CCB;
        width: 100%;
    }
    table.vnormal * {
        font-family: "museo_sans_500", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        font-size: 11pt;
        color: #000;
        text-decoration: none;
        vertical-align: middle;
    }
    table.vnormal th {
        height: 28px;
        border: 1px solid #FFF;
        background-color: #DDD;
        text-align: center;
        white-space: nowrap; 
        text-transform: uppercase;
        font-weight: 500;
    }
    table.vnormal td {
        border: 1px solid #E0E0E0;
        padding: 2px;
        margin: 0;
        height: 25px;
        box-sizing: border-box;
    }
    table.vnormal>thead th:last-child { border-right: 1px solid #CCB; }
    table.vnormal>tbody tr { background-color: #fff; cursor: default; }
    table.vnormal>tbody tr.poin { cursor: pointer; }
    table.vnormal>tbody tr.rblue td:not(:last-child) { background-color: #5C54EF; }
    table.vnormal>tbody tr.rred td:not(:last-child) { background-color: #F49DA4; }
    table.vnormal>tbody tr.rgreen td:not(:last-child) { background-color:#7eff6c; }
    table.vnormal>tbody tr.ryellow td:not(:last-child) { background-color:#ffffa8; }
    table.vnormal>tbody tr.rcoret td:not(:last-child) { background-color:#F9B5B7; text-decoration: line-through; }
    table.vnormal>tbody tr.data:hover, table.vnormal>tbody tr.data:focus { background-color: #ff9; }
    table.vnormal>tbody tr.data td:last-child { padding-right: 5px; }
    table.vnormal>tbody tr:active { background-color: #FFF; }
    table.vnormal>tbody tr.grup { background-color: #0080FF; }
    table.vnormal>tfoot td {
        border: 1px solid #FFF;
        background-color: #DDD;
        height: 25px;
    }
    table.vnormal>tfoot td:last-child { border-right: 1px solid #DDD; }
    table.vnormal>tfoot td.navi { height: 36px; }
    table.vnormal * img { margin: 0; border: 0; padding: 0; }
    table.vnormal * img.icon { padding: 0 3px; }

    div.vnormal-scroll { overflow-y: scroll; }
    div.vnormal-scroll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    }
    div.vnormal-scroll::-webkit-scrollbar {
        width: 15px;
        background-color: #F5F5F5;
    }
    div.vnormal-scroll::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #D62929;
    }

    /* ----------------- PRINT TABLE ----------------- */

    table.pnormal { border-collapse: collapse; }
    table.pnormal tbody {
        font-family: "museo_sans_500", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        text-decoration: none;
        vertical-align: middle;
        min-width: 30px;
    }
    table.pnormal tbody th {
        height: 25px;
        border: none;
        font-weight: bold;
        background-color: #C0C0C0;
    }
    table.pnormal tbody td {
        border: none;
        padding: 3px 5px;
    }

    table.pborder { border-collapse: collapse; }
    table.pborder tbody {
        font-family: "museo_sans_500", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        text-decoration: none;
        vertical-align: middle;
        min-width: 30px;
    }
    table.pborder tbody th, table.pborder tbody td {
        border: solid 1px #000;
        height: 24px;
    }
    table.pborder tbody th { font-weight: bold; background-color: #C0C0C0; }
    table.pborder tbody td {
        padding: 3px 5px;
        height: 12px;
    }

    table.pborder tbody td.noright { border-right: 0 !important; text-align: right !important; }
    table.pborder tbody td.noleft { border-left: 0 !important; }

    table * .bold { font-weight: bold !important; }
    table * .left { text-align: left !important; }
    table * .right { text-align: right !important; }
    table * .center { text-align: center !important; }
    table * .wrap { white-space: normal !important; }
    table * .nowrap { white-space: nowrap !important; }
    table * .autowrap { white-space: nowrap !important; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
    table * .hidden { visibility: hidden !important; display: none !important; }
    table * .nb { border: 0 !important; }

    /* ----------------- COSTUMIZE ----------------- */

    select.mw90 {
        max-width: 90% !important;
    }
    table.vnormal * input:not([type="checkbox"]) {
        margin: 0 3px;
    }
    table * td.apbdp { background-color: #C1F4C2; }
    input.sicon {
        width: auto;
        height: 20px;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
        padding: 0 5px;
        font-size: 9pt;
        clear: both;
    }
    input.sicon:hover { color: #FFF; background-color: #F00; }
    input.sicon:disabled { border: solid 1px #FFF; }
    input.sicon:enabled:hover { background-color: #FF6C6C; }
    input[value*="Terima"] { background-color:#7eff6c; }
    input[value*="Tolak"] { background-color: #F49DA4; }
    input[value*="Pending"] { background-color:#ffffa8; }
    input[value*="KIRIM"] { background-color:#7eff6c; }

    input.respon, textarea.respon { width: 100%; }
    input.ganti {
        width: 50px;
        height: 22px;
        color: #FFF;
        cursor: pointer;
        font-size: 9pt;
    }

    table.map90 { width: 100%; border: none !important; }
    table.map90 tr td { border: none !important; }
    table.map90 tr.rp1 td { background-color:#7EFF6C !important; }
    table.map90 tr.rp2 td { background-color:#94FB86 !important; }
    table.map90 tr.rp3 td { background-color:#ABF8A0 !important; }
    table.map90 tr.rp4 td { background-color:#C1F5BA !important; }
    table.map90 tr.rp5 td { background-color:#D8F2D4 !important; }

    i.blue { color: blue; }
    i.red { color: red; }

    /* ----------------- ABOUT TABLE ----------------- */

    table.about * {
        font-family: "museo_sans_500", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        font-size: 10pt;
        color: #000;
        text-decoration: none;
        vertical-align: middle;
    }
}