@font-face {
    font-family: 'supermarketRegular';
    src: url('../fonts/supermarket.eot');
    src: url('../fonts/supermarket.eot') format('embedded-opentype'), url('../fonts/supermarket.woff') format('woff'), url('../fonts/supermarket.ttf') format('truetype'), url('../fonts/supermarket.svg#supermarketRegular') format('svg');
}

body {
    font-family: Tahoma, Arial, Verdana;
    font-weight: lighter;
    font-size: 12px;
    line-height: 1.5;
    color: #333;
}

sub {
    font-size: smaller;
    vertical-align: sub;
}

sup {
    font-size: smaller;
    vertical-align: super;
}

p {
    padding-top: 0.5em;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

a {
    color: #333;
    text-decoration: none;
}

    a:hover {
        color: #1C94C4; /*#FF981F;*/
    }

table th,
table td {
    /* border: 1px solid #ccc; 
	padding: 0.3em 0.7em;*/
}

table th {
    color: #1C94C4;
    text-align: center;
}

    table th a {
        background-color: #fafafa;
        border: 1px solid #dddddd;
    }

    table th a {
        border: none;
    }

table tr:hover {
    /*background-color: #fdf5ce; */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2 {
    color: #000;
}

h3 {
    font-size: 1.1em;
    /*font-family: Serif;*/
    margin-bottom: 10px;
    border: 1px solid #C5DBEC;
    padding: 0.5em 1em 0.3em;
    border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    color: #2E6E9E;
    background: #DFEFFC;
    margin: 2px 0;
}

/*h4 {
    margin: 5px 0;
    border: 1px solid #C5DBEC;
    padding: 0.5em 1em 0.3em;
    border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    color: #2E6E9E;
    background: #DFEFFC;
}*/
h4 {
    /*margin: 5px 0;*/
    /*border: 1px solid #C5DBEC;*/
    /*padding: 0.5em 1em 0.3em;*/
    /*border-radius: 0.4em;
    -moz-border-radius: 0.4em;*/
    /*color: #2E6E9E;
    background: #DFEFFC;*/
}

h5 {
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
    margin-bottom: 5px;
}

    h5.modal-title {
        border-bottom: none;
        padding: initial;
        margin-bottom: initial;
    }

        h5.modal-title + button.close {
            margin-top: -15px;
        }

div#container {
    margin: 0 auto;
    float: left;
    overflow: hidden;
    min-width: 100%;
}

div#header {
    width: 100%;
    height: 100px;
}

div#content-wrapper {
    padding: 0;
}

/*div#main-content {
  padding: 0 5px;
  margin-bottom: 70px;
}

div#left-column {
  float: left;
  width: 0px;
  display: none;
  background-color: #fff;
  width: 200px;
}
div#left-column + div#main-column {
    margin-left: 210px;
}
 */

div#main-content {
    padding: 0 5px;
    margin-bottom: 70px;
    display: flex;
}

div#left-column {
    /*float: left;*/
    width: 0px;
    display: none;
    background-color: #fff;
    width: 200px;
    margin-right: 10px;
}

    div#left-column > #menu {
        width: 200px;
    }

    div#main-column {
        /*min-height: 600px;*/
        flex-grow: 1;
        flex: 1 1 auto;
    }

div#main-content > div#content {
    flex-grow: 1;
}
/*
@media only screen 
and (max-width : 1366px) 
{
    div#container 
    {
        min-width:100%;        
    }
    div#left-column + div#main-column 
    {
        width: 1125px;
    }
}*/
@media only screen and (max-device-width : 1280px) {
    div#container {
        min-width: 100%; /*width: 1260px;*/
    }

    div#left-column + div#main-column {
        width: 1040px;
    }
}

@media only screen and (max-width : 1024px) {
    div#container {
        min-width: 100%; /*width: 1000px;*/
    }

    div#left-column + div#main-column {
        width: 780px;
    }
}




div#header-inner {
    width: 100%;
    background: url(../images/header/2.jpg) repeat-x top left transparent;
    margin: 0 auto;
    height: 100px;
}

div#header-left {
    background: url(../images/header/1.jpg) no-repeat top left transparent;
    width: 100%;
    height: 100px;
    float: left;
    display: block;
}

div#header-right {
    background: url(../images/header/3.jpg) no-repeat top left transparent;
    width: 598px;
    height: 100px;
    float: right;
    display: block;
}

div#footer p {
    text-align: center;
    font-size: smaller;
    padding: 10px 0;
}

div#lang-switcher {
    display: block;
    position: absolute;
    overflow: hidden;
    right: 95px;
    top: 10px;
    color: #000;
    font-weight: bold;
}

    div#lang-switcher a.btn_lang {
        background: url(../images/header/header_menu.png) no-repeat 0 0 transparent;
        width: 21px;
        height: 14px;
        display: inline-block;
        overflow: hidden;
        text-indent: -999px;
    }

        div#lang-switcher a.btn_lang.lang-th {
            width: 21px;
            height: 14px;
            background-position: -2px -2px
        }

        div#lang-switcher a.btn_lang.lang-th-selected {
            width: 21px;
            height: 14px;
            background-position: -48px -2px
        }

        div#lang-switcher a.btn_lang.lang-en {
            width: 21px;
            height: 14px;
            background-position: -25px -2px
        }

        div#lang-switcher a.btn_lang.lang-en-selected {
            width: 21px;
            height: 14px;
            background-position: -71px -2px
        }

/**
 * System navigation
 **/
