/*
    Document   : common
    Created on : May 13, 2013, 5:11:46 PM
    Author     : Beny Setioko
    Description:
        This stylesheet contains style for all elements in (almost) every page of the application
*/

.hideByVisual {
    visibility: hidden;
}

.hideByDisp {
    display: none !important;
}

* {
    outline: none;
    margin: 0;
    padding: 0;
}

:focus {outline:none;}
::-moz-focus-inner {border:0;}

body {
    margin: 0 auto;
    padding: 0;
    background-color: #001B34;
    width: 100%;
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

.cmn-btn {
    width: 210px;
    margin: 0 0 20px 0;
    border:1px solid #cacaca;
    -webkit-box-shadow: #B4B5B5 2px 2px 2px  ;
    -moz-box-shadow: #B4B5B5 2px 2px 2px ;
    box-shadow: #B4B5B5 2px 2px 2px  ;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;border-radius: 3px;
    font-size:16px;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    padding: 5px 5px 5px 5px;
    text-decoration:none;
    display:inline-block;
    color: #666666;
    background-color: #F3F3F3; background-image: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#CCCCCC));
    background-image: -webkit-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: -moz-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: -ms-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: -o-linear-gradient(top, #F3F3F3, #CCCCCC);
    background-image: linear-gradient(to bottom, #F3F3F3, #CCCCCC);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F3F3F3, endColorstr=#CCCCCC);
    position: inherit;
    vertical-align: middle;
}

.cmn-btn:hover {
    border:1px solid #b3b3b3;
    /*color: #636363;*/
    color: #333333;
    background-color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
    background-image: -webkit-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: -moz-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: -ms-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: -o-linear-gradient(top, #FFFFFF, #CCCCCC);
    background-image: linear-gradient(to bottom, #FFFFFF, #CCCCCC);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#CCCCCC);
}

.cmn-btn:active {
    padding: 7px 5px 3px 5px;
}

.cmn-btn:disabled {
    border:1px solid #b3b3b3;
    color: #333333;
    background-color: #FFFFFF;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#AFAFAF), to(#AFAFAF));
    background-image: -webkit-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: -moz-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: -ms-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: -o-linear-gradient(top, #AFAFAF, #AFAFAF);
    background-image: linear-gradient(to bottom, #AFAFAF, #AFAFAF);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#AFAFAF, endColorstr=#AFAFAF);
    padding: 5px 5px 5px 5px;
}

.cmn-text-input {
    padding: 2px 5px 2px 5px;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    width: 400px;
}

.cmn-file-input {
    padding: 5px 10px 5px 10px;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #333333;
    border: 1px solid #999999;
    border-radius: 10px;
}

.cmn-select-input {
    padding: 2px 5px 2px 5px;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    width: 420px;
}

.cmn-select-input option {
    padding: 2px 5px 2px 5px;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    min-width: 400px;
}

/*---------------------------------------------- MESSAGE BAR ---------------------------------------------*/

#msg {
    width: 1298px;
    background-color: #ff6633;
    border: 1px solid #ff0000;
    margin: 10px 0 0 0;
    position: fixed;
    top: 71px;
    z-index: 3;
    display: none;
    box-sizing: border-box;
}

#msg #msg-content {
    width: 1255px;
    line-height: 30px;
    color: #ffffff;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    text-align: center;
    display: inline-block;
    cursor: default;
    vertical-align: middle;
}

#msg #close-btn {
    width: 25px;
    height: 25px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}

/*---------------------------------------------- END OF MESSAGE BAR ---------------------------------------------*/

#screen-cover {
    background-color: #000000;
    opacity: 0.8;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9900;
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------- MESSAGE DIALOG ---------------------------------------------- */

#msg-box {
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    position: fixed;
    top: 30px;
    left: 50%;
    min-width: 750px;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    margin: 0 0 5px 0;
    text-align: center;
    z-index: 9901;
    display: none;
}

#msg-dialog {
    text-align: left;
    border: 1px solid #666666;
}

#msg-dialog .member {
    padding: 10px 10px 10px 10px;
    cursor: default;
}

#msg-dialog-title {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 4px 0 4px 0;
    background-color: #aaaaaa;
}

