@import url("/themes/font/font.css");

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: block; max-height:32px; clear:both
}
/* start backslash hack \*/
* html .clearfix {
    height: 1%;
}

/* close backslash hack */

html {
    min-height: 100%;
    /*-webkit-overflow-scrolling: touch !important;*/
}

body {
    font-family: Roboto, Khmer, Arial, Tahoma;
    font-size: 0.83em;
    padding: 5px;
}

a {
    color: #377ad0 !important;
    text-decoration: underline;
}

    a:hover {
        text-decoration: underline;
    }

p, ID, ul {
    /*padding-bottom: 1.2em;*/
    font-family: Roboto, Khmer, Arial, Tahoma;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Roboto, Khmer, Arial, Tahoma;
    font-size: 1em;
    
}

h1 {
    font-size: 1.8em;
    margin-bottom: 4px;
}

/* misc */

.linespace {
    height: 10px;
}

#pageWrapper {
    background: #555;
    background-image: url('images/desktop.jpg');
}

.desktopIcon {
    margin: 15px 0 0 15px;
    cursor: pointer;
}
/*****USER INTERFACE****************************************************************************/

.title {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 20px;
    color: #789;
}

hr {
    color: #aaaaaa;
    background-color: #aaaaaa;
    border: 0;
    height: 1px;
}

.form {
    border: solid 0px #DAE0E4;
    border-collapse: collapse;
    width: 789px;
}

    .form td {
        padding: 2px 2px 1px 2px;
        border-bottom: solid 1px #f8f8f8;
        vertical-align: top;
    }

        .form td input:textbox {
            width: 100%;
        }

.grid {
    border: solid 1px #DAE0E4;
    background-color: #f8f8f8;
    color: Black;
    border-collapse: collapse;
}

    .grid td {
        padding: 0px 2px 0px 2px;
        border: solid 1px #c1c1c1;
        color: #222222;
    }

th, td.header {
    color: #456;
    background-color: #DAE0E4;
    background-image: url('images/nav.gif');
    padding: 3px 3px 3px 3px;
    border: solid 1px #c1c1c1;
}

.no-border {
    border: none;
    border: 0px !important;
}

    .no-border td, no-border th {
        border: 1px solid #fff !important;
    }

.box-heading {
    font-weight: bold;
    color: #456;
    background-color: #f2f5f7;
    background-image: url('images/nav.gif');
    padding: 5px 3px 3px 3px;
    width: 98%;
    border: solid 2px #DAE0E4;
    overflow: hidden;
}

.box-content {
    color: #000;
    background-color: #fff;
    padding: 3px 3px 10px 3px;
    width: 98%;
    overflow: hidden;
    border: solid 2px #DAE0E4;
}

.box-alert-heading {
    font-weight: bold;
    color: #456;
    background-color: #ffff99;
    padding: 3px;
    height: 22px;
    line-height: 22px;
    width: 100%;
    border: solid 2px #ffff99;
}

.box-alert-content {
    color: #000;
    background-color: #fff;
    padding: 3px 3px 10px 3px;
    width: 100%;
    line-height: 22px;
    border: solid 2px #ffff99;
}

.disabled {
    color: black;
    background-color: #f2f5f7;
}


.textbox {
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-radius: 5px; -moz-border-radius: 5px;  -webkit-border-radius: 5px; -o-border-radius: 5px;
    color: #333333;
    padding: 4px 0px 4px 3px;
    font-family: Roboto, Khmer, Arial, Tahoma !important;
    font-size: 13px !important;
}

textarea.textbox {
    background-image: url('') !important;
}

.right {
    text-align: right;
}

.textbox.upper {
    text-transform: uppercase;
}

.readonly {
    background: rgb(237, 237, 237) !important;
    border: 0px solid #d1c7ac !important;
    padding: 4px 0px 4px 0px;
}

.textboxML, textarea { 
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #333333;
    padding: 3px;
    margin-right: 4px;
    margin-bottom: 3px;
}

/* used by DataTable search box*/
input[type="search"] {
    background-image: url(images/textbox-bg.jpg);
    background-repeat: repeat-x;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #333333;
    padding: 4px;
}