div#system-nav {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

    div#system-nav ul {
        overflow: hidden;
        float: left;
        /*border-bottom: 1px solid #999;*/
    }

        div#system-nav ul > li {
            float: left;
            display: block;
            margin: 0;
            /* border: 1px dotted #ccc; */
            margin-right: 0px;
        }

            div#system-nav ul > li a {
                text-decoration: none;
                text-indent: -9999px;
                padding: 0px;
                display: block;
                overflow: hidden;
                background-image: url(../images/header/productmanuals/header_menu.png);
                background-repeat: no-repeat;
                background-position: 0 0;
                background-color: transparent;
            }
            /* TH */
            div#system-nav ul > li.nav_tm a {
                width: 170px;
                height: 30px;
                background-position: -311px -98px
            }

                div#system-nav ul > li.nav_tm.selected a,
                div#system-nav ul > li.nav_tm a:hover {
                    width: 170px;
                    height: 30px;
                    background-position: -139px -98px
                }

    div#system-nav.lang-en ul > li.nav_tm a {
        width: 220px;
        height: 30px;
        background-position: -224px -226px
    }

        div#system-nav.lang-en ul > li.nav_tm.selected a,
        div#system-nav.lang-en ul > li.nav_tm a:hover {
            width: 220px;
            height: 30px;
            background-position: -2px -226px
        }
    /* Home menu */
    div#system-nav ul > li.nav_home a {
        width: 100px;
        height: 30px;
        background-position: -2px -34px
    }

        div#system-nav ul > li.nav_home.selected a,
        div#system-nav ul > li.nav_home a:hover {
            width: 100px;
            height: 30px;
            background-position: -104px -34px
        }

    div#system-nav.lang-en ul > li.nav_home a {
        width: 95px;
        height: 30px;
        background-position: -355px -2px
    }

        div#system-nav.lang-en ul > li.nav_home.selected a,
        div#system-nav.lang-en ul > li.nav_home a:hover {
            width: 95px;
            height: 30px;
            background-position: -258px -2px
        }
    /* TDB menu */
    div#system-nav ul > li.nav_tdb a {
        width: 225px;
        height: 30px;
        background-position: -229px -258px
    }

        div#system-nav ul > li.nav_tdb.selected a,
        div#system-nav ul > li.nav_tdb a:hover {
            width: 225px;
            height: 30px;
            background-position: -2px -258px
        }

    div#system-nav.lang-en ul > li.nav_tdb a {
        width: 195px;
        height: 30px;
        background-position: -199px -194px
    }

        div#system-nav.lang-en ul > li.nav_tdb.selected a,
        div#system-nav.lang-en ul > li.nav_tdb a:hover {
            width: 195px;
            height: 30px;
            background-position: -2px -194px
        }
    /* TDMS menu */
    div#system-nav ul > li.nav_tdms a {
        width: 250px;
        height: 30px;
        background-position: -2px -290px
    }

        div#system-nav ul > li.nav_tdms.selected a,
        div#system-nav ul > li.nav_tdms a:hover {
            width: 250px;
            height: 30px;
            background-position: -254px -290px
        }

    div#system-nav.lang-en ul > li.nav_tdms a {
        width: 340px;
        height: 30px;
        background-position: -2px -354px
    }

        div#system-nav.lang-en ul > li.nav_tdms.selected a,
        div#system-nav.lang-en ul > li.nav_tdms a:hover {
            width: 340px;
            height: 30px;
            background-position: -2px -322px
        }
    /* System */
    div#system-nav ul > li.nav_system a {
        width: 80px;
        height: 30px;
        background-position: -94px -2px
    }

        div#system-nav ul > li.nav_system.selected a,
        div#system-nav ul > li.nav_system a:hover {
            width: 80px;
            height: 30px;
            background-position: -176px -2px
        }

    div#system-nav.lang-en ul > li.nav_system a {
        width: 105px;
        height: 30px;
        background-position: -206px -34px
    }

        div#system-nav.lang-en ul > li.nav_system.selected a,
        div#system-nav.lang-en ul > li.nav_system a:hover {
            width: 105px;
            height: 30px;
            background-position: -313px -34px
        }
    /* SKA Channel */
    div#system-nav ul > li.nav_skachannel a {
        width: 185px;
        height: 30px;
        background-position: -189px -130px
    }

        div#system-nav ul > li.nav_skachannel.selected a,
        div#system-nav ul > li.nav_skachannel a:hover {
            width: 185px;
            height: 30px;
            background-position: -2px -162px
        }

    div#system-nav.lang-en ul > li.nav_skachannel a {
        width: 185px;
        height: 30px;
        background-position: -189px -162px
    }

        div#system-nav.lang-en ul > li.nav_skachannel.selected a,
        div#system-nav.lang-en ul > li.nav_skachannel a:hover {
            width: 185px;
            height: 30px;
            background-position: -2px -130px
        }
    /* SKA News */
    div#system-nav ul > li.nav_skanews a {
        width: 115px;
        height: 30px;
        background-position: -2px -66px
    }

        div#system-nav ul > li.nav_skanews.selected a,
        div#system-nav ul > li.nav_skanews a:hover {
            width: 115px;
            height: 30px;
            background-position: -119px -66px
        }

    div#system-nav.lang-en ul > li.nav_skanews a {
        width: 135px;
        height: 30px;
        background-position: -2px -98px
    }

        div#system-nav.lang-en ul > li.nav_skanews.selected a,
        div#system-nav.lang-en ul > li.nav_skanews a:hover {
            width: 135px;
            height: 30px;
            background-position: -236px -66px
        }
    /* Product Manuals */
    div#system-nav ul > li.nav_pm a {
        width: 117px;
        height: 30px;
        background-position: -122px -415px
    }

        div#system-nav ul > li.nav_pm.selected a,
        div#system-nav ul > li.nav_pm a:hover {
            width: 117px;
            height: 30px;
            background-position: -2px -415px
        }

    div#system-nav.lang-en ul > li.nav_pm a {
        width: 184px;
        height: 30px;
        background-position: -188px -385px
    }

        div#system-nav.lang-en ul > li.nav_pm.selected a,
        div#system-nav.lang-en ul > li.nav_pm a:hover {
            width: 184px;
            height: 30px;
            background-position: -2px -385px
        }