#msg-dialog-content {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #666666;
    display: inline-block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* ---------------------------------------------- END OF MESSAGE DIALOG ------------------------------------------ */

/* ----------------------------------------------- CONFIRMATION DIALOG ------------------------------------------- */

#confir-box {
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    position: fixed;
    top: 30px;
    left: 50%;
    min-width: 750px;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    margin: 0 0 5px 0;
    text-align: center;
    z-index: 9901;
    display: none;
}

#confir-dialog {
    text-align: left;
    border: 1px solid #666666;
}

#confir-title {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 4px 0 4px 0;
    background-color: #aaaaaa;
    cursor: default;
}

#confir-msg {
    box-sizing: border-box;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #666666;
    display: inline-block;
    text-align: center;
    padding: 30px 10px 20px 10px;
    width: 100%;
    cursor: default;
}

#confir-btn-box {
    box-sizing: border-box;
    padding: 10px 0 20px 0;
    width: 100%;
    text-align: center;
}

#confir-btn-box input[type="button"] {
    margin: 20px 20px 20px 20px;
}

/* -------------------------------------------- END OF CONFIRMATION DIALOG --------------------------------------- */

/* ----------------------------------------------- PROCESS LOADER ------------------------------------------- */

#fullscreen-loader-box {
    background-color: #ffffff;
    border: 1px solid #aaaaaa;
    border-radius: 10px;
    position: fixed;
    top: 30px;
    left: 50%;
    min-width: 750px;
    min-height: 200px;
    transform: translate(-50%, 0);
    padding: 20px 20px;
    margin: 0 0 5px 0;
    text-align: center;
    z-index: 9901;
    display: none;
}

#fullscreen-loader-ctn {
    text-align: center;
    border: 1px solid #666666;
}

#fullscreen-loader-title {
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 4px 0 4px 0;
    background-color: #aaaaaa;
    cursor: default;
}

#fullscreen-loader-msg {
    box-sizing: border-box;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 18px;
    color: #666666;
    display: inline-block;
    text-align: center;
    padding: 30px 10px 20px 10px;
    width: 100%;
    cursor: default;
}

#fullscreen-loader-img {
    margin: 20px 0 20px 0;
}

/* -------------------------------------------- END OF PROCESS LOADER ------------------------------------------- */

.cmn-text {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
}

.green-text {
    color: #339900 !important;
}

.red-text {
    color: #ff0000 !important;
}

.orange-text {
    color: #ff6633 !important;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.bg-subtle-blue {
    background-color: #a9dafb;
}

.bg-subtle-red {
    background-color: #ffc0df;
}

.bg-subtle-green {
    background-color: #b1ebd6;
}

.bg-subtle-grey {
    background-color: #e3e3e3;
}

.back-to-top {
    cursor: default;
    float: right;
}

.back-to-top:hover {
    cursor: pointer;
    color: #0099ff;
}

#process-indicator {
    display: none;
    padding: 20px 0 0 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

#process-indicator progress {
    width: 400px;
    height: 25px;
}

#footer {
    margin: 10px auto 0;
    color: #ccc;
}

#copyright {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    margin-bottom: 10px;
}

#result-page-nav {
    display: none;
    padding: 10px 0 10px 0;
    text-align: center;
}

#result-page-nav .result-page-idx {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    color: #666666;
    padding: 4px 15px 4px 15px;
    text-align: center;
}

#result-page-nav .result-page-idx:hover {
    color: #333333;
    padding: 3px 14px 3px 14px;
    border: 1px solid #0099ff;
    background-color: #33ccff;
    cursor: pointer;
}

#result-page-nav .active-result-page-idx {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    color: #ffffff;
    padding: 4px 15px 4px 15px;
    background-color: #0099cc;
    cursor: default;
}

.result-arrow {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #666666;
    padding: 4px 15px 4px 15px;
    text-align: center;
}

.result-arrow:hover {
    color: #333333;
    padding: 3px 14px 3px 14px;
    border: 1px solid #0099ff;
    background-color: #33ccff;
    cursor: pointer;
}

#search-result-statistics {
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
    font-size: 15px;
    color: #666666;
    padding: 20px 0 0 0;
    text-align: center
}

.row-shading {
    background-color: #CCCCCC;
}