.dataTables_wrapper .dataTables_filter {
    margin:6px
}

.watermarkText {
    color: #456;
}

.error {
    color: #ff0000 !important;
}

.capital {
    text-transform: uppercase;
}

.dropdownlist { 
    border: 1px solid #ccc;
    border-radius: 5px; -moz-border-radius: 5px;  -webkit-border-radius: 5px; -o-border-radius: 5px;
    color: #333333;
    padding: 4px 0px 4px 0px;
    margin-right: 4px;
    margin-bottom: 3px;
}

.searchtextbox {
    border: none;
    border-bottom: 1px solid #E3E4E9;
    margin-top: 3px;
    margin-bottom: 3px;
}

.smallnote {
    font-size: 10px;
    color: gray;
}

.mediumnote {
    font-size: 12px;
    color: gray;
}

.comment {
    font-size: 12px;
    color: #444444;
}

img {
    border: none;
}

.heading {
    font-size: 16px;
    color: #888888;
    border-bottom: solid 2px #eeeeee;
    font-weight: bold;
    height: 22px;  line-height: 22px;
    margin-bottom: 15px; margin-top: 0px;
    padding-bottom: 25px !important;
}

hr.heading {
    width: 100%;
    height: 3px;
    background-color: #2647a0;
}

.fontGray {
    color: Gray;
}


@media only screen and (max-width: 512px) { /*mobile*/
    .sticky-bottom {
        position: static !important;
    }
}