/** Widget **/
div.widget {
    border: 1px solid #ccc;
    border-radius: 0.4em;
    background-color: #FAFAFA;
    margin-bottom: 10px;
    padding: 5px;
}

    div.widget > h3 {
        margin-top: 0;
        border-bottom: 1px solid #ccc;
        padding: 0.4em 0.8em;
        font-size: 1.1em;
        color: #1C94C4;
        margin-bottom: 0.3em;
    }

    div.widget > ul,
    div.widget > ul ul {
        margin-left: 0px;
    }

    div.widget > ul {
        list-style: none;
    }

        div.widget > ul ul {
            list-style: none;
        }

    div.widget li {
        display: block;
    }

        div.widget li > a {
            display: block;
            border-bottom: 1px solid #eee;
            padding: 4px 0;
        }

    div.widget > ul > li.current a,
    div.widget > ul > li a:hover {
        color: #1C94C4;
        background-color: #eaeaea;
    }

    div.widget > ul.menu > li > a {
        background-image: url(../images/bullet_square_blue.png);
        background-repeat: no-repeat;
        background-position: 5px 10px;
        padding-left: 15px;
    }

    div.widget > ul.menu > li li > a {
        background-image: url(../images/bullet_square_orange.png);
        background-repeat: no-repeat;
        background-position: 15px 10px;
        padding-left: 25px;
    }


    div.widget > ul.menu li.separator {
        display: none;
    }

    /**
 * Collapsable menu
 **/
    div.widget > ul.collapsible-menu,
    div.widget > ul.collapsible-menu ul {
        list-style: none outside none;
    }

        div.widget > ul.collapsible-menu li /*.opened*/ {
            padding-left: 1.5em;
            background: url(../images/minus.png) 0 5px no-repeat;
        }

            div.widget > ul.collapsible-menu li.parent-folder {
                padding-left: 1.5em;
                background: url(../images/folder_up.png) 0 5px no-repeat;
            }

            div.widget > ul.collapsible-menu li a {
                display: inline;
            }

            div.widget > ul.collapsible-menu li a {
                display: inline;
                padding-left: 0;
                border: 0;
            }

            div.widget > ul.collapsible-menu li.collapsed {
                background: url(../images/plus.png) left 8px no-repeat;
                padding-top: 4px;
                padding-bottom: 4px;
            }

            div.widget > ul.collapsible-menu li.current-item > a {
                color: #1C94C4;
                font-weight: bold;
                padding: 4px 0;
                border: 0;
            }

    /** Collapsible menu (2) */
    div.widget > ul.collapsible-menu2,
    div.widget > ul.collapsible-menu2 ul {
        list-style: none outside none;
    }

        div.widget > ul.collapsible-menu2 li {
            padding-bottom: 4px;
        }

            div.widget > ul.collapsible-menu2 li:after {
                /*clear: both;*/
            }

            div.widget > ul.collapsible-menu2 li a {
                border: 0;
                padding: 0 0 2px 0;
                margin-left: 16px;
            }

            div.widget > ul.collapsible-menu2 li > span {
                float: left;
                padding: 4px 4px 0 0;
                display: inline-block;
                width: 12px;
                height: 12px;
                cursor: pointer;
            }

            div.widget > ul.collapsible-menu2 li.collapsed > span {
                background: url(../images/plus.png) 0 center no-repeat;
            }

            div.widget > ul.collapsible-menu2 li.collapsed > ul {
                display: none;
            }

            div.widget > ul.collapsible-menu2 li > span,
            div.widget > ul.collapsible-menu2 li.opened > span {
                background: url(../images/minus.png) 0 center no-repeat;
            }

            div.widget > ul.collapsible-menu2 li.opened > ul {
                display: block;
            }

            div.widget > ul.collapsible-menu2 li.current-item > a {
                color: #1C94C4;
                /*font-weight: bold;*/
                text-decoration: underline;
            }

            div.widget > ul.collapsible-menu2 li > ul {
                margin-left: 1.5rem;
            }

div.user-bar {
    overflow: hidden;
    padding: 0.3em 0;
    margin-bottom: 5px;
    /*border-top: 1px solid #999;*/
    border-bottom: 1px dotted #ccc;
}

div#user-toolbar {
    float: left;
    padding: 0.4em 0;
    margin-right: 5px;
}

div#user-bar {
    text-align: right;
    /*padding: 5px 10px ;*/
    /*font-size: smaller;*/
}

    div#user-bar span.user {
        color: #1C94C4;
    }

#main-search-form {
    float: left;
    overflow: hidden;
}

    #main-search-form label {
        color: #1C94C4;
        font-weight: bold;
        padding: 0.4em;
    }

#search-query {
    width: 250px;
}

div#breadcrumb {
    margin-bottom: 5px;
    border-bottom: 1px dashed #ccc;
    padding: 3px 10px;
}

    div#breadcrumb a {
        color: #1C94C4;
    }

    div#breadcrumb span {
        color: #FFA616;
    }

div#content > h2,
.content-headline {
    font-size: 1.2em;
    /*font-family: Serif;*/
    margin-top: 0;
    margin-bottom: 10px;
    border: 1px solid #C5DBEC;
    padding: 0.5em 1em 0.3em;
    border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    color: #2E6E9E;
    background: #DFEFFC;
}

div#content.login-page > h2 {
    margin-top:10px;
}

    h2.content-headline > a,
    div#content > h2 a {
        /*font-family: Serif;*/
        color: #2E6E9E;
    }

form.simple {
    display: block;
    margin: 0 auto;
    width: 90%;
    padding: 10px;
    /*border: 1px solid #ccc;*/
}


    form.simple p {
        overflow: hidden;
        display: block;
        margin-bottom: 3px;
    }

        form.simple p > label {
            font-weight: bold;
            display: block;
            float: left;
            width: 30%;
        }
        /*
 form.simple p>input,
form.simple p>select,
form.simple p>textarea {
	width: 65%;
}*/
        form.simple p.submit {
            margin-left: 30%;
        }

            form.simple p.submit > input {
                width: auto;
            }

span.required,
em.required {
    color: #ff0000;
}

em.important {
    display: inline-block;
    height: 16px;
    padding-left: 18px;
    background: url(../images/icon_important.png) no-repeat 0 0 transparent;
}

span.image-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: -9999px;
    outline: 0;
    border: 0;
    background-image: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
}

    span.image-icon.icon-accepted {
        background-image: url(../images/action_accept.gif);
    }

    span.image-icon.icon-block {
        background-image: url(../images/cancel.png);
    }

    span.image-icon.icon-show {
        background-image: url(../images/flag_green.png);
    }

    span.image-icon.icon-hide {
        background-image: url(../images/flag_red.png);
    }

.image-icon.icon-file {
    background-image: url(../images/page.png);
}

.image-icon.icon-directory {
    background-image: url(../images/folder.png);
}

.image-icon.icon-zoom {
    background-image: url(../images/zoom.png);
}

.image-icon.icon-excel {
    background-image: url(../images/excel.png);
}

a.btn-up-down {
    display: none;
}

a.btn-up {
    /*display: inline-block;*/
    display: none;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_arrow-btn-Up.gif) no-repeat 0 0 transparent;
}

a.btn-down {
    /*display: inline-block;*/
    display: none;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_arrow-btn-Down.gif) no-repeat 0 0 transparent;
}

a.btn-markread {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/email_open.png) no-repeat 0 0 transparent;
}

a.btn-link {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/world_link.png) no-repeat 0 0 transparent;
}

a.btn-delete,
a.btn-unregister {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/delete.gif) no-repeat 0 0 transparent;
}

a.btn-edit {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_edit_small.png) no-repeat 0 0 transparent;
}

a.btn-resign {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/door_out.png) no-repeat 0 0 transparent;
}

a.btn-info {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/information.png) no-repeat 0 0 transparent;
}

