/* HTML5 Reset and font-face */
@charset "utf-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:top}:focus{outline:0}
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* Fonts */
@font-face{font-family:'Gotham';src:url(fonts/Gotham-Book.woff2) format('woff2'),url(fonts/Gotham-Book.woff) format('woff');font-weight:400;font-style:normal}
@font-face{font-family:Gotham;src:url(fonts/Gotham-Black.woff2) format('woff2'),url(fonts/Gotham-Black.woff) format('woff');font-weight:900;font-style:normal}
@font-face{font-family:Gotham;src:url(fonts/Gotham-BoldItalic.woff2) format('woff2'),url(fonts/Gotham-BoldItalic.woff) format('woff');font-weight:700;font-style:italic}
@font-face{font-family:Gotham;src:url(fonts/Gotham-Bold.woff2) format('woff2'),url(fonts/Gotham-Bold.woff) format('woff');font-weight:700;font-style:normal}
@font-face{font-family:Gotham;src:url(fonts/Gotham-ThinItalic.woff2) format('woff2'),url(fonts/Gotham-ThinItalic.woff) format('woff');font-weight:100;font-style:italic}
@font-face{font-family:'Gotham';src:url(fonts/Gotham-BookItalic.woff2) format('woff2'),url(fonts/Gotham-BookItalic.woff) format('woff');font-weight:400;font-style:italic}
@font-face{font-family:Gotham;src:url(fonts/Gotham-Thin.woff2) format('woff2'),url(fonts/Gotham-Thin.woff) format('woff');font-weight:100;font-style:normal}
@font-face{font-family:'icomoon';src:url(fonts/icomoon.eot?z8psy95);src:url(fonts/icomoon.eot?zs8py95#iefix) format("embedded-opentype"),url(fonts/icomoon.ttf?z8psy95) format("truetype"),url(fonts/icomoon.woff?z8psy95) format("woff"),url(fonts/icomoon.svg?z8spy95#icomoon) format("svg");font-weight:400;font-style:normal}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon'!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-cross:before{content:"\e910"}
.icon-truck:before{content:"\e900"}
.icon-stopwatch:before{content:"\e901"}
.icon-paperclip:before{content:"\e902"}
.icon-camera:before{content:"\e903"}
.icon-image:before{content:"\e904"}
.icon-images:before{content:"\e905"}
.icon-files-empty:before{content:"\e906"}
.icon-file-text:before{content:"\e907"}
.icon-file-empty:before{content:"\e908"}
.icon-arrow-left:before{content:"\e909"}
.icon-external:before{content:"\e90a"}
.icon-user:before{content:"\e90b"}
.icon-cog:before{content:"\e90c"}
.icon-plus:before{content:"\e90d"}
.icon-clock:before{content:"\e90e"}
.icon-calendar:before{content:"\e90f"}
.icon-direction:before {content: "\e911";}
/* HTML Elements */
html, body {background:var(--off-white); height:100%; width:100%; color:#000; font-family:"Gotham", Verdana, sans-serif; -webkit-tap-highlight-color:rgba(0,0,0,0);}
body {background:var(--off-white); overflow:auto}
body.orange {background:#eee}
h1, h2, h3{font-weight:bold}
h1 {font-size:1.6em}
h2 {font-size:1.4em}
h3 {font-size:1.2em}
strong {font-weight:bold}
.text-center {text-align:center}
.left {float:left}
.right {float:right}
.half {width:50%; box-sizing:border-box}
br.clear {width:100%; display:block; clear:both}
.noselect, .noselect * {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
input[type='text'], input[type='email'], input[type='search'], input[type='password'], textarea, input[type='submit'], input[type='button'] {
-webkit-touch-callout: text; /* iOS Safari */
-webkit-user-select: auto !important; /* Chrome/Safari/Opera */
-khtml-user-select: auto !important; /* Konqueror */
-moz-user-select: auto !important; /* Firefox */
-ms-user-select: auto !important; /* Internet Explorer/Edge */
user-select: auto !important;
-webkit-appearance: none;
border-radius: 0;
}
/* Variables */
:root{
--green: #14c130;
--blue: #2189AD;
--red: #9B0303;
--gray: #293033;
--white: #fff;
--off-white: #F0F0F0;
}
/* BUTTONS! */
.button {display:block; width:100%; text-align:center; box-sizing:border-box; padding:10px 0; text-decoration:none; font-size:14px; font-weight:bold; transition:all .25s ease; color:var(--white);}
.button.green {background:var(--green);}
.button.blue {background:var(--blue);}
.button.red {background:var(--red);}
.button.grey {background:var(--gray);}
.mapLink {display:block; background:var(--white); border-radius:4px; font-size:10px; line-height:16px; padding:8px 4px; color:var(--blue); text-align:center; text-decoration:none; margin:0 0 5px}
.mapLink i {display:block; padding:0 5px; font-size:16px;}
/* Customize the Calendar Plugin */
.mbsc-comp {background:var(--off-white);}
.mbsc-material .mbsc-cal-c {padding:0}
.mbsc-fr-c, .mbsc-cal-slide {background:var(--gray); color:var(--white)}
.mbsc-fr-c {position:fixed; top:0; left:0}
.mbsc-ltr .mbsc-event-list {margin-top:130px}
.mbsc-material .mbsc-cal .mbsc-cal-btn {display:none}
.mbsc-cal-day-i {color:#ddd; font-weight:bold}
.mbsc-material .mbsc-cal-today {color:var(--white)}
.mbsc-material .mbsc-cal-c .mbsc-cal .mbsc-cal-body .mbsc-selected .mbsc-cal-cell-txt {background:none; color:var(--white)}
.mbsc-selected .mbsc-cal-day-i {border-bottom:var(--blue) 5px solid}
.mbsc-cal-mark {background:#ccc}
.hidden {display:none!important}
/* Login Page */
.row { display: flex; justify-content: space-between;}
.small { font-size: .8em; font-weight: 400; }
.faded { color: #8899a0;}
.spacer { padding-top:10px;}
.red { color: var(--red);}
/* Forms and Elements */
.box {background:var(--white); border:#c7e1e2 1px solid; margin:0 0 20px; padding:20px; box-sizing:border-box; transition:all .25s ease; position:relative}
.center {width:300px; height:auto; position:absolute; top:50%; left:50%; margin:-150px -150px!important}
.button {display:inline-block; width:auto; padding:8px 12px; background:var(--blue); color:var(--white); text-transform:uppercase; border-radius:4px; border:none; text-decoration:none; transition:all .2s ease; cursor:pointer;}
.button.block {display:block}
label {display:block; margin:4px 0 2px}
textarea {width:100%; padding:5px; box-sizing:border-box; border:#aaa 1px solid}
input[type=text], input[type=password], input[type=email], select {border:#aaa 1px solid; padding:6px}
.inputblock {width:100%; box-sizing:border-box;}
/* Profile Page */
.mbsc-comp, .mbsc-material .mbsc-fr-w {background:transparent;}
.profileView {width:100%; height:100%; background:#eee; padding-top:200px; box-sizing:border-box; display:block; position:fixed; top:100%; left:0; margin:0 0 ; text-align:center; z-index:1; transition:all .25s ease}
.profileView.show {top:0;}
#time {font-size:48px; font-weight:bold; padding:20px; width:80%; background:var(--white); border:#ccc 1px solid; border-radius:5px; margin:0 auto 20px; box-sizing:border-box}
#time:before {content:"Current Time:"; font-size:12px; text-transform: uppercase; display:block; color:#888}
.profileView .button {padding:20px 40px; font-size:16px; display:block; width:80%; margin:0 auto}
.timeblock {display:inline-block; width:65px;}
.logout {text-transform:uppercase;}
.userInfo {text-align: left; width: 80%; margin:auto;}
.userInfo div {display:block; padding-bottom:10px; font-size: 20px;}
.versionFooter {position: absolute; width: 100%; bottom: 70px; left: 0;}
.vstmt {width: fit-content; height: 30px; font-style: italic; margin: 0 auto; font-weight: 300; text-align: center}
#tasks .startShift {display:block; width:94%; margin:20px auto; padding:15px}
#tasks .tasks-header {display: flex; justify-content:space-between}
#tasks .task-search .clear {border: none; background:none; text-decoration:underline; color:blue;}
.filter-tasks-none {text-align: center; margin-top: 30px;}
.startShift:hover {background:#4BABCC}
/* Style the Tasks */
#holder {width:100%; height:100%; display:block; overflow:auto; position:relative;}
.box {background:var(--white); border:#c7e1e2 1px solid; padding:20px; box-sizing:border-box}
#calendar {position:absolute; top:0; left:0; width:100%; height:115px; z-index:5}
.profile {width:30px; height:30px; line-height:30px; text-align:center; color:var(--white); position:absolute; top:6px; right:6px; z-index:20; text-decoration:none}
.page {position:absolute; top:115px; left:0; padding-bottom:100px; width:100%; height:calc(100% - 120px); overflow:auto; padding-top:20px; box-sizing:border-box;}
.count { display:block; padding:0 5px; font-size:14px; color:#888; box-sizing:border-box}
.task {width:calc(100% - 60px); height:auto; padding:15px; display:block; margin:20px 0 0 40px; font-size:14px; color:#333; text-decoration:none; position:relative; border-left:var(--blue) 5px solid;}
.task[data-techstatus='Resolved'], .task[data-techstatus='Re-Open'] {border-left-color:var(--green)}
.task[data-techstatus='Unresolved'] {border-left-color:var(--red)}
.task#task0 {margin-top:10px}
.task h3 {font-size:14px; text-transform:uppercase; position:relative}
.task p {padding:5px 0 0}
.task h3 .right {position:absolute; top:5px; left:-55px; transform:rotate(-90deg);}
.emptyMessage {position: relative; top: 30%; display: flex; flex-direction: column; text-align:center; padding:40px 0; font-size:16px; width:94%; margin:0 auto; background:var(--white); border:#aaa 1px solid; color:#888; border-radius:4px}
.emptyMessage .button {width:60%; margin:20px auto 0}
#timesheet .task {margin-top:25px;}
.task .timestamp {position:absolute; top:-15px; left:0; font-size:10px; color:#888}
#theTask {width:100%; height:100%; position:fixed; top:0; left:-100%; z-index:49; background:var(--white); padding-top:0; overflow:auto; transition:all .25s ease; overflow-y: scroll; -webkit-overflow-scrolling: touch;}
#theTask.show {left:0}
header {width:100%; height:auto; background:var(--blue); color:var(--white); text-align:center; padding:20px 0; position:absolute; top:0; left:-100%; position:fixed; z-index:6; transition:all .25s ease}
#theTask.show header {left:0}
#theTask header {border-bottom:var(--blue) 5px solid; transition:all .25s ease;}
#theTask[data-techstatus="Resolved"] header, #theTask [data-techstatus='Re-Open'] header {border-bottom-color:var(--green)}
#theTask[data-techstatus="Unresolved"] header {border-bottom-color:var(--red)}
header .back {position:absolute; top:0; left:0; width:60px; height:60px; line-height:60px; display:block; color:var(--white); text-align:center; text-decoration:none}
.description {display:block; padding:20px; background:var(--off-white); box-sizing:border-box; font-size:14px; color:#888; line-height:1.5em}
.description h3 {font-size:16px; color:#000; padding:10px 0; text-transform:uppercase}
.actions {display:block; padding-top:10px;}
.actions .half.left {padding-right:10px}
.actions .half.right {padding-left:10px}
.details {padding:20px; color:#888; font-size:14px; z-index:5}
.details h4 {color:var(--blue); font-size:16px; border-bottom:var(--blue) 1px solid; margin:10px 0 5px; padding:0 0 5px}
.timespent {text-align:center; font-size:18px}
.timespent strong {display:block; font-size:11px; text-transform:uppercase; padding-bottom:4px}
.timespent span {display:inline-block; width:100px; height:40px; line-height:40px; background:#aaa; color:var(--white); border-radius:4px}
.tags {list-style-type:none}
.tags li {display:block; position:relative; padding:10px; text-align:right}
.tags li:nth-child(even) {background:#f6f6f6}
.tags li strong {position:absolute; top:10px; left:10px; color:#000}
.replyHolder {width:100%; min-height:150px; position:relative;}
.messageHolder {padding:0 10px}
.message{position:relative;display:inline-block;background:var(--off-white);color:#3d6b7c;padding:5px;box-sizing:border-box;text-decoration:none;border:var(--off-white) 1px solid;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;padding-left:10px;margin:0 0 30px; overflow-wrap: anywhere;}
.message svg {position:absolute; top:6px; left:-23px;}
.message svg.fa-info {left:-18px}
.message img {max-width:100%; display:block; float:left; margin-right:5px;}
.profileThumb{width:30px;height:30px;display:inline-block;margin:5px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;position:absolute;top:-10px;left:-10px}
.profileThumb img{width:100%;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px}
.message .timestamp{position:absolute;bottom:-20px;left:10px;text-align:left;color:#a5b1b6;font-size:12px;width:300px}
.message a {color: inherit; text-decoration: inherit;}
.uploadimage {position: absolute;
top: 99px;
left: 0;
z-index: 2;
width: 50%;
height: 40px;}
.imagePreviewHolder { width: 100%;
height: auto;
background: #ccc;
display: flex;
flex-wrap: wrap;
overflow: auto;
position: relative;
top: 65px;
margin-bottom: 40px;}
.imagePreviewHolder .image-preview {position: relative; width: 30%; margin-right: 5px; max-height:200px; max-width:200px;}
.image-preview { margin-right: 5px; margin-bottom: 5px;}
.image-preview .remove-image {position: absolute; right: 0; font-weight: 1000; cursor: pointer; width: 100%; height: 100%;}
.remove-image svg {position: absolute; right: 0;}
.image-preview img {width:100%}
.imgLabel {font-size: 12px;
cursor: pointer;
color: var(--white);
width: 100%;
height: 40px;
text-align: center;
line-height: 40px;
background: #9acfe2;
display: block;
margin: 0;
border: #000 1px solid;
box-sizing: border-box;
border-radius: 0 0 0 5px;
text-transform: uppercase;}
.messageReply{width:100%;height:40px;display:block;box-sizing:border-box;position:relative; padding-bottom:80px; z-index:1}
.messageReply .reply{width:100%;height:100px;padding:5px;box-sizing:border-box;border:var(--gray) 1px solid;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;font-size:12px;font-family:"Gotham",sans-serif;background:var(--off-white)}
.messageReply .addReply{ width: 50%;
height: 40px;
display: block;
position: absolute;
bottom: -59px;
right: 0;
border-radius: 0 0 5px 0;
background: var(--green);
color: var(--white);
text-align: center;
cursor: pointer;
border-color: var(--gray);
text-transform: uppercase;
font-size: 12px;}
#theTask.fixed .description {position:fixed; left:0; width:100%; z-index:4; }
#theTask.fixed .details {padding-top:180px;}
.loadMore {display:block; width:250px; height:40px; line-height:40px; color:#3d6b7c; margin:0 auto; text-align:center; text-decoration:none; position:relative;}
.loadMore:before, .loadMore:after {content:""; width:20px; height:1px; display:block; background:#3d6b7c; position:absolute; top:18px}
.loadMore:before {left:0}
.loadMore:after {right:0}
/* Modal Window */
.modal {display:none; width:90%; height:auto; padding:10px 5px; position:absolute; transform: translate(-50%, -50%); top:50%; left:50%; box-sizing:border-box; background:var(--white); color:#000; border-radius:4px; z-index:51}
.modal .half {padding:0 5px}
.modal .closeModal {color:#888; text-transform:uppercase; text-decoration:none; text-transform:uppercase; display:block; padding:5px; margin-top:10px; font-size:12px;}
.blackout, .progress {width:100%; height:100%; display:none; position:fixed; top:0; left:0; background:rgba(0,0,0,.75); z-index:51}
.progress {font-size:16px; color:var(--white); text-align:center; line-height:40}
.modal.show, .blackout.show {display:block}
.plsWait {border-radius: 7px; display: none; width: 50%; margin:auto; background:white; color:black; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; z-index: 999; text-align: center;}
.pwTop {margin: 50px auto 25px; font-size: 24px; line-height: 35px;}
.pwBot {margin: 10px auto 20px; font-size: 12px;}
/* Pull to Refresh */
body{margin:0;padding:0;display:flex;min-height:100vh;flex-direction:column;font:15px / 1.15 Helvetica,Arial,sans-serif}.wrap{max-width:800px;padding:0 10px;margin:0 auto}header{padding:20px 0;position:relative;z-index:1}header h1{margin:0}pre{background:rgba(0,0,0,0.1);font-size:12px;overflow:auto;padding:5px}#main{flex:1;padding-top:20px;transition:transform .3s}.trigger{width:35px;height:35px;line-height:35px;text-align:center;float:right;display:block;border:1px solid white}.buttons{border-bottom:1px solid silver;padding-bottom:20px;text-align:center}.buttons>*{border:1px solid silver;background:silver;color:black;padding:5px}.links a~a{margin-left:1em}.flex{display:flex}.flex>*{width:50%}#footer{background:#eef;padding:10px 0}#footer a{color:#5c5cd6}#footer ul.footer-links{list-style:none;margin:0;padding:0}#footer ul.footer-links>li{display:inline}#footer ul.footer-links>li+li:before{color:#33c;content:'•';opacity:.52;margin:0 .4em}/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZS5sZXNzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLEtBQ0UsUUFBQSxDQUNBLFNBQUEsQ0FDQSxZQUFBLENBQ0EsZ0JBQUEsQ0FDQSxxQkFBQSxDQUNBLDRDQUdGLE1BQ0UsZUFBQSxDQUNBLGNBQUEsQ0FDQSxjQUdGLE9BQ0UsZUFBQSxDQUNBLFVBQUEsQ0FDQSxjQUFBLENBQ0EsaUJBQUEsQ0FDQSxVQUxGLE1BT0UsSUFDRSxTQUlKLElBQ0UsMEJBQUEsQ0FDQSxjQUFBLENBQ0EsYUFBQSxDQUNBLFlBR0YsTUFDRSxNQUFBLENBQ0EsZ0JBQUEsQ0FDQSx5QkFHRixTQUNFLFVBQUEsQ0FDQSxXQUFBLENBQ0EsZ0JBQUEsQ0FDQSxpQkFBQSxDQUNBLFdBQUEsQ0FDQSxhQUFBLENBQ0EsdUJBR0YsU0FDRSw4QkFBQSxDQUNBLG1CQUFBLENBQ0Esa0JBSEYsUUFLRSxHQUNFLHVCQUFBLENBQ0EsaUJBQUEsQ0FDQSxXQUFBLENBQ0EsWUFJSixNQUNFLEVBQUUsR0FDQSxnQkFJSixNQUNFLGFBREYsS0FHRSxHQUNFLFVBSUosUUFDRSxlQUFBLENBQ0EsZUFGRixPQUdFLEdBQ0UsY0FKSixPQU1FLEdBQUUsY0FDQSxlQUFBLENBQ0EsUUFBQSxDQUNBLFVBVEosT0FNRSxHQUFFLGFBSUEsSUFDRSxlQUVFLE9BUE4sR0FBRSxhQUlBLEdBRUksR0FDQyxRQUNDLFVBQUEsQ0FDQSxRQUFTLEdBQVQsQ0FDQSxXQUFBLENBQ0EiLCJmaWxlIjoic3R5bGUuY3NzIn0= */
footer {width:100%; height:60px; position:fixed; bottom:0; left:0; z-index:50; background:var(--white); box-shadow:0 0 3px rgba(0,0,0,.25)}
footer a {color:#888; display:block; width:33%; height:60px; float:left; line-height:60px; padding:0 20px; font-size:11px; text-align:center; text-decoration:none; box-sizing:border-box}
footer a:nth-child(2) {width:34%}
footer a.selected {border-bottom:var(--blue) 3px solid}
footer a i {font-size:18px; position:relative; top:4px; margin:0 5px 0 0}
footer a span {display:inline-block; width:26px; text-align:right}
.fileThumbnail {width:75px; height:75px; display:inline-block; margin:5px; background-size:cover; background-repeat:no-repeat; background-position:center center; position:relative}
.fileViewer {width:800px; height:90%; position:fixed; top:70px; left:50%; margin:0 -400px; box-sizing:border-box; background:#fff; border:var(--blue) 1px solid; padding:10px; z-index:51;}
.closeViewer {position:absolute; top:10px; right:10px; color:#888; text-decoration:none; cursor:hover; z-index:2;}
.imgHolder {width:500px; height:100%; display:block; background-color:#000; background-size:contain; background-repeat:no-repeat; overflow:hidden;}
.imgHolder img {max-width:100%; max-height:100%}
.viewerOptions {width:270px; height:100%; display:block; position:absolute; top:10px; right:10px;}
.viewerOptions h2 {margin:0}
.viewerOptions p {padding:5px 0}
.viewerOptions label {font-size:11px; text-transform:uppercase; display:block; margin:0; color:#888}
.viewerOptions .rotateFile {padding-left:25px !important; position:relative;}
.rotateFile i, .rotateFile svg {position:absolute; top:10px; left:10px; transition:all .25s ease;}
.rotateFile.rotating {background:#eee; cursor:default;}
.rotateFile.rotating i, .rotateFile.rotating svg {animation: rotation 2s infinite linear;}
.fileViewer .thumbnails {width:100%; height:340px; overflow:auto;}
.blackout {width:100%; height:100%; display:none; position:fixed; top:0; left:0; z-index:50; background:rgba(0,0,0,.75)}
.viewerOptions .button.small { font-size:0.7rem; background:var(--white); color:#000; padding:8px 8px;}
@media screen and (max-device-width: 900px) {
.fileViewer {width:98%; left:1%; margin:0;}
.fileViewer .imgHolder {width:100%; height:50%;}
.fileViewer .viewerOptions {width:100%; height:50%; position:relative; overflow:auto; padding:0 10px;}
}