@import 'pdf-content.css';
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html{ font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size:10pt; line-height:1.25em; color:#555555;}
body{ background:#FFFFFF; font-family: 'Roboto', Arial, Helvetica, sans-serif;}
img {vertical-align:top;}
a { text-decoration:none; color:#5897ca; line-height: 20px; }
a:hover { text-decoration:underline;}
a img { border:0;}
ul { list-style:none;}
input, select { vertical-align:middle; font-weight:normal;}
p {padding:10px 5px; font-size: 10pt; line-height:14pt;}
tr, td {padding: 5px; }

.text-white { color: #fff; }

/* ============================= main layout ====================== */
#main{ padding:10px 39px 0 39px; margin:0 auto; text-align:left;}
.imgindent {margin:0; padding:5px; float:right;}
.padding1{ padding: 20px 0 0 11px;}
.padding2{ padding-top:22px;}
.strong1{ font-size:1.167em; color:#353535;}
.left { float:left;}
.right {float:right;}
.center { width:100%; text-align: center; }
.clear { clear:both;}
.design { font-size: 8pt }

hr { display: inline-block; width: 100%; margin: 10px 0 20px; }
#content-full { width:100%; padding:20px 0 20px 20px; display: inline-block;  } /**/
#content { padding:20px 0; display: inline-block; width: 98%; } /**/
#ts-content { padding:20px 0 0 20px; }
.container {width:100%; overflow:hidden; }

#account-left { max-width: 270px; float: left; border: 1px solid #ddd; margin: 10px 0; padding: 10px 0;}
#account-left a { width: 100%; display: inline-block; padding: 5px 5px; font-size: 11pt; }
#account-right { min-width: 60%; max-width: 75%; min-height: 400px; float: left;  padding: 10px 20px; }
#account-full { width: 98%; float: left; min-height: 250px; }

/* ============================= header ====================== */
#header{ height:368px; background:url('../images/header-bg.jpg') left bottom no-repeat; }
#header .top{ height: 110px; background:url('../images/top-bg.jpg') top repeat-x; width:100%; overflow:hidden;}
#header .sf-menu{ padding:42px 6px 0 0; float:right;}
#header .sf-menu li{ width: 98px; float:left; }
#header .logo{ padding:15px 0 0 0; float:left;}
#header .heading{ padding:15px 0 0 0; float:left; width:200px; text-align: center; display: inline; }
#header .slogan{ font-size:1.083em; font-weight:bold; color:#343839; padding-top:53px; float:left;}

#headersub { height:110px; width:100%;}
#headersub .top{ height:98px; background:url('../images/top-bg.jpg') top repeat-x; width:100%; overflow:hidden;}
#headersub .bottom{ height:50px; /*background:url('../images/bottom-bg.png') top no-repeat; */ width:100%; overflow:hidden; margin:0; padding: 13px 0 0 0; }
#headersub .sf-menu{ padding:42px 6px 0 0; float:right;}
#headersub .sf-menu li{ float:left; }
#headersub .logo{ padding:15px 0 0 0; float:left;}
#headersub .heading{ padding:30px 0 0 0; float:left; width:220px; text-align: center; display: inline; }
#headersub .highlighted{ color: red; }
#headersub .highlighted:hover{ color: white; }

/* ============================= content ====================== */
.column-1{ width:140px;}
.column-2{ width:738px;}
.column-1a{ width:180px; margin: 0; border-right: 1px solid #eee;}
.column-2a{ width:721px; margin: 0;}
.column-1b{ width:400px; margin: 15px 0 0 0;}
.column-2b{ width:500px; margin: -20px 0 0 0;}
/* ============================= page1 ===========================*/
#page1 .col-1{ width:550px;}
#page1 .col-2{ width:160px;}
#page1 .line2{ background:url('../images/line-bg.gif') repeat-y 545px 0;}

/* ============================= footer ====================== */
#footer{ height:50px; background:url('../images/top-bg.gif') top repeat-x; text-align: center; margin: 20px 0 0; }
#footer .text{ padding:20px 0 0 0; color:#585858;}
/*#footer a{ color:#2d2d2d;}*/

.defaultform { margin:0; padding:5px 10px;}
.defaultform .red { color:#f00 !important; display: inline; padding:0; margin: 0;}
.defaultform ol { margin:0; padding:0; list-style:none;}
.defaultform li { margin:0; padding:0; background:none; border:none; display:block;}
.defaultform li.buttons { margin:5px 0 5px 0;}
.defaultform label { float:left; margin:0; width:130px; padding:10px 0; font:normal 12px 'Roboto', Arial, Helvetica, sans-serif; color:#444; }
.defaultform label.none { float: none; }
.defaultform label.large { float:left; margin:0; width:195px; padding:10px 0; font:normal 12px 'Roboto', Arial, Helvetica, sans-serif; color:#444; }
.defaultform label.xlarge { float:left; margin:0; width:285px; padding:10px; font:normal 12px 'Roboto', Arial, Helvetica, sans-serif; color:#444; text-align: right; }
.defaultform label span { font:normal 10px 'Roboto', Arial, Helvetica, sans-serif;}
.defaultform input.text { width:360px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; height:16px; background:#f0f0f0;}
.defaultform input.textwhite { width:360px; border: 1px solid #D0E0EC; margin:5px 0; padding:5px 2px; height:16px; background:#fff;}
.defaultform input.file { width:360px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; height:25px; background:#f0f0f0;}
.defaultform input.small { width:170px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; height:16px; background:#f0f0f0; }
.defaultform select.small { width:176px; height:37px; padding: 0.3rem; border:1px solid #ddd; margin:5px 0 10px 0; background:#f0f0f0; vertical-align: top;}
.defaultform select.medium { width:247px; height:37px; padding: 0.3rem; border:1px solid #ddd; margin:5px 0 10px 0; background:#f0f0f0; }
.defaultform select.large { width:360px; height:37px; padding: 0.3rem; border:1px solid #ddd; margin:5px 0 10px 0; background:#f0f0f0; }
.defaultform .radio { margin: 0 10px 0 5px; }
.defaultform textarea { width:360px; border:1px solid #ddd; margin:10px 0; padding:2px; background:#f0f0f0; height:150px;}
.defaultform textarea.compact { width:205px; height:60px; border:1px solid #ddd; margin:10px 0; padding:2px; background:#f0f0f0;}
.defaultform li.buttons input { padding:3px 0; margin:0 0 0 460px; border:0; color:#FFF;}
.defaultform .tall { float:left; margin:0; padding:3px 0; font:normal 12px 'Roboto', Arial, Helvetica, sans-serif; color:#444;}
.defaultform .full { float:left; width:100%;  }
.defaultform .notext { float:left; margin:0; width:100%; padding:4px 12px 4px 0; font:bold 11px 'Roboto', Arial, Helvetica, sans-serif; }
.defaultform .notext a { text-decoration: none; display: inline-block;}
.defaultform .notext a:hover { text-decoration: underline; }
.defaultform .textsim { width:180px; margin:5px 0; padding:5px 2px; height:16px; float: left;}
.defaultform .infotip { margin:5px 0; padding:5px 20px; height:16px; display: inline-block; cursor:help;}
.defaultform .infotipdialog { margin:5px; display: inline-block; cursor:help;}
.defaultform input.client { width:180px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; height:16px; background:#f0f0f0;}
.defaultform input.client-right { width:120px;}
.defaultform input.date { width:80px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; background:#f0f0f0; }
.defaultform input.odo { width:60px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; background:#f0f0f0; }
.defaultform select.date { width:78px; height:37px; padding: 0.3rem; border:1px solid #ddd; margin:5px 0; background:#f0f0f0; }
.defaultform input.tiny { width:30px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; background:#f0f0f0; }
.defaultform strong { padding:5px 2px; display: inline-block; font: bold 10pt 'Roboto', Arial, Helvetica, sans-serif; }
.defaultform li.hide { display: none; }
.defaultform li div { padding: 10px; }
.defaultform .checkbox { margin: 10px 0 0 0; }

input.text { width:360px; border:1px solid #ddd; margin:5px 0; padding:5px 2px; height:16px; background:#f0f0f0;}

.timesheetFormHeading { margin:0; padding:10px 20px; font:bold 12pt 'Roboto', Arial, Helvetica, sans-serif; color: #fff;}
.timesheetForm {margin:0 auto; padding:0 10px; width: 100%; }
.timesheetForm tr { width: 100%; }
.timesheetForm .summary {margin:10px; padding:10px 0px 0px 0px; }
.timesheetForm .red { color:#f00 !important; display: inline; padding:0; margin: 0;}
.timesheetForm .notext { float:left; margin:0; width:100%; padding:4px 12px 4px 0; font:bold 11px 'Roboto', Arial, Helvetica, sans-serif; width:50%; }
.timesheetForm .notext a { text-decoration: none; display: inline; }
.timesheetForm .notext a:hover { text-decoration: underline; }

.datepicker { width:85px; border:1px solid #ddd; margin:5px 0; padding: 0.3rem; height:27px; background:#f0f0f0; }
.datepicker-medium { width:160px; border:1px solid #ddd; margin:5px 0; padding: 0.3rem; height:27px; background:#f0f0f0; }
.datepicker1 { width:105px; border:1px solid #ddd; margin:5px 0; padding: 0.3rem; height:27px; background:#f0f0f0; }
.datepicker-inline { float: left; display: inline-block; }

/* Tabs  
----------------------------------*/
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } 
.ui-tabs .ui-tabs-hide { display: none !important; }

.ui-icon-east {display: inline-block !important; float: right; margin: 0 0 0 10px; }
.ui-icon-west {display: inline-block !important; float: left; margin: 0 10px 0 0; }

.VT-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
.VT-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }

a.VT-button { float:left; }

/* remove extra button width in IE */
button.VT-button { width:auto; overflow:visible; }

.VT-button-icon-left { padding-left: 2.1em; }
.VT-button-icon-right { padding-right: 2.1em; }
.VT-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
.VT-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
.VT-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */
.VT-buttonset { float:left; }
.VT-buttonset .VT-button { float: left; }
.VT-buttonset-single .VT-button, 
.VT-buttonset-multi .VT-button { margin-right: -1px;}
.VT-toolbar { padding: .5em; margin: 0;  }
.VT-toolbar .VT-buttonset { margin-right:1.5em; padding-left: 1px; }
.VT-toolbar .VT-button { font-size: 1em;  }

.VT-tooltip { border: 1px solid #d0e0ec; background: #dee9f1; }
.VT-switchpanel { border: 1px solid #aaa !important; }
.switch:hover { color: #fff !important; }

.content-sixteenth { width: 6%; float: left; }
.content-eigth { width: 12%; float: left; }
.content-fifth { width: 19%; float: left; }
.content-quarter { width: 24%; float: left; }
.content-half { width: 49%;  float: left;}
.content-third { width: 33%;  float: left; }
.content-two-thirds { width: 65%;  float: left; }
.content-three-quarters { width: 74%;  float: left; }
.content-full { width: 100%; float: left; }
.content-scroll { overflow: auto; height: 420px; }

.sixteenth { width: 6%; }
.tenth {width: 10%; }
.eigth { width: 12%; }
.fifth { width: 19%; }
.quarter { width: 24%; }
.half { width: 49%; }
.third { width: 33%; }
.two-thirds { width: 65%; }
.three-quarters { width: 74%; }
.full { width: 100%; }

#notesListCont { display: none; background: #e3ecf3; padding: 10px; border: 1px solid #D0E0EC; width: 100%; }
#notesList { font:normal 12px 'Roboto', Arial, Helvetica, sans-serif; color:#626262; /*background: #fff;*/ padding:0; margin:10px auto; border: 0; width:98%;}
#notesList th { font-size:10pt; color:#282828; padding:0; font-weight:bold; padding: 5px; margin: 0;}
#notesList td { padding: 5px; margin: 0; line-height: 1.5em; vertical-align: top;}
#notesList a:hover { text-decoration: underline; }
#notesList .tdcenter { text-align: center; margin: 0;}
#notesList .note { width: 50%; }
#notesList .entered { width: 17%;}
#notesList .enteredby { width: 15%; }
#notesList .callback { width: 20%; }
#notesList .name { width: 25%; }
#notesList .contact { width: 15%; }
#notesList .note2 { width: 35%; }
#notesList .oddRow { background: #eee;}
#notesList .evenRow { background: #fff;}

#statusList { display: inline-block; margin:0; padding:0; } 
.statusList { font-weight: bold; text-align: center; float: none !important; }

#requestStatusList { margin:0; padding:0; } 
.requestStatusList { font-weight: bold; text-align: center; float: none !important; }
span.requestStatusList  { display: inline-block; width: 100%; padding: 5px; }

#requestLoader { width: 1600px; display: inline-block; }
#requestLister { width: 700px; }
#hoursContainer { width: 425px; margin: 0 25px; }
#workWeekLister{ width: 425px; margin: 0 0 0 0;}

.workWeekTile { width: 100%; border: 1px solid #ddd; padding: 10px 5px; display: inline-block; }
.workWeekTile .name { width: 130px; display: inline-block; vertical-align: middle; }
.workWeekTile .count { width: 70px; display: inline-block; text-align: center; }

.content-table div { 
	padding: 4px 0 4px 4px;
}

#player { display: none; }
#availabilityGrid div {
    padding: 3px;
}
#statusChangeReasonContainer { display: none; }
#map_canvas { height: 600px; width: 100%; display: inline-block; }
.rounded { border-radius: 10px; box-shadow: 4px 4px 4px gray; }
.thumb { width: 50px; }
.profileImg { max-width: 320px; }
#documentList { max-width: 675px; }

.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.p-3 { padding: 30px; }
.m-1 { margin: 10px; }
.m-2 { margin: 20px; }
.m-3 { margin: 30px; }

.px-1 { padding-left: 10px; padding-right: 10px; }
.px-2 { padding-left: 20px; padding-right: 20px; }
.px-3 { padding-left: 30px; padding-right: 30px; }
.mx-1 { margin-left: 10px; margin-right: 10px; }
.mx-2 { margin-left: 20px; margin-right: 20px; }
.mx-3 { margin-left: 30px; margin-right: 30px; }

.py-1 { padding-top: 10px; padding-bottom: 10px; }
.py-2 { padding-top: 20px; padding-bottom: 20px; }
.py-3 { padding-top: 30px; padding-bottom: 30px; }
.my-1 { margin-top: 10px; margin-bottom: 10px; }
.my-2 { margin-top: 20px; margin-bottom: 20px; }
.my-3 { margin-top: 30px; margin-bottom: 30px; }

/** Full Calendar Mods **/
.fc-event-vert span { color: #fff; }
.fc-event-time { font-family: Roboto, Arial, Helvetica, sans-serif; font-weight: bold; font-size: larger !important; }
.fc-event-title { font-family: Roboto, Arial, Helvetica, sans-serif; line-height: 1.5rem; font-size: 11pt; }
.fc-agenda .filled .fc-event-title { color: #106b12;}

.text-left { text-align: left; padding: 0 10px;}

.highlight { background-color: yellow; }

.doc-container { max-width: 700px; }
.doc-row { display: inline-block; float: left; margin:0; padding:5px; }
.doc-details { display: inline-block; float: left; margin:0px 15px; padding:0;  width: 350px; }
.doc-options { display: inline-block; float: left; margin:-5px 15px; padding:0; width:250px; }
.doc-options a { display: inline-block; padding: 5px; }

.timesheet-table { width: 98%; display: inline-block; }
.timesheet-table td {width: 33%;  padding: 5px; }

.shift-table { width: 98%; display: inline-block; border: 1px solid #eee; padding: 5px; }
.shift-table td.small {width: 58px;  padding: 5px; text-align: center;}
.shift-table td.large {width: 160px;  padding: 5px; text-align: center;}

.audit-table { width: 110%; display: inline-block; }
.audit-table td { padding: 5px; }
.tdcenter { text-align: center; margin: 0;}

.oddRow { background: #eee;}
.evenRow { background: #fff;}
.normal-text { font-weight: normal; }

.form-submitted { color: #c00000; }
.form-review { color: #f28226; }
.form-completed { color: #10aa12; }

#preferredStaffList { display: inline-block; min-height: 150px; width: 200px; padding: 20px; margin: 2px; border:1px solid #ddd;  }
.preferredStaff p { display: inline-block; width: 100%; height: 30px; margin: 5px; padding: 0; }
.preferredStaff span { cursor: pointer; }
#exceptionStaffList { display: inline-block; min-height: 150px; width: 200px; padding: 20px; margin: 2px; border:1px solid #ddd;  }
.exceptionStaff p { display: inline-block; width: 100%; height: 30px; margin: 5px; padding: 0; }
.exceptionStaff span { cursor: pointer; }

ul.sub { padding:0; margin:0 0 10px 0; list-style:none; }
ul.sub li { padding:0 15px !important; margin:0 20px !important; background:url(../images/marker3.gif) no-repeat scroll 3px 6px; float:none; line-height:20px; font-size: 9pt; text-align: left; }
ul.sub li ul { padding:0; margin:0; background:none; }
ul.sub li ul li { padding:0 15px; margin:0 25px;  background:url(../images/marker1.gif) no-repeat scroll 3px 6px; float:none; line-height:20px;}
ul.sub li img { display:block; float:left; padding:5px 10px; margin:0; }
ul.sub li a:hover { color: #9d0606; text-decoration: none; }

#accordion {margin: 0 auto; width: 98%; }
#accordion div { height: auto;}

button { padding: 10px 14px !important; margin: 5px; }
.title-button { margin:-12px 15px !important; float: right;}
.center-icon-button { padding: 10px !important; margin: -12px 5px 5px 15px; }
.request-heading { padding-bottom: 32px !important; border-bottom: none !important; }

.btn-group { margin-top: -2rem !important; margin-bottom: 2rem !important;}

#loading {
	margin: 5px;
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 3px solid rgba(255,255,255,.3);
	border-radius: 50%;
	border-top-color: #999;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
  }
  
  @keyframes spin {
	to { -webkit-transform: rotate(360deg); }
  }
  @-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); }
  }

/** Request Statuses (database driven, here primarily for reference)  */
.r-status-new { color: #6798da !important; }
.r-status-unavailable { color: #808080 !important; }
.r-status-awaiting-confirmation { color: #f28226 !important; }
.r-status-filled { color: #99cb5a !important; }
.r-status-pending { color: #cc0000 !important; }
.r-status-complete { color: #248526 !important; }
.r-status-cancelled { color: #000000 !important; }
.r-status-new-bg { background-color: #6798da !important; }
.r-status-unavailable-bg { background-color: #808080 !important; }
.r-status-awaiting-confirmation-bg { background-color: #f28226 !important; }
.r-status-filled-bg { background-color: #99cb5a !important; }
.r-status-pending-bg { background-color: #c00000 !important; }
.r-status-complete-bg { background-color: #248526 !important; }
.r-status-cancelled-bg { background-color: #000000 !important; }

/** Timesheet statuses (database driven, here primarily for reference) */
.t-status-new  { color: #f28226 !important; }
.t-status-submitted { color: #6798da !important; }
.t-status-approved { color: #99cb5a !important; }
.t-status-denied { color: #c00000 !important; }
.t-status-paid { color: #248526 !important; }
.t-status-invalid { color: #000000 !important; }
.t-status-new-bg { background-color: #f28226 !important; }
.t-status-submitted-bg { background-color: #6798da !important; }
.t-status-approved-bg { background-color: #99cb5a !important; }
.t-status-denied-bg { background-color: #c00000 !important; }
.t-status-paid-bg { background-color: #248526 !important; }
.t-status-invalid-bg { background-color: #000000 !important; }

/** Shift statuses (database driven, here primarily for reference) */
.s-status-new { color: #f28226 !important; }
.s-status-confirmed { color: #248526 !important; }
.s-status-removed { color: #000000 !important; }
.s-status-new-bg { background-color: #f28226 !important; }
.s-status-confirmed-bg { background-color: #248526 !important; }
.s-status-removed-bg { background-color: #000000 !important; }