.icon-info {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/information.png) no-repeat 0 0 transparent;
}

a.btn-staff {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/user.png) no-repeat 0 0 transparent;
}

a.btn-rename {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/textfield.png) no-repeat 0 0 transparent;
}

a.btn-editor-view {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/zoom.png) no-repeat 0 0 transparent;
}

a.btn-articles {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/directory_listing.png) no-repeat 0 0 transparent;
}

a.btn-release-view {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/world.png) no-repeat 0 0 transparent;
}

a.btn-add {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_plus-btn.gif) no-repeat 0 0 transparent;
}

a.btn-move {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_move.gif) no-repeat 0 0 transparent;
}

a.btn-announce {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_broadcast.gif) no-repeat 0 0 transparent;
}

a.btn-home {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_home.png) no-repeat 0 0 transparent;
}

a.btn-print {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_print.png) no-repeat 0 0 transparent;
}

a.btn-save {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_save.png) no-repeat 0 0 transparent;
}

a.btn-more {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_more.gif) no-repeat 0 0 transparent;
}

a.btn-application {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_application.gif) no-repeat 0 0 transparent;
}

a.btn-password {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/lock.png) no-repeat 0 0 transparent;
}

a.btn-history {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/history.png) no-repeat 0 0 transparent;
}

a.btn-request-promote {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/email.png) no-repeat 0 0 transparent;
}

a.btn-move-up {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_arrow-btn-Up.gif) no-repeat 0 0 transparent;
}

a.btn-move-down {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_arrow-btn-Down.gif) no-repeat 0 0 transparent;
}

a.btn-accept {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/action_accept.gif) no-repeat 0 0 transparent;
}

a.btn-reject {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/action_stop.gif) no-repeat 0 0 transparent;
}

a.btn-pause {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/control_pause.png) no-repeat 0 0 transparent;
}

a.btn-approve {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/accept.png) no-repeat 0 0 transparent;
}

a.btn-register {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/book.png) no-repeat 0 0 transparent;
}

a.btn-cancel {
    display: inline-block;
    *display: block;
    *float: left;
    *margin-right: 2px;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/cancel.png) no-repeat 0 0 transparent;
}

a.btn-response {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_reply.gif) no-repeat 0 0 transparent;
}

a.btn-attachment {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_attachment.gif) no-repeat 0 0 transparent;
}

a.btn-result {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_flat_view.png) no-repeat 0 0 transparent;
}

a.btn-special {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_star.png) no-repeat 0 0 transparent;
}

a.btn-folder {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    /*height: 16px;*/
    background: url(../images/open_folder_gray.png) no-repeat 0 0 transparent;
}

a.btn-show {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/open_folder_gray.png) no-repeat 0 0 transparent;
}

a.btn-hide {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/open_folder_gray.png) no-repeat 0 0 transparent;
}

form.simple-form a.btn-text,
a.btn-text {
    text-indent: 0;
    padding-left: 1.8em;
    width: auto;
}

a.btn-text-right {
    text-indent: 0;
    padding-right: 18px;
    width: auto;
    background-position: 100% 0;
}

a.btn-html-h1 {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_heading_1.png) no-repeat 0 0 transparent;
}

a.btn-html-h2 {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_heading_2.png) no-repeat 0 0 transparent;
}

a.btn-html-h3 {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_heading_3.png) no-repeat 0 0 transparent;
}

a.btn-html-h4 {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_heading_4.png) no-repeat 0 0 transparent;
}

a.btn-html-h5 {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_heading_5.png) no-repeat 0 0 transparent;
}

a.btn-html-h6 {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_heading_6.png) no-repeat 0 0 transparent;
}

a.btn-html-bold {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_bold.png) no-repeat 0 0 transparent;
}

a.btn-html-italic {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_italic.png) no-repeat 0 0 transparent;
}

a.btn-html-indent {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_indent.png) no-repeat 0 0 transparent;
}

a.btn-html-indent-remove {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_indent_remove.png) no-repeat 0 0 transparent;
}

a.btn-html-super-script {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_superscript.png) no-repeat 0 0 transparent;
}

a.btn-html-sub-script {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/text_subscript.png) no-repeat 0 0 transparent;
}

a.btn-html-link {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/link.png) no-repeat 0 0 transparent;
}

a.btn-html-image {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/picture.png) no-repeat 0 0 transparent;
}

a.btn-html-video {
    display: inline-block;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/html/film.png) no-repeat 0 0 transparent;
}


/** Common dialog **/
div#dialog-message,
div#dialog-confirm,
div#dialog-waiting,
div#dialog-announce {
    display: none;
}

    div#dialog-message .ui-dialog-titlebar-close,
    div#dialog-confirm .ui-dialog-titlebar-close,
    div#dialog-announce .ui-dialog-titlebar-close,
    div#dialog-waiting .ui-dialog-titlebar-close {
        display: none;
    }

    div#dialog-announce p#field-target-select {
        display: none;
    }

    div#dialog-waiting div#progressbar {
        height: 22px;
    }

    div#dialog-waiting .ui-progressbar-value {
        background-image: url(../images/pbar-ani.gif);
    }
/**
 *
 * Query dialog 
 **/
div#dialog-query input.query-text {
    width: 240px;
}

div.dialog-widget p {
}

    div.dialog-widget p label {
        font-weight: bold;
        display: block;
        padding: 0.2em 0;
    }

    div.dialog-widget p input[type=text],
    div.dialog-widget p input[type=password],
    div.dialog-widget p select,
    div.dialog-widget p textarea {
        width: 90%;
    }


div.paginator > span {
    float: left;
    line-height: 1.7;
}

div.paginator > div {
    float: right;
    line-height: 1.7;
}

    div.paginator > div > select.form-control {
        display: inline-block;
        width: initial;
    }

div.paginator {
    overflow: hidden;
    padding: 4px 0;
    position: relative;
    overflow: hidden;
    margin: 5px 0 5px 0;
}

    div.paginator > ul {
        overflow: hidden;
        right: 0;
        position: absolute;
    }

        div.paginator > ul > li {
            display: block;
            float: left;
            margin-right: 5px;
            padding: 0;
        }

            div.paginator > ul > li:last-child {
                margin-right: 0;
            }

            div.paginator > ul > li > a {
                display: block;
                text-align: center;
                border: 1px solid #dddddd;
                padding: 2px 8px;
                color: #1C94C4;
                background-color: #FAFAFA;
            }

                div.paginator > ul > li > a:hover,
                div.paginator > ul > li > a.current-page {
                    background-color: #fdf5ce;
                    color: #c77405;
                    border: 1px solid #fbcb09;
                }