.sticky-bottom > * {
    display: inline-block
}

    /***BUTTON **************************************************************************/

    .link {
        padding: 1px 5px 1px 5px !important;
        cursor: pointer;
        cursor: hand;
    }

    .button {
        background-color: #d7e5f5;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
        background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
        border-top: 1px solid #abbbcc;
        border-left: 1px solid #a7b6c7;
        border-bottom: 1px solid #a1afbf;
        border-right: 1px solid #a7b6c7;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -webkit-box-shadow: inset 0 1px 0 0 white;
        -moz-box-shadow: inset 0 1px 0 0 white;
        box-shadow: inset 0 1px 0 0 white;
        color: #1a3e66;
        font: normal 11px;
        padding: 4px 18px 4px 14px;
        text-align: center;
        text-shadow: 0 1px 1px #fff;
        text-decoration: none !important;
        font-family: Roboto, Khmer, Arial, Tahoma;
        margin: 3px 3px;
        white-space: nowrap;
    }

    /*input.button { padding:0px 0px 0px 0px }
input.button.focus { padding:2px 0px 2px 5px }*/

    input:disabled, input:read-only {
        background-color: #f8f8f8;
        background: urlx(data:image/png;
        base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat;
    }

    .button:hover {
        background-color: #ccd9e8;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8));
        background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
        background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
        background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
        background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
        background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
        border-top: 1px solid #a1afbf;
        border-left: 1px solid #9caaba;
        border-bottom: 1px solid #96a3b3;
        border-right: 1px solid #9caaba;
        -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
        -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
        box-shadow: inset 0 1px 0 0 #f2f2f2;
        color: #163659;
        cursor: pointer;
        text-decoration: none !important;
    }

    .button:active {
        border: 1px solid #8c98a7;
        -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
        -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
        box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
    }

    .button.big {
        font-size: 20px;
    }

    .small {
        font-size: 10px;
        font-weight: normal !important;
        padding: 2px 4px 2px 4px !important;
    }

    .button.focus {
        background-color: #52a8e8;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #52a8e8), color-stop(100%, #377ad0));
        background-image: -webkit-linear-gradient(top, #52a8e8, #377ad0);
        background-image: -moz-linear-gradient(top, #52a8e8, #377ad0);
        background-image: -ms-linear-gradient(top, #52a8e8, #377ad0);
        background-image: -o-linear-gradient(top, #52a8e8, #377ad0);
        background-image: linear-gradient(top, #52a8e8, #377ad0);
        border-top: 1px solid #4081af;
        border-right: 1px solid #2e69a3;
        border-bottom: 1px solid #20559a;
        border-left: 1px solid #2e69a3;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        -moz-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3;
        color: #fff !important;
        font: normal "Open Sans" "lucida grande", sans-serif;
        text-shadow: 0 -1px 1px #3275bc;
        -webkit-background-clip: padding-box;
        padding: 4px 20px 4px 16px;
    }

        .button.focus:hover {
            background-color: #3e9ee5;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9ee5), color-stop(100%, #206bcb));
            background-image: -webkit-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
            background-image: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
            background-image: -ms-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
            background-image: -o-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
            background-image: linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
            border-top: 1px solid #2a73a6;
            border-right: 1px solid #165899;
            border-bottom: 1px solid #07428f;
            border-left: 1px solid #165899;
            -webkit-box-shadow: inset 0 1px 0 0 #62b1e9;
            -moz-box-shadow: inset 0 1px 0 0 #62b1e9;
            box-shadow: inset 0 1px 0 0 #62b1e9;
            cursor: pointer;
            text-shadow: 0 -1px 1px #1d62ab;
            -webkit-background-clip: padding-box;
        }




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


    .default .ajax__tab_header {
        /*font-family: arial,helvetica,clean,sans-serif;*/
        font-size: small;
        border-bottom: solid 5px #CCD8E0; /* #b8b8b8; bottom bar */
    }

        .default .ajax__tab_header .ajax__tab_outer {
            /*unselected tab*/
            background: #e2e2e2 url(images/nav.gif);
            margin: 0px 0.16em 0px 0px;
            padding: 1px 0px 1px 0px;
            vertical-align: bottom;
            border: solid 1px #a3a3a3;
            border-bottom-width: 0px;
            cursor: pointer;
            cursor: hand;
            border-top-right-radius: 5px;
            -moz-border-radius-topright: 5px;
            -webkit-border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -webkit-border-top-left-radius: 5px;
        }

        .default .ajax__tab_header .ajax__tab_tab {
            /*unselected tab */
            color: #000;
            padding: 0.35em 0.75em;
            margin-right: 0.01em;
        }

    .default .ajax__tab_hover .ajax__tab_outer {
        /*hover tab*/
        background: #D9E1E5 url(images/nav.gif); /*background-color: #b8b8b8; */
    }

    .default .ajax__tab_active .ajax__tab_tab {
        /*selected tab*/
        color: #2647a0;
    }

    .default .ajax__tab_active .ajax__tab_outer {
        /*selected tab */ /* background-color: #b8b8b8 ; */
        background: #CCD8E0;
        border: solid 1px #CCD8E0; /* #b8b8b8; */
    }

    .default .ajax__tab_body {
        /*font-family:verdana,tahoma,helvetica;font-size:10pt;*/
        padding: 0.25em 0.5em;
        background-color: #fff;
        border: solid 2px #CCD8E0;
        border-top-width: 0px;
        border-bottom-right-radius: 8px;
        -moz-border-radius-bottomright: 8px;
        -webkit-border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
        -moz-border-radius-bottomleft: 8px;
        -webkit-border-bottom-left-radius: 8px;
    }

    /****************DASHBOARD*********************************/

    .groupWrapper {
        width: 32%;
        float: left;
        margin-right: 1%;
    }

    .serializer {
        clear: both;
    }

    .draggable {
        cursor: move
    }

    .groupItem {
        margin-bottom: 10px;
    }

    .itemHeader {
        line-height: 28px;
        background-color: #f2f5f7;
        background-image: url('images/nav.gif');
        color: #456;
        padding: 0 10px;
        font-weight: bold;
        font-size: 13px;
        height: 28px;
        position: relative;
        top: 0px;
        left: 0px;
    }

    .groupItem .itemHeader a {
        position: absolute;
        right: 10px;
        top: 0px;
        font-weight: normal;
        font-size: 11px;
        text-decoration: none;
    }

    .itemContent {
        line-height: 25px;
        padding: 5px;
        border: 2px solid #DAE0E4;
    }

    .sortHelper {
        border: 3px dashed #666;
        width: auto !important;
    }

    .groupWrapper p {
        height: 1px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .closeEl img {
        position: relative;
        top: 10px;
    }

    .dashboard_li {
        padding-left: 0px;
        margin-left: -10px;
        padding: 0 !important;
        list-style-type: circle !important;
    }

    .dot_link {
        color: black;
        text-decoration: none !important;
        border-bottom: 1px dotted;
    }

    .dashboard_ul {
        margin-left: -14px;
        margin-top: 0;
        padding-bottom: 0 !important;
        line-height: 27px;
    }

    .Transparent {
        width: 60px;
        border: none;
        background: none;
        cursor: pointer;
        color: #A6A6A6;
        text-decoration: none !important;
        border-bottom: 1px dotted;
    }

    .MsgScrollbar {
        height: 430px;
        width: auto;
        overflow: auto;
        border-right: 1px solid #DAE0E4;
        margin-right: 10px;
    }

    .Horizental_Line {
        color: #CCCCCC;
    }

    .horizontal_dotted_line {
        border-top: 1px dotted #DAE0E4;
        width: 100%;
    }

    .float-left {
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 2px 0px 2px 3px;
    }

    .rounded10 {
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -o-border-radius: 10px;
    }


    .DataMultiSelector {
        float: left;
        margin-right: 5px;
        margin-bottom: 5px;
        background-color: #b4d0f1;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
        background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
        background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
        border: 1px solid #abbbcc;
        /*border-top: 1px solid #abbbcc;
    border-left: 1px solid #a7b6c7;
    border-bottom: 1px solid #a1afbf;
    border-right: 1px solid #a7b6c7;*/
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        /*-webkit-box-shadow: inset 0 1px 0 0 white;
    -moz-box-shadow: inset 0 1px 0 0 white;
    box-shadow: inset 0 1px 0 0 white;*/
        color: Black;
        padding: 2px 0px 2px 3px;
        text-align: center;
        text-shadow: 0 1px 1px #fff;
    }

    .remove {
        width: 9px;
        height: 9px;
        background-color: none;
        margin-right: 2px;
    }

        .remove:hover {
            background-color: #91c2f6;
            border-radius: 1px;
            border: thin solid #bdc2c3;
        }


    /**************Contact list*****************/
    .contact_header {
        width: 350px;
        height: 20px;
        margin: 0;
        padding: 0;
        background-color: #FFD86C;
        text-align: center;
        border-radius: 10px 0 10px 0;
    }

    .contact_box {
        float: left;
        height: 170px; width: 352px;
        margin: 5px;
        border: 1px solid #FFD86C;
        background-color: #DDE4E8;
        border-radius: 10px 0 10px 0;
/*        overflow: auto;*/
    }

    .contact_list {
        overflow: auto;
        width: 99%;
        height: 300px;
    }

    .normal_text, .normal_text:hover {
        color: #000;
        text-decoration: none;
        font-size: 12px;
    }

    .ui-row {
        line-height: 35px;
    }

    .ui-column1 {
        position: absolute;
        left: 180px;
        padding-top: 7px;
    }

    .ui-column2 {
        position: absolute;
        left: 480px;
        padding-top: 7px;
    }

    .ModalSelect {
        z-index: 555 !important;
        /*other css*/
    }

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

        .toolbar > div {
            display: inline-block;
            margin: 3px; 
            /*margin-bottom: 15px;*/
        }

    @media only screen and (min-width: 512px) { /*desktop only*/
        .toolbar > div.textbox-select {
            position: relative;
            top: 18px;
        }
    }

    .closeEl {
        float: right;
        margin-right: 5px;
    }

    @media only screen and (max-width: 512px) {
        .modalPopup {
            max-width: 95% !important
        }

            .modalPopup > input {
                max-width: 95% !important
            }

        .param {
            padding: 10px
        }

            .param::after {
                content: "\A\A"
            }

            .param > div {
                float: left;
                width: 100%;
                margin-bottom: 15px;
            }

            .param > .button {
                width: 100% !important
            }
    }