#bodyAdmin {
    margin: 0 auto;
    padding: 0;
    background-color: #333333;
    width: 100%;
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
    font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

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

#top-bar {
    background: #666666;
    padding: 8px;
    margin: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    border-bottom: 1px #333333 solid;
}

#top-bar-title {
    float: left;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    margin: 0px 20px 0px 0px;
}

#local-date-time {
    float: right;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    margin: 0px 20px 0px 0px;
}

#the-day {
    color: #ff9900;
    font-weight: bold;
}

#the-date-time {
    color: #ffffff;
}



/* -------------------- main-container -------------------- */
#main-wrap {
    width: 960px;
    min-height: 100px;
    margin: 30px auto 0;
    padding: 5px 0;
    background-color: #fefefe;
    border: 3px solid #00b4e5;
    border-top: none;
    border-bottom: 1px solid #00b4e5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main-cont {
    width: 100%;
    margin: 10px auto 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main-cont-title {
    background-color: #00b4e5;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    padding: 5px 15px 6px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
} 

.main-cont-body {
    margin: 0;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: normal;
    color: #333;    
    line-height: normal;
}

.main-cont-body p, .main-cont-body table {
    font-size: 14px;
    color: #333;
    text-align: justify;
}

#main-foot {
    clear: both;
    width: 960px;
    background-color: #fefefe;
    margin: 3px auto;
    padding: 12px;
    text-align: center;
    border: 3px solid #00b4e5;
    border-top: 1px solid #00b4e5;
    border-radius: 0 0 10px 10px;
    line-height: 25px;
    box-sizing: border-box;
}


#main-item-rev {  
    width: 1200px;
    margin: 30px auto 0px;
    overflow: hidden;
}

#main-item-rev:after {
    clear: both;
}
/* -------------------- end of main-container -------------------- */

/* ----------------------------- login form --------------------------------- */
.login-button {
    margin: 20px 10px 0 0;
    padding: 5px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;    
    cursor: pointer;
}

.btn-common {
    padding: 2px 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
}

#login-failed {
    background-color: #f37869;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px;
    color: #fff;
    width: 95%;
    text-align: center;
    display: none;
}

/*---------------------------- table -----------------------------------------*/
.list-adm {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin: 0 auto;
}

.list-adm thead tr th, .list-adm tbody tr td {
    padding: 1px 4px;
    border: 1px solid #ade8ff;
}

.list-adm thead tr th {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    padding: 4px 2px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #2574AD;
}

.list-adm tbody tr td {
    font-size: 12px;
    font-weight: normal;
    color: #333;
    vertical-align: top;
}

.list-adm tbody tr:nth-child(even) {
    background-color: #f2f9fe;
}

.list-adm tbody tr:hover {
    background-color: #f0f9ff;
    cursor: pointer;
}

/*----------------------------- form setting + button-----------------------------------*/
.warning-note {
    color: #f88686; 
    font-size: 12px; 
    font-weight: normal; 
    font-style: italic;
    text-align: right;
    display: block;
}

.input-label {
    font-size: 16px;
    color: #333333;
    margin-right: 15px;
    text-align: left;
}

.input-field {
    font-size: 16px;
    color: #555555;
    padding: 3px 6px; 
    border: 1px solid #a0a0a0; 
    background: #efefef;
}

.input-field:focus {
    border: 1px solid #66ccee; 
    background: #ffffff;
}

.input-back-blue {
    background: #efefef;
    border: 1px solid #dfdfdf;
}