/* .simple-form */
form.simple-form * {
    margin: 0;
    padding: 0;
}

form.simple-form fieldset {
    border: 1px solid #dedede;
    /*padding: 0 0.5em 0.5em;*/
    padding: 0.5em;
    margin-bottom: 0.5em;
}

    form.simple-form fieldset legend {
        font-size: 1.2em;
        color: #000000;
        padding: 0.2em 0.5em;
    }

form.simple-form div.submit {
    margin-top: 1.2em;
    padding-left: 11em;
}

form.simple-form fieldset > div > p,
form.simple-form fieldset > p {
    display: inline-block;
    overflow: hidden;
}

form.simple-form fieldset > div > p,
form.simple-form fieldset > p {
    display: block;
    margin: 0.6em 0;
    vertical-align: middle;
}

form.simple-form label {
    color: #1C94C4;
    font-weight: bold;
    float: left;
    text-align: right;
    width: 10em;
    margin-right: 1em;
}

form.simple-form input,
form.simple-form select {
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #DDDDDD;
    font: bold 0.95em arial,sans-serif;
    padding: 0.4em 0.25em;
    width: 40em;
}

form.simple-form textarea {
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #DDDDDD;
    font: bold 0.95em arial,sans-serif;
    padding: 0.3em 0.25em;
    width: 40em;
}

form.simple-form input.checkbox {
    width: 1em;
    border: none;
    margin-right: 0.2em;
    margin-left: 0;
}

form.simple-form label.checkbox {
    text-align: left;
    float: none;
    width: 3em;
}

form.simple-form div.submit input,
form.simple-form input.btn-submit {
    color: #1C94C4;
    width: auto;
    padding: 0.4em 0.6em;
}

    form.simple-form div.submit input:hover,
    form.simple-form input.btn-submit:hover {
        background-color: #fdf5ce;
        color: #c77405;
        border: 1px solid #fbcb09;
    }

form.simple-form input:focus,
form.simple-form select:focus,
form.simple-form textarea:focus {
    border: 1px solid #1A5B8F;
}

form.simple-form .asmContainer {
    margin-left: 11em;
}

form.simple-form .asmSelect {
    /* the newly created regular 'select' */
    display: inline;
}

form.simple-form .asmOptionDisabled {
    /* disabled options in new select */
    color: #999;
}

form.simple-form .asmHighlight {
    /* the highlight span */
    padding: 0;
    margin: 0 0 0 1em;
}

form.simple-form .asmList {
    /* html list that contains selected items */
    margin: 0.25em 0 1em 0;
    position: relative;
    display: block;
    padding-left: 0;
    list-style: none;
    width: 450px;
}

form.simple-form .asmListItem {
    /* li item from the html list above */
    position: relative;
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    background: #ddd;
    border: 1px solid #bbb;
    width: 100%;
    margin: 0 0 1px 0;
    line-height: 1em;
}

    form.simple-form .asmListItem:hover {
        background-color: #e5e5e5;
    }

form.simple-form .asmListItemLabel {
    /* this is a span that surrounds the text in the item, except for the remove link */
    padding: 5px;
    display: block;
}

form.simple-form .asmListSortable .asmListItemLabel {
    cursor: move;
}

form.simple-form .asmListItemRemove {
    /* the remove link in each list item */
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
}

form.simple-form .field-error-note {
    display: block;
}
/* Login form */
form#login-form {
    width: 400px;
}

    form#login-form input {
        width: 15em;
    }

        form#login-form input.btn-submit, form#forgotpassword-form input.btn-submit {
            width: 8em;
        }

/* Forgot password form */
form#forgotpassword-form {
}

    form#forgotpassword-form input {
        margin: 0 auto;
    }

form.simple-form fieldset > p {
}
/* */
div#documents-container > div#no-document {
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    background-color: #FAFAFA;
    font-size: 1.2em;
    padding: 2em 1em;
}

/** Toolbar **/
div.toolbar,
div.editor-tool {
    margin: 0.3em 0;
    overflow: hidden;
    width: 100%;
    padding: 3px 0 5px 0;
    border-bottom: 1px dashed #ccc;
    display: flex;
    justify-content:start;
    align-items: baseline;
}
    div.toolbar > *,
    div.editor-tool > * {
        margin-right: 4px;
    }

    div.toolbar label,
    div.editor-tool label {
        color: #1C94C4;
        font-weight: bold;
    }

/*.toolbar .btn {
    margin-right: 4px;
}*/

./*toolbar .btn-group > .btn {
    margin-right: 0;
}*/

    .toolbar .btn-group > .btn.active {
        background-color: #337ab7;
        border-color: #2e6da4;
        color: #fff;
    }

div.toolbar input[type=text],
div.toolbar select,
div.editor-tool input,
div.editor-tool select {
    -moz-border-radius: 0.1em;
    border-radius: 0.1em;
    background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #DDDDDD;
    font: bold 0.95em arial,sans-serif;
    padding: 0.3em 0.25em;
    color: #1C94C4;
    margin-right: 3px;
}

div.searchbox .form-control,
div.toolbar .form-control,
div.toolbar input[type="text"].form-control {
    border-radius: 0;
    padding: 0.3em 0.25em;
    font-size: 10pt;
    color: #555;
}

