@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto+Condensed:300,300i,400,400i&subset=latin-ext&display=swap');
body{ font-family: 'Open Sans', sans-serif; font-weight: 400; font-style: normal; font-size: 13px; background: url("../img/page_bg.png") top center no-repeat fixed; background-color: #ccc; }


ul{ margin: 0; padding: 0; list-style: none; }
#page-nav-tab{ min-height: 300px; }

.noti{height: 100%; cursor: pointer;}
.noti .noti_icon{ width: 30px; text-align: center; }
.noti .noti_icon i {font-size:23px; margin-right: 5px;}
.noti .noti_icon i.fa-exchange-alt {color:#da2e2e;}
.noti .noti_icon i.fa-comment {color:#56d226;}

.attachment{ margin-right: 5px; padding: 7px; font-size: 12px;}
.attachment i{ cursor: pointer; margin-left: 5px;}
.attachment .attachmentDelete{color:#9d9d9d;}
.attachment .attachmentDelete:hover{color:#5c5c5c;}

.animated{ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.title1{ margin: 15px 0 15px 0; color:#cc3300; font-weight: bold; border-bottom: 1px solid #a1a1a1; padding-left: 10px; width: 100%; }

footer{ padding: 0; border-top: 5px solid #a6c307; }
footer .footer-container{ background-color: white; font-size: 1.2em; padding: 30px 15px 15px 15px; text-align: center;}
footer .company_name{ text-align: center; font-size: 20px; margin: 15px 0 10px 0; color: #777; }
footer a{ text-decoration: none; color: gray;}
footer a:hover{ color: #484848; }

.box-shadow{-webkit-box-shadow: 0px 0px 5px 0px rgba(148,148,148,1); -moz-box-shadow: 0px 0px 5px 0px rgba(148,148,148,1); box-shadow: 0px 0px 5px 0px rgba(148,148,148,1);}

/*  ---  */
.shop_table{ width: 100%; border-spacing: 0px; border-collapse: separate;  empty-cells: show; border-left: 1px solid #a8a8a8; border-top: 1px solid #a8a8a8; border-bottom:  1px solid #a8a8a8; }
.shop_table thead tr th, .shop_table tbody tr td, .shop_table tfoot tr td{ padding: 5px; border-right: 1px solid #a8a8a8; }
.shop_table thead tr th{ background: #d0e6d6; text-align: center; }
.shop_table tbody tr:first-child td, .shop_table tfoot tr:first-child td{ border-top: 1px solid #cc3300; }
.shop_table tbody tr td, .shop_table tfoot tr td{ border-bottom: 1px solid #a8a8a8; }
.shop_table tbody tr:last-child  td, .shop_table tfoot tr:last-child  td{ border-bottom: none; }
.shop_table tbody tr:nth-child(even){background: #d7e7fd;}

/*  ---  */
.table-btn{ margin:0 3px 0 3px; padding: 0 .5rem; font-size: 0.9em; }
.open_tab_btn { margin:5px; }
.open_tab_selector {}
/*  ---  */
.top_bar{/*background: #545b61;*/ background: #A6C307; height: 60px; position: fixed; width: 100%; box-sizing: border-box; z-index: 100; -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);}
.top_bar #toggle_menu{ float: right; line-height: 30px; font-size: 1.8em; padding: 0 10px 0 10px; color: #545b61; cursor: pointer; }
.top_bar #toggle_menu:hover{ color: #ccc; }
.top_bar .logo_wrapper{
    text-align: center;
    max-width: 300px;
    padding: 15px 10px 15px 10px;
    background-color: white;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
}
/*  ---  */
.main_area_shop{min-height: 300px; background-color: white; padding-bottom: 100px; }
.main_area{ padding: 68px 10px 50px 10px; background-color: white; }
.main_area.closed{ margin-left: 0px; }
.main_area.opened{ margin-left: 300px; }
/*  ---  */
.left_menu{font-size: 1.1em; width: 300px; color: #545b61; z-index: 100; position: fixed; top: 60px; background-color: #dee0e3; height: 100%; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5); }
.left_menu.opened{ left: 0px; }
.left_menu.closed{ left: -350px; }

.left_menu .nav_ul{ margin-top: 0; padding: 0; display: block; z-index: 100; width: 50px; }
.left_menu .nav_ul li a{ color :#999999; display: block; padding: 8px 0 0 5px; height: 40px; width: 100%; box-sizing: border-box; border-bottom: 1px solid #c7c7c7; text-align: center; position: relative; }
.left_menu .nav_ul li a i{ font-size: 21px; }
.left_menu .nav_ul li a .badge{ position: absolute; top: 5px; right: 2px; }
.left_menu .nav_ul li.active_item{ border-left: 4px solid #3192e1; background-color: #ebebee; color:#2d353c; }
.left_menu .nav_ul li.active_item a{ color:#2d353c; }
.left_menu .nav_ul li:hover{ background-color: #ebebee; color:#2d353c; }
.left_menu .nav_ul li:hover > a{ color:#2d353c; }


.left_menu .nav_contents{ position: absolute; top: 0; left: 50px; right: 0px; display: none; background-color: #ebebee; height: 100%; overflow-y: auto; border-left: 1px solid #c7c7c7; }
.left_menu .nav_contents .divider { display: block; height: 1px; margin: 5px 0; overflow: hidden; background-color: #c7c7c7; }
.left_menu .nav_contents .nav_content{ color: #545b61;}
.left_menu .nav_contents .nav_content_title{ display: block; height: 40px; width: 100%;	border-bottom: 1px solid #c7c7c7; padding: 8px 0 0 10px; text-align: left; font-size: 1.1em; }
.left_menu .nav_contents .nav_content_title .buttons{position: absolute; right: 5px; top: 8px; }
.left_menu .nav_contents .nav_content_title .buttons i {cursor: pointer; padding: 0 5px 0 5px;}

/*  ---  */
.ul_list{ min-width: 180px; }
.ul_list li{ font-size:13px; display: block; color:#8c8e90; border-bottom: 1px solid #c7c7c7;}
.ul_list li i{ font-size:14px; margin-right: 3px; }
.ul_list li a{ font-size:13px; display: block; color:#8c8e90; padding: 5px 5px 5px 7px;}
.ul_list li a:hover{ background-color: #dee0e3; color: #545b61; text-decoration: none; }
.ul_list li .focus{ border-left: 5px solid #28a745; }
/*  ---  */
.accordion_menu{ min-width: 180px; }
.accordion_menu li i{  margin-right: 3px; width: 18px; text-align: center; }
.accordion_menu li a{  display: block; color:#8c8e90; padding: 5px 5px 5px 7px;  border-bottom: 1px solid #c7c7c7;}
.accordion_menu li a.active{ color:#3192e1; }
.accordion_menu li a:hover{ background-color: #dee0e3; color: #545b61; text-decoration: none; }
.accordion_menu li a .sub_icon{ float: right; line-height: 20px; }
.accordion_menu .inner { margin-left: 0.5em; overflow: hidden; display: none; border-left: 1px solid #c7c7c7; }
/*  ---  */
.formTable {width: 100%;border-spacing: 0px;border-collapse: separate;}
.formTable tr:nth-child(even){background: #d7e7fd;}
.formTable td, .formTable th{padding: 5px 15px 5px 5px;}
.formTable td:nth-child(1), .formTable th:nth-child(1){width: 20%;border-right: 1px silver solid;font-weight: bold;white-space: nowrap;overflow: hidden;text-overflow:ellipsis;}
.formTable td:nth-child(1) r , .formTable th:nth-child(1) r{font-weight: bold;color: #cc3300;padding-left: 5px;}
.formTable td:nth-child(2) , .formTable th:nth-child(2){padding-left: 10px; /*width: 80%;*/}

.nonFormTable{width: auto; border-spacing: 0px;border-collapse: separate;}
.nonFormTable tr:nth-child(even){background: none !important;}
.nonFormTable td, .nonFormTable th{padding: 5px;}
.nonFormTable td:nth-child(1), .nonFormTable th:nth-child(1){width: auto !important; border-right: none !important;font-weight: normal !important;}
.nonFormTable td:nth-child(2) , .nonFormTable th:nth-child(2){width: auto !important;}

/*  ---  */

.evenTable {width: 100%;border-spacing: 0px;border-collapse: separate;}
.evenTable tr:nth-child(even){background: #d7e7fd;}
.evenTable td, .evenTable th{padding: 5px 15px 5px 5px; border-right: 1px silver solid;}
.evenTable td:last-child, .formTable th:last-child{border-right:none;}

/*  ---  */
.overview-box{ margin-bottom: 10px; padding-top: 6px; color: white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 100%; }
.overview-box .overview-box-icon{ text-align: center; font-size: 48px; }
.overview-box .overview-box-count{ font-size: 36px; font-weight: bold; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); margin: 8px 10px 0 0; display: inline-block; }
.overview-box .overview-box-name{ font-size: 20px; margin: 5px 0 0 0; }

.overview-box .overview-box-footer{ text-align: center; padding: .2em 0; }
.overview-box.blue{ background-color: #68bafc; }
.overview-box.blue .overview-box-footer{ background-color: #3192e1; }
.overview-box.orange{ background-color: #ff9c59; }
.overview-box.orange .overview-box-footer{ background-color: #d97c3e; }
.overview-box.pink{ background-color: #f97bb2; }
.overview-box.pink .overview-box-footer{ background-color: #e42a7b; }
.overview-box.yellow{ background-color: #ffd37a; }
.overview-box.yellow .overview-box-footer{ background-color: #dfb051;}

.overview-box.non_stn{ background-color: #a1a1a1; }
.overview-box.non_stn .overview-box-footer{ background-color: #7b7b7b;}
.overview-box.ok_stn{ background-color: #28a745; }
.overview-box.ok_stn .overview-box-footer{ background-color: #038922;}
.overview-box.warn_stn{ background-color: #ffc107; color: black; }
.overview-box.warn_stn .overview-box-footer{ background-color: #ffa406;}
.overview-box.alarm_stn{ background-color: #dc3545; }
.overview-box.alarm_stn .overview-box-footer{ background-color: #c21c2c;}
/*  ---  */


#permissionDiv{ width: 100%; overflow: hidden; margin: 0; padding: 0; }
#permissionDiv li { list-style: none; line-height: 35px; }
#permissionDiv ul li { margin-left: 15px; border: 1px solid silver; border-top:none; }
#permissionDiv ul .hover:hover { background: #eaeaea; color: black; }
#permissionDiv .root{ margin-top: 15px; color: #333; font-weight: bold; text-shadow: 0px 1px 0px rgba(255,255,255,0.7); }
/*  ---  */
.box_shadow{ -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); }
.list_box{ padding: 10px; margin: 8px 0 12px 0; background-color: white; width: 100%; }
.list_box .icon{ font-size: 3em; text-align: center; }

/* --- */
.home_info{
    padding: 15px 0 15px 0;
    margin: 0 15px 20px 15px;
}

.checkout_header{ font-family: 'Roboto Condensed', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; border-bottom: 1px solid #989898; background-color: white; padding: 15px 0 15px 0;}
.checkout_header .logo{ padding: 10px; text-align: left;}
.checkout_header .logo img{ max-height: 50px; cursor: pointer;}
.checkout_header .top-slogan{ text-align: right; font-size: 20px; font-weight: 300; font-style: italic; color: #777;}

/* --- */

.messageWiewBox{ margin-bottom: 15px; }
.messageWiewBox .header{ position: relative; }
.messageWiewBox .header i{ width: 30px; padding: 0 5px 0 0px; }
.messageWiewBox .header .info{ color: white; padding: 3px; padding-left: 35px;}
.messageWiewBox .header .info i{ cursor: pointer; position: absolute; left: 0; top: 0; padding: 6px 5px 6px 5px; background-color: white; color: black; text-align: center; }

.messageWiewBox .header .cc{ padding: 3px;}
.messageWiewBox .header .attachments{ padding: 3px; }
.messageWiewBox .header .attachments a{ color:#4f4f4f;}
.messageWiewBox .header .attachments a:hover{ color:#007bff;}

.messageWiewBox .body{ }
.messageWiewBox .body .text_msg{ display: none; max-height: 300px; padding: 10px;}
.messageWiewBox .body .html_msg{ display: block; max-height: 315px; padding: 10px;}
.messageWiewBox .body .html_msg iframe{ height: 300px; width: 1px; min-width: 100%; *width: 100%; border: none; }


.messageWiewBox.client > .header .info{ background-color: #4bab17; }
.messageWiewBox.client > .header .cc{ border-bottom: 1px solid #4bab17;}
.messageWiewBox.client > .header .attachments{ border-bottom: 1px solid #4bab17;}
.messageWiewBox.client{ border: 1px solid #4bab17; }

.messageWiewBox.operator > .header .info{ background-color: #2382b8; }
.messageWiewBox.operator > .header .cc{ border-bottom: 1px solid #2382b8;}
.messageWiewBox.operator > .header .attachments{ border-bottom: 1px solid #2382b8;}
.messageWiewBox.operator{  border: 1px solid #2382b8; }

.messageWiewBox.note > .header .info{ background-color: #cc3300; }
.messageWiewBox.note > .header .cc{ border-bottom: 1px solid #cc3300;}
.messageWiewBox.note > .header .attachments{ border-bottom: 1px solid #cc3300;}
.messageWiewBox.note{  border: 1px solid #cc3300; }

/* --- */
.checkbox{margin: 5px 0 5px 0;}
.checkbox.inline{display: inline-block;}
.checkbox label {margin-bottom: 0;}
.checkbox label:after { content: ''; display: table; clear: both; }
.checkbox .cr { background-color: white; position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; }
.checkbox .cr .cr-icon { position: absolute; font-size: .8em; line-height: 0; top: 50%; left: 18%; }
.checkbox label input[type="checkbox"] { display: none; }
.checkbox label input[type="checkbox"]+.cr>.cr-icon { opacity: 0; }
.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon { opacity: 1; }
.checkbox label input[type="checkbox"]:disabled+.cr { opacity: .5; }
/* --- */
.radio{margin: 5px 0 5px 0;}
.radio.inline{display: inline-block;}
.radio label {margin-bottom: 0;}
.radio label:after { content: ''; display: table; clear: both; }
.radio .cr { background-color: white; position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: 50em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; }
.radio .cr .cr-icon { position: absolute; font-size: .8em; line-height: 0; top: 50%; left: 25%; font-size: 0.6em; }
.radio label input[type="radio"] { display: none; }
.radio label input[type="radio"]+.cr>.cr-icon { opacity: 0; }
.radio label input[type="radio"]:checked+.cr>.cr-icon { opacity: 1; }
.radio label input[type="radio"]:disabled+.cr { opacity: .5; }


/* --- */
#progress{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 5000; }
#progress #progress_container{ width: 200px; position: fixed; top:25%; left: 50%; margin-left: -100px; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; z-index: 1000; -webkit-box-shadow: 0px 0px 6px 0px rgba(50, 50, 50, 0.55); -moz-box-shadow:    0px 0px 6px 0px rgba(50, 50, 50, 0.55); box-shadow:         0px 0px 6px 0px rgba(50, 50, 50, 0.55); }


/* page Preloader */
.preloader { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #fff; z-index: 999999; }
.preloader-spinner { color: #3192e1; font-size: 3em; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; position: absolute; }

.autocomplete-suggestions { width: auto !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; overflow: hidden; cursor: pointer; line-height: 25px; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #007bff; color:white;}
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }