@charset "utf-8";

/* General */
html, body { height: 100%; margin:0; padding:0; }
#body     { min-height: 100%; height: 100%; position: relative; overflow: hidden; }
body { margin:0; padding:0; background: #ffffff; color:#333; font-family: Arial, Verdana, Helvetica, sans-serif; font-size:12px;}
img { border:0; }
select { font-size:12px;}
input { font-size:12px;}
hr { height:1px; border-top: 1px solid #e5e5e5; border-bottom: 0; border-left: 0; border-right: 0; padding: 0; margin: 0;}
form {margin:0;}
h1 { margin: 0 0 .5em 0;}
p { margin: 0 0 10px 0;}

table.data { border-collapse: collapse; width: 100%; border: 1px solid #ddd; margin: 0 0 10px 0; }
table.data th { padding: 5px 5px; border-bottom: 1px solid #ddd; white-space: nowrap; }
table.data tr { background: #fff; cursor: pointer; }
table.data td { vertical-align: top; padding: 10px 5px;  border-bottom: 1px solid #ddd; }
table.data tbody tr:hover { color: #000 !important; box-shadow: 0 0 3px rgba(0, 0, 0, .2); }

table.form { border-collapse: collapse; width: 100%; margin: 0 0 10px 0; }
table.form th { background: #f0f0f0; vertical-align: middle; border: 1px solid #ddd; padding: 10px 5px; width: 100px; font-weight: normal; text-align: left; color: #666; white-space: nowrap; }
table.form text-input { height: 2.3em; }
table.form td { background: #fff; vertical-align: top; padding: 10px 5px; border: 1px solid #ddd; }
table.form .submit { background: #f0f0f0; }

.ui-autocomplete { max-height: 100px; overflow-y: auto; overflow-x: hidden; }

table.driver-selection { width: auto; }
table.driver-selection td { padding:0; border: none; width: auto; vertical-align: middle; }
table.driver-selection td select { width: 200px; }

/* broadcast */
#select-all { margin-top: 10px; }

.do-map { width: 300px; padding: 10px; background: #f0f0f0;  }

.phone, .fax {display: inline-block; background: #f0f0f0 url(../img/phone.png) no-repeat; margin: 5px 0 0 0; border-radius: 5px; padding: 2px 2px 2px 15px;}
.phone { background: #f0f0f0 url(../img/phone.png) center left no-repeat; background-size: auto 70%; }
.fax { background: #f0f0f0 url(../img/fax.png) center left no-repeat; background-size: auto 70%; }

/* help */
.help { cursor: pointer; background: url(../img/help.png); height: 12px; width: 12px; display: inline-block; }

tr.processing { background: #fafafa !important; color: #666 !important; }
tr.archived { background: #fafafa !important; color: #666 !important; }
tr.archived:hover { background: #fff !important; color: #000 !important; }

.clear { clear: both; }
.hide { display: none; }

/* link */
a:link {color:#03388c; text-decoration: none;}
a:visited {color:#03388c; text-decoration:underline;}
a:hover {color:#195cc6; text-decoration:underline;}
a.highlight { font-weight: bold; }

a.k-button {color:#fff; text-decoration: none;}

#topmenu { position: absolute; left: 200px; top: 10px;}

#topmenu li { display: inline; margin: 0 10px 0 0; }
#topmenu li a { color: #666; font-size: 1.2em; }
#topmenu li a:hover { color: #000; }

#sidemenu li { cursor: pointer; }

#profile-popup-menu { margin-top: -10px; margin-bottom: 20px;}
#logout { background: #f0f0f0; border-top: 1px solid #ddd; padding: 5px 10px; margin: -10px; margin-top: 10px; text-align: right; }

/* Font */
span.header_title {font-size:18px; font-weight:bold;}
span.title {font-size:18px; font-weight:bold;}
span.description {font-size:11px; color:#aaaaaa;}
span.report_desc {font-size:9px; color:#666666;}

/* Input */
input#header_search {width:300px;}
input#celebrity {width:300px;}
input.add_new {width:300px;}
input.quiz_category {width:200px;}
input.login {width:200px;}

/* button */
.ui-button, .ui-button-text { color: #333 ; font-weight: normal !important; }/*off the important in color because will impact button at kendo button*/
.ui-button.ui-state-hover { box-shadow: 0 0 10px rgba(0, 0, 0, .3); }

button, .button { display : inline-block; cursor : pointer; border-style : solid; border-width : 1px; border-radius : 5px; padding : 3px 10px; box-shadow : 0 0 2px rgba(0,0,0,.3); font-size : 9.5pt; font-weight : bold; color : #fff !important; text-shadow : 0 1px 2px rgba(0,0,0,.4); font-family : sans-serif; text-decoration : none; margin-bottom: 3px; }
button:hover, .button:hover { box-shadow : 0 0 3px rgba(0,0,0,.8); }
button.grey, .button.grey { border-color: #aaa; background: #aaa; background: -moz-linear-gradient(top, #aaa 0%, #777 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa), color-stop(100%,#777)); background: -webkit-linear-gradient(top, #aaa 0%,#777 100%); background: -o-linear-gradient(top, #aaa 0%,#777 100%); background: -ms-linear-gradient(top, #aaa 0%,#777 100%); background: linear-gradient(top, #aaa 0%,#777 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#777',GradientType=0 );  color: #fff; text-decoration: none;  margin-bottom: 3px; }
button.grey:hover, .button.grey:hover { border-color : #ccc; background: #ccc; background: -moz-linear-gradient(top, #ccc 0%, #777 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#777)); background: -webkit-linear-gradient(top, #ccc 0%,#777 100%); background: -o-linear-gradient(top, #ccc 0%,#777 100%); background: -ms-linear-gradient(top, #ccc 0%,#777 100%); background: linear-gradient(top, #ccc 0%,#777 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccc', endColorstr='#777',GradientType=0 );  } button.blue, .button.blue { border-color : #2989d8; background: #2989d8; background: -moz-linear-gradient(top, #2989d8 0%, #1e5799 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2989d8), color-stop(100%,#1e5799)); background: -webkit-linear-gradient(top, #2989d8 0%,#1e5799 100%); background: -o-linear-gradient(top, #2989d8 0%,#1e5799 100%); background: -ms-linear-gradient(top, #2989d8 0%,#1e5799 100%); background: linear-gradient(top, #2989d8 0%,#1e5799 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#1e5799',GradientType=0 );  } button.blue:hover, .button.blue:hover { border-color : #3da1f3; background: #3da1f3; background: -moz-linear-gradient(top, #3da1f3 0%, #1e5799 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3da1f3), color-stop(100%,#1e5799)); background: -webkit-linear-gradient(top, #3da1f3 0%,#1e5799 100%); background: -o-linear-gradient(top, #3da1f3 0%,#1e5799 100%); background: -ms-linear-gradient(top, #3da1f3 0%,#1e5799 100%); background: linear-gradient(top, #3da1f3 0%,#1e5799 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3da1f3', endColorstr='#1e5799',GradientType=0 ); text-shadow : none; margin-bottom: 3px; }

/* Textarea */
textarea.translate {width:400px; height:40px;}
textarea.news {width:300px; height:60px;}
textarea.summary {width:300px; height:40px;}
textarea.reply {width:300px; height:60px;}

/* Select box */
select#header_search {width:80px;}

/* Search */
#search-div { padding: 10px; background: #f0f0f0; border-bottom: none; border-bottom: 1px solid #ddd; min-width: 320px; }
#detail-div { padding: 10px; background: #f0f0f0; border-bottom: none; border-bottom: 1px solid #ddd; }
#search-div ul { list-style: none; padding: 0; margin: 0; }
#search-div ul li { list-style: none; padding: 3px 5px; }
#search-div ul li label { width: 100px; display: block; float: left; white-space: nowrap; }
#search-div td { padding: 3px 5px; }
#search-div-btn { float: left; background: #f0f0f0 url(../img/filter-down.png) top left no-repeat; border-top-left-radius: 10px;  border-top-right-radius: 10px; padding: 5px 10px 0 20px; cursor: pointer; }
#detail-div-btn { float: left; background: #f0f0f0 url(../img/filter-up.png) top left no-repeat; border-top-left-radius: 10px;  border-top-right-radius: 10px; padding: 5px 10px 0 20px; cursor: pointer; }
.search-div-open { background-image: url(../img/filter-up.png) !important; }
.detail-div-open { background-image: url(../img/filter-down.png) !important; }

/* filter */
.dataTables_filter, .dataTables_length { padding: 5px; float: left; }
.dataTables_filter label { white-space: nowrap; }


#search-driver { padding: 10px; background: #ddd; min-width: 150px;}
#search-driver-keyword { width: 80%; font-size: 1.2em; }
#search-driver-btn { width: 15%; font-size: 1em; color: #666; }

/* box */
.box { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; }
.input-box { display: inline-block; }
.input-box .text-input { width: 300px; }

/* LI/ UL */
/*li { list-style: url(../img/arrow.png); }*/

/* Pagination */
.pagination { float: right; padding: 3px 5px; margin: 0; }
.pagination li { display: inline; padding: 3px 5px;  border: 1px solid #bbb; background: #fff; }
.pagination li:hover { background: #f0f0f0; box-shadow: 1px 1px 3px rgba(0, 0, 0, .2); cursor: pointer; }
.pagination li a { text-decoration: none; }

/* Header */
#header { width:100%; background: #66A2CC url(../img/header.png) top left no-repeat; border-bottom: 1px solid #ddd; }
#logo { float: left; cursor: pointer; }
#settings { position: relative; background: #ffffff; float: right; margin: 8px 5px 0 0; padding: 5px 10px; border-radius: 5px; border: 1px solid #ddd; }
#profile { position: relative; float: right; margin: 8px 5px 0 0; padding: 5px 10px;}
#settings:hover { cursor: pointer; border: 1px solid #fbcb09; background: #fff;}
#profile-popup { border-radius: 5px; margin-top: 15px; background: #fff; border: 1px solid #ddd;z-index: 99; padding: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, .3); position: absolute; right: 0; white-space: nowrap; }
#profile-popup-dialog { position: absolute;  width: 13px; height: 9px; background: url(../img/profile-popup.png) no-repeat; top: -9px; right: 5px;  }

#settings { margin-right: 10px; height: 15px; width: 15px; background: #fff url(../img/settings.png) center center no-repeat; }
#settings:hover { background: #fff url(../img/settings.png) center center no-repeat; }

#top-buttons { float: right; margin-top: 3px; }

/* -- tab -- */
.tab { margin: 0; padding: 0; margin-bottom: 10px;  border-bottom: 1px solid #ddd;}
.tab li { display: inline; padding: 2px 10px; background: #f0f0f0;  border-top: 1px solid #ddd;  border-right: 1px solid #ddd;  border-left: 1px solid #ddd;}
.tab .active { background: #fff; font-size: 1em; }

/* -- login -- */
#login-wrap { display: table; width: 100%; height: 100%;  }
#login {  width: 100%; height: 100%; vertical-align: middle; text-align: center; }
#login table { margin: auto auto; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);  border: 1px solid #ddd; padding: 10px; border-radius: 5px; }
#login td { text-align: left; }
#login .text-input { font-size: 1.5em;}
#login-div { display: table-cell; vertical-align: middle; height: 100%;  }

/* -- MAIN  -- */
#container { width:auto; min-width:100%; position: relative; background: #fff; }
#leftpane { float: left; vertical-align: top; background: #f0f0f0; height: 100%; width: 20%; min-width: 100px;  position:relative; height: 100%; overflow-y: auto; }
#rightpane { background: #fff; float: left; width: 80%; text-align: left; height: 100%; overflow-y: auto; }
#content-wide { width: 100%; text-align: left; height: 100%;}
#content { padding: 10px; }
#content .title {margin-bottom:20px; overflow:hidden;}

/* -- modal -- */
.div-modal-shadow { position: absolute; top: 0; left: 0;  background: rgba( 0, 0, 0, .5 ); width: 100%; height: 100%; }
.div-modal { margin: 0 auto; width: 800px; background: #fff; padding: 20px; margin-top: 20px;}
.div-modal h2 { margin-top: 0;}
.filters { margin: 10px 0; padding: 10px; border: 1px solid #ddd; }
.div-modal .scrollable { height: 300px; overflow-y: scroll; margin-bottom: 10px; border-bottom: 1px solid #ddd; }

/*#sidemenu { padding: 10px 0 0 10px; }
#sidemenu ul  { margin: 0; padding: 0; }
#sidemenu li { list-style: none; font-size: 1.3em; }
#sidemenu ul ul { margin: 0 0 0 10px; padding: 10px 0 10px 20px; }
#sidemenu ul li ul li { list-style: url(../img/arrow.png);  font-size: .8em;}*/
#sidemenu {
	/*background: #004050;*/
	background: #7EA8CA;
	padding: 0 0 0 0;
	color: white;
	/*Some cool shadow and glow effect*/

}
/*heading styles*/
#sidemenu h3 {
	font-size: 14px;
	line-height: 34px;
	padding: 0 10px;
	margin:0;
	cursor: pointer;
	/*fallback for browsers not supporting gradients*/
	/*background: #003040;
	background: linear-gradient(#003040, #002535);*/
	background: #4682B4;
	background: linear-gradient(#4682B4, 	#3F75A2);
}
/*heading hover effect*/
#sidemenu h3:hover {
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
#sidemenu h3 span {
	font-size: 14px;
	margin-right: 10px;
}
/*iconfont styles*/
/*list items*/
#sidemenu ul  { margin: 0; padding: 0; }
#sidemenu li {
	list-style: none; font-size: 1.3em;
}
/*links*/

#sidemenu ul ul li a {
	color: white;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 15px;
	/*transition for smooth hover animation*/
	transition: all 0.15s;
}
/*hover effect on links*/
#sidemenu ul ul li a:hover {
	background: #003545;
	border-left: 5px solid lightgreen;
}
#sidemenu ul ul li a.current{
	background: #007093;
	border-left: 5px solid #2dceff ;
}
/*Lets hide the non active LIs by default*/

#sidemenu li.active ul {
	display: block;
}
#sidemenu a#pull {
    display: none;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}
.googlemap { float: right; }

textarea { height: 100px;}
textarea, .text-input { width: calc(100% - 5px); max-width: 400px; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; }
textarea:focus, .text-input:focus { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); }
.text-input { font-size: 1.2em; padding: 3px; }

.busy { background: #800; }

#driver-buttons { float: right; }

/* Div text field */
div.left {width:120px; float:left;}
div.mid {width:10px; float:left;}
div.right {width:500px; float:left; word-wrap:break-word;}
div.right_login {width:300px; float:left;}
div.hr {width:100%; height:1px; margin-bottom:10px; background:#e5e5e5; overflow:hidden;}
div.url {width:540px; word-wrap:break-word; overflow:auto;}

/* error */
.error { color:#ff0000 !important; font-weight: bold; }

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

/* error */
.error-box { background: #fff; padding: 30px; border: 1px solid #ddd; margin: 0 0 10px 0; }
.error-msg { color: #f00; }

/* location */
a.location { background: url(../img/location.png) top left no-repeat; padding: 2px 0 2px 20px; }

/* simulate buttons */
.sim { color: #aaa !important; }

/* calendar */
.cal-wrap { padding: 10px; border: 1px solid #ddd; background: #f0f0f0; }
.cal-wrap h2 { margin: 0;}
.cal-wrap #change-month { float: right; margin: 0 0 10px 0; list-style: none; }
.cal-wrap #change-month li { float: left;  list-style: none;  border: 1px solid #ddd; border-radius: 5px; padding: 3px 5px; margin: 0 0 0 5px; }
.cal { width: 100%; border-collapse: collapse; }
.cal td { border: 1px solid #ddd; text-align: center; background: #fff; }
.cal th { border: 1px solid #ddd; background: #ccc; }
.cal .no-border { border: none; background: #f0f0f0;}
.cal .busy { color:white;background: #800; }
.cal .mc { background: #FFFF00; }
.cal .el { color:white;background: #800080; }
.cal .mia { background: #FA8072; }
.cal .al { background: #04B404; }
.cal .d { background: #81DAF5; }
.cal .rod { background: #959595; }
.cal td:hover { border: 1px solid #aaa; box-shadow: 0 0 5px rgba( 0, 0, 0, .3); cursor: pointer; }

.calOS { width: 100%; border-collapse: collapse; }
.calOS td { border: 1px solid #ddd; text-align: center; background: #fff; }
.calOS th { border: 1px solid #ddd; background: #ccc; }
.calOS .no-border { border: none; background: #f0f0f0;}
.calOS .busyOS { color:white;background: #800; }
.calOS .mcOS { background: #FFFF00; }
.calOS .elOS { color:white;background: #800080; }
.calOS .miaOS { background: #FA8072; }
.calOS .alOS { background: #04B404; }
.calOS .dOS{ background: #81DAF5; }
.calOS .rodOS{ background: #959595; }
.calOS td:hover { border: 1px solid #aaa; box-shadow: 0 0 5px rgba( 0, 0, 0, .3); cursor: pointer; }


.btn-calendar { float: left; }

/* timepicker */
.ui-timepicker { cursor: pointer; }


.dwnbg {padding:10px; overflow:hidden}
.dwnptc {float:left; border-radius: 5px; border:1px solid #ccc; padding: 5px; width:135px; height:135px; margin-right:6px; box-shadow:2px 2px 0px rgba(0, 0, 0, 0.3)}

/* datatables */
table.dataTable thead th { border-bottom: 1px solid #ddd !important; background-color: #fff; }
table.dataTable { border: 1px solid #ddd; }
table.dataTable tr.odd { background-color: #f0f0f0 !important; }
table.dataTable tr.even { background-color: #ffffff !important; }
table.dataTable td { padding: 8px 10px !important; }
table.dataTable tr.leave { background: #f0f0f0; color: #666; }
table.dataTable tr.leave td { }
table.dataTable span.ok, span.sync-ok { color: #080; }
table.dataTable span.no, span.sync-fail { color: #800; }
table.dataTable span.early, span.sync-fail { color: #FF8000; }
.dataTables_paginate { float: left; }
#activity_info { padding-top: 10px; }
#activity_paginate { clear: both;}
.paging_full_numbers { margin: 5px 0; }
.dataTables_info { margin-top: 3px; }
.paginate_button_disabled { background: #ddd !important; color: #aaa !important; }
.sorting_disabled { padding: 5px 0 5px 5px !important; }

/* tabs */
.ui-widget-content { background: #fff; }
.ui-tabs .ui-tabs-nav li a { color: #999; padding: .2em .5em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #F6A828; }
.ui-tabs .ui-tabs-panel { padding: 5px 3px; }

#time-now { float: right; padding-right: 10px; }

.dataTables_wrapper { min-width: 320px; background: #f0f0f0; }

  /* Footer */
  #footer { width:100%; background-color:#f5f5f5; color: #999; font-size: .8em; position: absolute; overflow:hidden; bottom: 0; border-top: 1px solid #ddd;}
  #footer a { color: #4390e6; text-decoration: none; }
  #footer_in {margin:10px; text-align:right;}
  #version {font-size: 12px; color: #1261A0; font-weight: 800;}

/* media query */
@media (max-width: 900px) {
  body { font-size: 12px; }
   #button { display: none; }
  #leftpane { display: block; width: 100%; height: auto; float: none; position: relative; }
  #rightpane { width: 100%; display: block; clear: both; width: 100%; height: auto; float: none;  position: relative; }
  #body { overflow: auto; background: #f0f0f0; }
  #footer { display: none; }
  #container { /* height: auto !important; */ }
  #sidemenu { padding: 0; }
  #sidemenu ul {  margin: 0; padding: 0; }
  #sidemenu ul li {  list-style: none; border-bottom: 1px solid #fff; padding: 8px 5px; cursor: pointer; }
  #sidemenu li:hover {  /*background: #fff; border-bottom: 1px solid #f0f0f0;*/ box-shadow: 0 0 5px rgba( 0, 0, 0, .3 ); }
  #sidemenu ul ul { display: none; list-style: circle; }
  #sidemenu ul li ul li { border: none !important; padding: 3px 5px;  font-size: 1em; }
  #sidemenu ul ul li:hover { box-shadow: none; }
  #login-page { height: 100%; }
  #login-page #container { height: 100%; }
  #search-div-btn { font-size: 1.1em; color: #999; }
  .dataTables_paginate { float: left !important; clear: both !important; }
  button, .button { clear: both; display: block; }
  #top-buttons .button { margin-bottom: 5px; }
}

@media (max-width: 600px) {
	#button { display: none; }
	body { font-size: 12px; }
	#sidemenu {  border-bottom: 0;  }
    #sidemenu ul {  display: none;  height: auto;    }
    #sidemenu a#pull {  text-indent:15px; padding-top:10px;  display: block;  height: 30px; color:white;background-color: #315B7E;  font-weight: bold;   font-family: 'PT Sans', Arial, sans-serif; font-size: 11pt;width: 100%;  position: relative;  }
    #sidemenu a#pull:after {content:""; background: url('http://media02.hongkiat.com/responsive-web-nav/demo/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px;}
 }