div.searchbox select.form-control,
div.toolbar select.form-control {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

input.input-year {
    width: 50px;
    text-align: center;
}

div.toolbar input:focus,
div.toolbar select:focus,
div.editor-tool input:focus,
div.editor-tool select:focus {
    border: 1px solid #1A5B8F;
}
/*div.toolbar input.button:hover,
div.toolbar button.button:hover,
div.toolbar a.button:hover,*/
div.editor-tool input.button:hover,
div.editor-tool button.button:hover,
div.editor-tool a.button:hover {
    background-color: #fdf5ce;
    color: #c77405;
    border: 1px solid #fbcb09;
}
/** Message widget **/
div.message-widget {
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    background-color: #FAFAFA;
    font-size: 1.2em;
    padding: 2em 1em;
    margin-bottom: 5px;
}

    div.message-widget > h4 {
        border: 0;
        color: #666;
        font-size: 18pt;
        background-color: transparent;
        text-align: left;
        font-family: supermarketRegular;
        line-height: 1;
        margin: 0 0 10px 0;
        padding: 0;
        border-radius: 0;
    }

    div.message-widget.size-large {
        padding-top: 8em;
        padding-bottom: 8em;
    }

    div.message-widget.size-medium {
        padding-top: 4em;
        padding-bottom: 4em;
    }

    div.message-widget.error-container {
        background-color: #FFEFEF;
        border: 1px solid #ad0000;
        color: #cc0000;
        text-align: left;
        padding-left: 30px;
        font-size: 1.0em;
    }

    div.message-widget.info-container {
        background-color: #FBFBFB;
        border: 1px solid #cccccc;
        color: #003300;
        text-align: left;
        padding-left: 30px;
        font-size: 1.0em;
    }

    div.message-widget.success-container {
        background-color: #F0FFEF;
        border: 1px solid #00ad00;
        color: #003300;
        text-align: left;
        padding-left: 30px;
        font-size: 1.0em;
    }

    div.message-widget.info-container > ul > li,
    div.message-widget.error-container > ul > li {
        list-style-type: square;
    }

p.message-panel {
    border: 1px solid #dddddd;
    border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    background-color: #EAEAEA;
    text-align: center;
    font-size: 1.2em;
    padding: 2em 1em;
}

div.message-widget a.button {
    font-size: 0.8em;
}

table.message-table {
    width: 100%;
}

    table.message-table th,
    table.message-table td {
        padding: 0.6em 0.4em;
        border-bottom: 1px solid #ccc;
    }

    table.message-table tr:nth-child(2n) td {
        background-color: #efefef;
    }

    table.message-table td {
        background-color: #fff;
    }

    table.message-table > colgroup > col.col-date {
        width: 140px;
    }

    table.message-table > colgroup > col.col-by {
        width: 100px;
    }

    table.message-table > colgroup > col.col-action {
        width: 60px;
    }

span.icon-unread {
    display: inline-block;
    *display: block;
    *float: left;
    *margin: 0 0.4em;
    width: 36px;
    height: 11px;
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    background: url(../images/icon_new_small.gif) no-repeat 3px 0;
}

div.message-filter a.active {
    color: #1C94C4;
    font-weight: 600;
    text-decoration: underline;
}

div.admin-tools {
    float: right;
}

span.more {
    display: block;
    padding: 0.5em;
    text-align: right;
}

.tooltip {
    background-color: #DFEFFC;
    border: 1px solid #1C94C4;
    color: #000;
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    padding: 0.4em 1.0em;
    line-height: 1.8em;
    width: 300px;
    height: 200px;
}
/** Header **/
span.stage-source {
    display: block;
    padding: 0.4em;
    overflow: hidden;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/flag_red.png) no-repeat 50% 50% transparent;
}

span.stage-waiting {
    display: block;
    padding: 0.4em;
    overflow: hidden;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/flag_yellow.png) no-repeat 50% 50% transparent;
}

span.stage-production {
    display: block;
    padding: 0.4em;
    overflow: hidden;
    text-indent: -9999px;
    width: 16px;
    height: 16px;
    background: url(../images/flag_green.png) no-repeat 50% 50% transparent;
}
/* Browser Unordered list */
ul.browser-list {
    list-style: none;
    overflow: hidden;
}

    ul.browser-list li {
        margin: 0.2em;
        padding: 1.5em 0.2em;
        width: 400px;
        display: block;
        float: left;
        text-align: center;
        border: 1px solid #ccc;
    }
/* -- table styles (Added) -- */
form > h3 {
    font-size: 1.1em;
    /*font-family: Serif;*/
    margin-bottom: 10px;
    border: 1px solid #C5DBEC;
    padding: 0.5em 1em 0.3em;
    border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    color: #2E6E9E;
    background: #DFEFFC;
}

p.row_line {
    padding: 6px 4px;
    border: none;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 3px;
}

table.form {
    border: none;
    width: 100%;
}


    table.form td > label {
        color: #1C94C4;
    }

        table.form td > label.invalid {
            color: #cc0000;
            padding: 4px;
        }

    table.form > tr > td,
    table.form > tbody > tr > td,
    table.form > tfoot > tr > td,
    table.form > tr > th,
    table.form > thead > tr > th,
    table.form > tbody > tr > th,
    table.form > tfoot > tr > th {
        padding: 7px 2px; /*padding: 4px;*/
        border: none;
        border-bottom: 1px dashed #ccc;
    }

    table.form > tr > th,
    table.form > thead > tr > th,
    table.form > tbody > tr > th,
    table.form > tfoot > tr > th {
        text-align: left;
        background-color: transparent;
    }

    table.form input[type=text],
    table.form input[type=email],
    input[type=text].form-element {
        border: 1px solid #ccc;
        padding-top: 0.4em;
        padding-bottom: 0.4em;
    }

    table.form select,
    select.form-element {
        /*padding-top: 3px;
    padding-bottom:3px;
    */
        vertical-align: middle;
        /*height: 24px;*/
        padding-top: 0.3em;
        padding-bottom: 0.3em;
    }

    table.form p.hint {
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 5px 10px;
        background-color: #EDF7FF;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    }

table.grid {
    background-color: #fff;
}

    table.grid td,
    table.grid th {
        padding: 6px 4px;
        border: 1px solid #ccc;
    }

    table.grid tr:hover td {
        background-color: #f8f8f8;
    }


input[type=text].invalid,
input[type=password].invalid,
select.invalid,
textarea.invalid,
table.form input[type=text].invalid,
table.form select.invalid {
    background-color: #FFD3D3;
    border: 1px solid #ad0000;
}

label.invalid {
    color: #cc0000;
    font-style: italic;
}

label.valid {
    display: none;
}

input[type=text].readonly,
input.readonly,
select.readonly {
    background-color: #FFF9D3;
    color: #aaa;
    border-color: #ccc;
}

th a.sort_none, th a.sort_asc, th a.sort_desc {
    vertical-align: middle;
}

th span.ui-icon {
    display: inline-block;
}

div#search_box {
    margin: 10px 0;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #f8f8f8;
}







table.reset {
    display: inline-block;
}

    table.reset,
    table.reset td,
    table.reset th {
        border: 0;
        padding: 0;
        margin: 0;
    }
/**
 * Scrollable layout
 **/