.select-field {
    cursor: pointer;
    padding: 6px 10px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.select-field option {
    padding: 0 0 0 10px;
    cursor: pointer;
}

.select-field-intb {
    cursor: pointer;
    padding: 0 10px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.select-field-intb option {
    padding: 0 0 0 10px;
    cursor: pointer;
}

.btn-submit {
    padding: 4px 20px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 3px auto;
}

.up-arrow {
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*For IE support*/
}

.down-arrow {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*For IE support*/
}

.div-edit {
    float: right;
    /*display: block;
    vertical-align: top;*/
    margin-top: 0px;
}

.btn-edit {
    font-size: 12px;
    font-weight: bold;
    padding: 0px 10px;
    cursor: pointer;
}

.btn-edit-img {
    background-image: url('../img/edit.png');
    background-position: center;
    background-size: 10px 10px;
    background-repeat: no-repeat;
}

.btn-edit:active {
    text-shadow: -1px -1px 0 rgba(255,255,255,255);
}

.flat-button, .flat-button-grey, .flat-button-light-blue, .flat-button-light-red, .flat-button-none  {
    background: #2574AD;
    width: 20px;
    height: 20px;
    box-shadow: none;
    border: none;
    float: left;
    cursor: pointer;
    margin-left: 2px;
}

.flat-button:active, .flat-button-grey:active, .flat-button-light-blue:active, .flat-button-light-red:active, 
.flat-button-none:active {
    transform: translateY(-1px);
}

.flat-button:hover {
    background-color: #2574AD;
    box-shadow: -3px -3px -3px #ccc;
}

.flat-button-grey:hover {
    background-color: #ccc;
    box-shadow: -3px -3px -3px #ccc;
}

.flat-button-light-blue:hover {
    background-color: #b6e6e6;
    box-shadow: -3px -3px -3px #ccc;
}

.flat-button-light-red:hover {
    background-color: #ff9999;
    box-shadow: -3px -3px -3px #ccc;    
}

.flat-button-none:hover {
    background-color: transparent;
    box-shadow: -3px -3px -3px #ccc;
    transform: translateY(1px);
}

.icon-search {
    background: transparent url(../img/src.png) no-repeat;
    background-size: 18px 18px;
    background-position: center;
}

.icon-close {
    background: url(../img/close3.png) no-repeat transparent;
    background-size: 16px 16px;
    background-position: center;
}

.icon-right-arrow {
    background: url(../img/right_sign.png) no-repeat transparent;
    background-size: 16px 22px;
    background-position: center;
}

.icon-edit1 {
    background: url(../img/write.png) no-repeat transparent;
    background-size: 20px 20px;
    background-position: center;
}

.icon-edit2 {
    background: url(../img/editx.png) no-repeat transparent;
    background-size: 22px 18px;
    background-position: center;
}

.icon-edit1:hover, .icon-edit2:hover, .icon-close:hover, .icon-right-arrow:hover, .icon-search:hover {
    transform: translateY(-2px);
    color: #ccffcc;
}

.input-field-adm {
    background: #cfcfcf;
    border: 1px solid #afafaf;
    float: left;
    margin: 0;
    padding: 0;
    cursor: pointer;
    height: 25px;
}

.input-field-adm:focus {
    border: 1px solid #66ccee; 
    background: #fff;    
}

.black-font { color: #333; text-decoration: none; }

.grey-font { color: #777; }

.grey2-font { color: #999; }

.green-font { color: green; }

.green2-font { color: #00cc66; }

.green3-font { color: #00cc33; }

.red-font { color: red; }

.red2-font { color: #ff3366; }

.red3-font { color: #ff0033; }

.orange-font { color: #ff7700; } 

.blue-font { color: blue; }

.blue3-font { color: #00b8ce; }

.blue2-font { color: #2574ad; }

.btn-float-right { float: right; }
.btn-float-left { float: left; }
.btn-center { text-align: center; }

.loading {
    margin-top: 10px;
    border: 4px solid #bde8ff;
    border-radius: 6px;
    box-shadow: 4px 4px 6px #555;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    padding: 0;
    margin: 0;
}


/*progress bar*/
#loading-box {
    display: none;
    background: #fff;
    width: 100%;
    margin: 0px auto 10px;
    padding: 0 0;
    border: 4px solid #bde8ff;
    border-radius: 6px;
    box-shadow: 4px 4px 6px #555;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.img-progress {
    background: #fff url(../img/loadingX.gif) no-repeat;    
    height: 50px;
    width: 165px;
}

.bar {
    background: #fff;
    margin: 0 0 0 0;
    height: 13px;
    width: 100%;
    border-top: 2px solid #bde8ff; /*#00cc99;
    border-radius: 4px;*/
}

.progress {
    background-color: #00ffcc;
    width: 0.1%;
    height: 98%;
    border: none;
}

.error-msg {
    background-color: #f37869;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 14px;
    color: #fff;
    width: 96%;
    text-align: center;
    /*display: none;*/
}