table.scrollable {
    table-layout: fixed;
    width: 100%;
}

    table.scrollable th,
    table.scrollable td {
        padding: 0;
    }

    table.scrollable tbody td {
        vertical-align: top;
    }

        table.scrollable th > span,
        table.scrollable thead th > span,
        table.scrollable td > span,
        table.scrollable tbody td > span {
            /*padding: 6px 4px;*/
            text-align: center;
            display: block;
        }

    table.scrollable > thead > tr > th.padding_none > span {
        padding-left: 0;
        padding-right: 0;
    }

    table.scrollable td.left > span {
        text-align: left;
    }

    table.scrollable td.right > span {
        text-align: right;
    }

    table.scrollable td.nowrap > span {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    table.scrollable tr.line-through > td > span {
        text-decoration: line-through;
    }
/**
 * Data table 
 **/
table.data-table {
    border-collapse: collapse;
    /*width: auto; */
}

    table.data-table tbody > tr > th,
    table.data-table tfoot > tr > th,
    table.data-table tfoot > tr > td,
    table.data-table thead > tr > th,
    table.data-table thead > tr > td {
        background-color: #fff;
        color: #1C94C4;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        padding: 6px 4px;
        word-wrap: break-word;
    }

        table.data-table thead > tr > th.last,
        table.data-table thead > tr > th:last-child {
            /*border-right: none;*/
        }

    table.data-table tbody > tr > td {
        border-bottom: 1px dashed #ddd;
        background-color: #f4f4f4;
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
        padding: 10px 6px;
        text-align: center;
    }

    table.data-table tbody > tr:nth-child(2n) > td,
    table.data-table tbody > tr.even > td {
        background-color: #fafafa;
    }

    table.data-table tbody > tr:hover > td {
        color: #333;
        background-color: #DFEFFC;
    }

    table.data-table tbody > tr > td.center {
        text-align: center;
    }

    table.data-table tbody > tr > td.right {
        text-align: right;
    }

    table.data-table tbody > tr > td.left {
        text-align: left;
    }

    table.data-table thead th.no,
    table.data-table tbody td.no {
        width: 40px;
    }

    table.data-table thead th.button,
    table.data-table tbody td.button {
        width: 40px;
    }
    /* */
    table.data-table tbody tr.reserve_names > td {
        background-color: #FFFBCC;
    }

    table.data-table thead tr td input[type="text"],
    table.data-table thead tr td select,
    table.data-table tbody tr td input[type="text"],
    table.data-table tbody tr td select {
        /*padding: 4px;*/
        padding: 0.4em;
        box-sizing: border-box;
    }


form.action-form > h2 {
    font-size: 1.2em;
    padding: 6px 4px;
    border: 1px solid #DFEFFC;
    border-bottom: 1px solid #CCCCCC;
    background-color: #DFEFFC;
    color: #1C94CD;
    margin-bottom: 3px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

form.action-form h4 {
    border: 0;
    border-bottom: 1px solid #1c94cd;
    background-color: transparent;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    color: #1c94cd;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

form.action-form > div.toolbar {
    padding: 3px 0 5px 0;
    margin: 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 3px;
}

    form.action-form > div.toolbar > ul {
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-size: 0;
    }

        form.action-form > div.toolbar > ul > li {
            display: inline-block;
            border-right: 0px solid #000;
            margin: 0;
            padding: 1px 0;
            font-size: 12px;
            /*background-color: #DFEFFC;*/
        }

            form.action-form > div.toolbar > ul > li + li {
                margin-left: 5px;
            }

            form.action-form > div.toolbar > ul > li > a {
                display: block;
                padding: 0;
                background-color: #1C94CD;
                color: #fff;
                border: 1px solid #eee;
                padding: 2px 10px 4px 10px;
            }

                form.action-form > div.toolbar > ul > li > a:hover {
                    background-color: #DFEFFC;
                    color: #1C94CD;
                    border: 1px solid #ccc;
                }


form.action-form fieldset {
    margin-bottom: 5px;
    background-color: #fdfdfd;
    border: 1px solid #ccc;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 5px 10px 15px 10px;
}

    form.action-form fieldset > div.fieldset_header {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
    }

        form.action-form fieldset > div.fieldset_header > h3 {
            background: none;
            border: 0;
            margin: 10px 0 3px 0;
            padding: 0;
            font-size: 12px;
        }

form.action-form > div.body {
    margin-top: 5px;
}

form.action-form label {
    color: #1C94C4;
    font-weight: bold;
}

div.radiobuttons {
}

    div.radiobuttons > ul {
        font-size: 0;
        margin: 0;
        overflow: hidden;
    }

        div.radiobuttons > ul > li {
            display: inline-block;
            font-size: 12px;
        }
/* DataGrid 3rd Generation */
div.datagrid_container {
    display: inline-block;
    min-width: 100%;
}

table.data-grid {
    border: 1px solid #eee;
    border-spacing: 1px;
    /*width:100%;*/
    table-layout: fixed;
}
    /*
table.data-grid > thead > tr
{
    display: block;
    position:relative;
}*/
    table.data-grid > thead > tr > th {
        background-color: #fafafa;
        color: #1C94C4;
        border-top: 0;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        border-left: 1px solid #eee;
        padding: 4px 16px;
    }

    table.data-grid > thead > tr + tr > th {
        border-top: 1px solid #eee;
    }


    table.data-grid thead th.col-selection {
        width: 50px;
    }

    /*
table.data-grid thead > tr > th.last,
table.data-grid thead > tr > th:last-nth 
{
    border-right: none;
}

table.data-grid > tbody 
{
    display:block;
    float:left; 
}*/
    table.data-grid > tbody > tr > td {
        border-bottom: 1px solid #eee;
        border-top: 0;
        background-color: #fff;
        border-right: 1px solid #eee;
        border-left: 1px solid #eee;
        padding: 6px 4px;
        vertical-align: middle;
    }

    table.data-grid > tbody > tr:nth-child(2n) > td,
    table.data-grid > tbody > tr.even > td {
        background-color: #f8f8f8;
    }

    table.data-grid > tbody > tr:hover > td {
        color: #333;
        background-color: #DFEFFC;
    }

    table.data-grid > tbody > tr.selected > td {
        background-color: #DFEFFC;
    }

    table.data-grid > thead > tr > th > a {
        vertical-align: middle;
        background-color: transparent;
        display: block;
        color: #1C94C4;
    }

        table.data-grid > thead > tr > th > a > span {
            vertical-align: bottom;
            display: inline-block;
        }

.dim {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1 !important;
    background-color: black;
    filter: alpha(opacity=40); /* internet explorer */
    -khtml-opacity: 0.40; /* khtml, old safari */
    -moz-opacity: 0.40; /* mozilla, netscape */
    opacity: 0.40; /* fx, safari, opera */
}
/**
 * Widget Box
 */
div.widget_box {
    border: 1px solid #ccc;
    border-radius: 0.4em;
    background-color: #FAFAFA;
    margin-bottom: 10px;
    padding: 5px;
}

    div.widget_box > h3 {
        border-bottom: 1px solid #ccc;
        padding: 0.4em 0.8em;
        font-size: 1.1em;
        color: #1C94C4;
        margin-bottom: 0.3em;
        margin-top: 0;
    }

    div.widget_box > div.toolbar > ul > li {
        display: inline-block;
    }


        div.widget_box > div.toolbar > ul > li label {
            /*color: #fff;*/
            font-weight: normal;
        }

            div.widget_box > div.toolbar > ul > li label.ui-button {
                color: #bbb;
                font-size: 10pt;
                font-weight: bold;
            }

                div.widget_box > div.toolbar > ul > li label.ui-button.ui-state-active {
                    color: #1C94C4;
                    background-color: #eee;
                    background-image: none;
                    border-color: #ccc;
                }

.select-with-others {
    width: 100%;
    text-align: center;
}

    .select-with-others > select,
    .select-with-others > input.textother {
        width: 70%;
    }

#lastest_activity_widget_showoption > label {
    margin-left: 2px;
    margin-right: 8px;
}


.ui-button-text-only .ui-button-text {
    padding: 0.2em 0.6em;
}

div.more {
    text-align: right;
    padding: 5px 0;
}

.text-center {
    text-align: center;
}


table.staff_list th,
table.staff_list td {
    border: 1px solid #ccc;
    padding: 0.3em 0.7em;
}

.padding-y-1,
.py-1 {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.pb-2 {
    padding-bottom: 2px !important;
}

.pt-1 {
    padding-top: 1px !important;
}

.pt-2 {
    padding-top: 2px !important;
}

.pt-4 {
    padding-top: 4px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.p-0,
.no-padding {
    padding: 0 !important;
}
.p-1 {
    padding: 2px !important;
}

.p-10 {
    padding: 10px !important;
}

.padding-y-2,
.py-2 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.padding-y-2,
.py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.padding-y-5,
.py-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.padding-y-10,
.py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.mr-0,
.margin-right-none,
.margin-right-0 {
    margin-right: 0 !important;
}

.mt-1,
.margin-top-1 {
    margin-top: 1px !important;
}

.mt-2,
.margin-top-2 {
    margin-top: 2px !important;
}

.mt-4,
.margin-top-4 {
    margin-top: 4px !important;
}

.mt-8,
.margin-top-8 {
    margin-top: 8px !important;
}
.mb-0,
.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.mb-1,
.margin-bottom-1 {
    margin-bottom: 1px !important;
}

.mb-2,
.margin-bottom-2 {
    margin-bottom: 2px !important;
}

.mb-3,
.margin-bottom-3 {
    margin-bottom: 3px !important;
}

.mb-4,
.margin-bottom-4 {
    margin-bottom: 4px !important;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.m-y-5 {
    margin-bottom: 5px;
    margin-top: 5px;
}

.m-y-10 {
    margin-bottom: 10px;
    margin-top: 10px;
}

.training-result {
    font-weight: bold;
}

    .training-result.result-P {
        color: #78a100;
    }

    .training-result.result-F {
        color: #c80000;
    }

    .training-result.result-A {
        color: #c80000;
    }

.clear-both {
    clear: both;
}

.hidden {
    display: none !important;
}

.number {
    text-align: right;
}

.photo-box {
    display: block;
}

    .photo-box > .photo {
        padding: 0px;
        background-color: #000;
        position: relative;
        margin: 0 auto;
    }

        .photo-box > .photo > img {
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .photo-box > .photo > .btn-edit {
            display: none;
            right: 3px;
            top: 3px;
            position: absolute;
            z-index: 30;
        }

        .photo-box > .photo > .btn-delete {
            display: none;
            right: 3px;
            bottom: 3px;
            position: absolute;
            z-index: 30;
        }

        .photo-box > .photo:hover > .btn-edit {
            display: block;
        }

        .photo-box > .photo:hover > .btn-delete {
            display: block;
        }

.text-small {
    font-size: smaller;
}

table.data-table tbody > tr > td.text-left,
.text-left {
    text-align: left;
}

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

.text-center {
    text-align: center;
}

.text-underlined {
    text-decoration: underline;
}

.text-danger,
.textcolor-red {
    color: red;
}

.text-bold {
    font-weight: 700;
}

.text-valign-middle {
    vertical-align: middle;
}

.text-valign-top {
    vertical-align: top;
}

.font-wingdings {
    font-family: Wingdings;
}

.padding-small {
    padding: 5px;
}

.padding-normal {
    padding: 10px;
}

input[readonly] {
    background-color: #FFFBCC;
    color: #6b6b6b;
    border: 1px solid #ccc;
}

.has-error > input {
    border: 1px solid #d80000 !important;
    color: #d80000 !important;
    background-color: #FFEFEF;
}

.display-block {
    display: block;
}

.vertical-top {
    vertical-align: top;
}

.invalid-feedback {
    font-size: smaller;
    color: #aa0000;
    display: none;
}

    .invalid-feedback > [class^="error-"] {
        display: none;
    }

        .invalid-feedback > [class^="error-"].active {
            display: block;
        }

select.select2.has-error + .select2 {
    border: 1px solid #d80000 !important;
    color: #d80000 !important;
}

.has-error > .invalid-feedback,
.has-error ~ .invalid-feedback,
.has-error + .invalid-feedback {
    display: block;
}

h4.ui-pnotify-title {
    border: 0;
    background-color: transparent;
    margin-bottom: 0.4em;
}

.brighttheme h4.ui-pnotify-title {
    margin-bottom: 0.4em;
    margin-top: 0;
    padding-top: 0.1em;
    font-weight: 600;
}

.brighttheme.brighttheme-success {
    background-color: #b7f3be;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

[data-notify="title"] {
    font-size: 14pt;
    display: block;
    margin-bottom: 8px;
    font-family: 'supermarketRegular', sans-serif;
}
/*.bg-light {
    background-color: #ccc;
}
tr.bg-light > th,
tr.bg-light > td {
    background-color: #ccc;
}*/

.d-flex {
    display: flex !important;
}

.justify-content-start {
    justify-content: flex-start;
}

.justify-content-between {
    justify-content: space-between;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-fill {
    flex: 1 1 auto !important;
}

.ml-1,
.ms-1 {
    margin-left: 4px;
}

.mx-1 {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.ml-2,
.ms-2 {
    margin-left: 8px;
}

.mr-1,
.margin-right-1,
.me-1 {
    margin-right: 4px;
}

.mr-2,
.me-2 {
    margin-right: 8px;
}