* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust:none;
    outline:none;
    box-sizing: border-box;
    font-family: 'Lato', tahoma, helvetica;
    color:#fff;
}

::-webkit-input-placeholder { color:rgba(0,0,0,0.15);}
:-moz-placeholder { color:rgba(0,0,0,0.15);}
::-moz-placeholder { color:rgba(0,0,0,0.15);}
:-ms-input-placeholder { color:rgba(0,0,0,0.15);}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background-color:rgba(0,0,0,0); }
::-webkit-scrollbar-thumb { background-color: #ffffff33; }

h1, h2, h3, h4 { margin:16px 0 0 0; }
h1 { font-size:18px; text-transform: uppercase;}
hr { height:0; border:0; border-top:1px solid rgba(0,0,0,.15); margin:10px 0; }
.clear {clear:both;}
.hidden { display:none !important; }
.highlight { color:#00af52; }
.clickable { transition: all .3s ease-in-out; }
.clickable:hover { cursor:pointer; opacity: .75 !important; }
.clickable:active { cursor:pointer; opacity: .85 !important; }
.spacer { height:10px; }

html { height:100%; }
body {
    background:#111 url('../_img/bg.jpg?ts=1') no-repeat center center;
    background-size: cover;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}

main { width:100%; height:100%; }
.panes { transition: height .5s ease-in-out; }

/* Floats */
.floatright { float:right; }
.floatright.button { width: auto; display:inline-block; }
.float50 { float:left; width:50%; box-sizing: border-box; }
.float50:nth-child(odd) { padding-right:10px; }
.float50:nth-child(even) { padding-left:10px; }
@media (max-width: 640px) {
    .float50 {
        width:100%;
        padding-left:0 !important;
        padding-right:0 !important;
    }
}

/* Buttons */
button { cursor:pointer; transition: opacity .3s ease-in-out; background:#00af52; border:0px solid #00af52; color:#fff; width:100%; font-size:16px; font-weight: 700; padding:0 16px; height:48px; text-transform: uppercase; box-sizing: border-box; }
button.fullwidth { max-width:100%; }
button.halfwidth { max-width:48% !important; display:inline-block !important; }
button.halfwidth:nth-child(odd) { margin-right:1% !important; }
button.halfwidth:nth-child(even) { margin-left:1% !important; }
button:active {opacity:.85; padding-top:14px; padding-bottom:10px; }
button.red { background:#cc0000; }
button.grey { background:#666; }
button.outlined { background:transparent; border:2px solid #00af52; color:#00af52; }

/* Inputs */
label { font-size:12px;  font-weight: 700; text-transform: uppercase; display:inline-block; color:rgba(255,255,255,.33); margin:5px 0; }
input[type=text], input[type=password] { width:100%; background:rgba(255,255,255,0); border:0; border-radius: 5px; color:#fff; font-size:16px; font-weight: 700; padding:6px 10px; box-sizing: border-box; }
.inputwrap { position: relative; }
.inputwrap:after {
    content:'';
    width:100%;
    height:3px;
    background:#00af52;
    position: absolute;
    bottom:-3px;
    left:0;
    z-index:1;
}
select { width:100%; background:rgba(0,0,0,0); border:2px solid #00af52; border-radius: 5px; color:#fff; font-size:16px; padding:10px; font-weight: 700; -webkit-appearance: none; }
select option { font-size:16px; background:#fff; color:#000; font-family: tahoma, helvetica; border:1px solid #00af52; }
.selectwrapper { position: relative; }
.selectwrapper:after { position: absolute; right:14px; top:50%; margin-top:-10px; font-size:16px; content:'\f078'; font-family: 'FontAwesome'; color:#000; pointer-events: none; }

.datepickerwrap {position: relative; height:46px; border:2px solid #00af52; border-radius: 5px; }
.datepickerwrap:after { position: absolute; right:14px; top:50%; margin-top:-10px; font-size:16px; content:'\f073'; font-family: 'FontAwesome'; color:#000; pointer-events: none; }
.datepickerwrap input { line-height: 42px; padding-top:0; padding-bottom:0; text-align: left; }


/* Menu */
.navigation .topwrap { width:100%; display:block; position: relative; max-width:1280px; margin:0 auto; padding:16px; overflow:hidden; }
.navigation .bottomwrap { background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%); }
.navigation .logowrap { position: relative; display:inline-block; padding-right:32px; }
.navigation .logowrap h2 {
    font-size:20px;
    text-transform: uppercase;
    margin-top:0;
}
.navigation .logowrap:after {
    pointer-events: none;
    position: absolute;
    right:0px;
    top:50%; margin-top:-6px;
    font-size:12px;
    content:'\f078';
    font-family: 'FontAwesome';
    color:#888;
}
.navigation .logo { height:28px; display:block; margin: 0; }
.navigation .settings { cursor:pointer; position: absolute; top:-7px; right:16px; text-align: center; color:#666; font-size:28px; transition: all .3s ease-in-out; }
.navigation .settings .fa-stack { width: 1.5em; }
.navigation .settings .fa-cog { font-size:20px !important; margin-top:-5px; color:#000; }
.navigation .settings.active { color:#00af52; }
.navigation .menuwrap { width:100%; max-width:1280px; padding:0 16px; margin:0 auto; }
.navigation .menu { width:100%; border-bottom:2px solid rgba(0,0,0,0.1); background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%,rgba(0,0,0,.25) 60px, rgba(0,0,0,.50) 61px, rgba(255,255,255,0.0) 100%); }
.navigation .menu table { width:100%; height:50px; margin:0 auto 0 auto; }
.navigation .menu table td { cursor:pointer; width:33%; text-align: center; background:transparent; color:#000; line-height: 24px; font-size:24px; padding-top:5px; border-bottom:3px solid rgba(255,255,255,0); transition: all .3s ease-in-out; }
.navigation .menu table td.active { color:#00af52; border-bottom:3px solid #00af52; transition: all .3s ease-in-out; }
.navigation .menu table td i { line-height: 24px; font-size:20px; vertical-align: bottom;}
.navigation .menu table td p { margin-left:10px; display: inline; line-height: 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; }
@media (max-width: 640px) {
    .navigation .menuwrap { padding:0;}
    .navigation .menu table td p { display:none; }
}

/* Login */
view.login { width:100%; height:100%; display: flex; align-items: center; }
view.login div { margin:0 auto; }
view.login .logo { width:66%; max-width:640px; margin:0 auto; display:block; margin-bottom:0px; }
view.login .loginform { width:80%; max-width:640px; margin:0 auto; }
view.login .loginform label { display:inline-block; color:rgba(255,255,255,.33); margin:5px 0;}
view.login .loginform input { display:block; width:100%; margin: 0 0 24px 0; color:#fff; }

/* View */
view { width:100%; height:100%; display:block; position: relative; max-width:1280px; margin:0 auto; padding:0 16px 16px 16px; }

    /* Slick */
    .slick, .panes { height:100%; }
    .slick-track { height:100%; }
    .slick-slide { padding:0px; }

    /* Home */
    view.home { overflow-x:hidden; }
    @media (max-width: 640px) { view.home { overflow:auto; -webkit-overflow-scrolling: touch; } }
    view.home h1 span { float:right; opacity: .25; font-size:20px; line-height: 20px; height:20px; width:50px; text-align: right; }
    view.home .buttons { position: absolute; left:0; bottom:0; width:100%; padding:16px; }
    view.home .homestats .location { width:100%; margin-bottom:10px; background:rgba(0,0,0,.33); border-radius: 7px; box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.15); border-bottom:5px solid #888; }
    view.home .homestats .location.subtotal {
        padding-bottom: 5px;
        background-size: 100% 5px !important;
        background-position: bottom 0 left 0,bottom 5px left 0 !important;
        background-repeat: no-repeat !important;
        border: 0;
    }
    view.home .homestats .location table { width:100%; border-spacing: 0; border-collapse: collapse; border-radius: 7px;}
    view.home .homestats .location td { padding:16px; }

    /* Stats */
    view.stats { overflow-x:hidden; }
    @media (max-width: 640px) { view.stats { overflow:auto; -webkit-overflow-scrolling: touch; } }
    view.stats h1 span { float:right; opacity: .25; font-size:20px; line-height: 20px; height:20px; width:50px; text-align: right; }
    view.stats table { width:100%; margin-top:24px; border-spacing: 0; border-collapse: collapse; }
    view.stats table tr td { padding: 6px 0;}
    view.stats table tr.total td { border-bottom:2px solid #888; font-weight: 700;}
    view.stats table tr.sublocation td { font-size:13px; border-bottom:1px solid rgba(0,0,0,.15); }
    view.stats table tr.category td { font-size:13px; font-weight: 700; }
    view.stats table tr.categoryspacer td { height:32px; }
    view.stats button:active { padding-top:14px; padding-bottom:10px; }

    /* Live */
    view.live { overflow-x:hidden; }
    @media (max-width: 640px) { view.live { overflow:auto; -webkit-overflow-scrolling: touch; } }
    /* view.live::-webkit-scrollbar { display: none; } */
    view.live h1 span { float:right; font-size:20px; line-height: 32px; height:32px; text-align: right;}
    view.live h1 span i { opacity:.25; }
    view.live h1 span.livestats_lastupdated { font-size:14px; padding-right:10px; font-weight: 700; line-height: 32px; color:#00af52; }
    view.live table { width:100%; margin-top:24px; border-spacing: 0; border-collapse: collapse; }
    view.live table tr td { padding: 6px 0;}
    view.live table tr.total td { border-bottom:2px solid #888; font-weight: 700;}
    view.live table tr.sublocation td { font-size:13px; border-bottom:1px solid rgba(0,0,0,.15); }
    view.live table tr.category td { font-size:13px; font-weight: 700; }
    view.live table tr.categoryspacer td { height:32px; }

    /* Settings */
    view.settings { overflow-x:hidden; }
    @media (max-width: 640px) { view.settings { overflow:auto; -webkit-overflow-scrolling: touch; } }
    view.settings .locations label { color:#fff; }
    view.settings input[type=text], view.settings input[type=password]  { display:block; width:100%; margin: 0 0 24px 0; }
    view.settings select { width:100%; -webkit-appearance: none; }
    view.settings .inputwrap { max-width:360px; }
    view.settings .passwordbtn { margin: 0 0 21px 0; }
    view.settings .buttons {
        position: absolute;
        left:0;
        bottom:0;
        width:100%;
        padding:16px;
        min-height:80px;
        box-sizing: border-box;
        text-align:center;
    }
    view.settings .buttons:after {
        content:'';
        position: absolute;
        width:100%;
        height:1px;
        left:0;
        top:-1px;
        background:rgba(0,0,0,.15);
    }

    @media (max-width: 640px) {
        view.settings .buttons:after {
            height:24px;
            top:-24px;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 100%);
            border-radius: 0;
        }
    }

    view.settings .buttons button { margin:0 auto; display:block; }
    view.settings .deletebtn { cursor:pointer; position: absolute; top:-7px; right:16px; text-align: center; color:#cc0000; font-size:28px; transition: all .3s ease-in-out; z-index:999; }
    view.settings .deletebtn .fa-stack { width: 1.5em; }
    view.settings .deletebtn .fa-ban { font-size:20px !important; margin-top:-5px; }
    view.settings .iftext { margin:0 auto; display:block; font-size:10px; font-family: tahoma, helvetica; text-align: center; margin:0 0 10px 0; opacity: .5; }
    view.settings .iflogo { width:100%; max-width:160px; margin:0 auto; display:block; opacity: .5; }

/* Offline */
view.offline { width:100%; height:100%; display: flex; align-items: center; }
view.offline .logo { width:100%; max-width:80%; margin:0 auto; display:block; margin-bottom:24px; }
view.offline .content { width:100%; max-width:80%; margin:0 auto; }
view.offline button { margin-top:24px; }

/* Lists */
.list { overflow:auto; -webkit-overflow-scrolling: touch; transition: height .3s ease-in-out; }
.list table.listtable { width:100%;  border-spacing: 0; border-collapse: collapse; }
.list table.listtable>tbody>tr>td { padding: 10px; border-top:1px solid rgba(0,0,0,0.25); font-size:14px;}
.list table.listtable>tbody>tr:first-child>td { border-top:0; }
.list table.listtable>tbody>tr>td:first-child { width:32px; font-size:32px; color:rgba(0,0,0,.5); }
.list table.listtable>tbody>tr>td:last-child { text-align: right; font-size:20px; }
.list table.listtable>tbody>tr.foldable>td { padding-left:0; padding-right:0; border-top:0; }

.list table.smalllisttable { width:100%;  border-spacing: 0; border-collapse: collapse; }
.list table.smalllisttable>tbody>tr>td { padding: 10px; text-align: left; border-top:1px solid rgba(0,0,0,0.15); font-size:12px;}
.list table.smalllisttable>tbody>tr>td:first-child { width:16px; font-size:16px; }
.list table.smalllisttable>tbody>tr>td:last-child { text-align: right; font-size:16px; }

/* Forms */
.form { overflow:auto; -webkit-overflow-scrolling: touch; transition: height .3s ease-in-out; }

/* Locationselector */
.locationselector table { width:100%;}
.locationselector td { font-weight: 700; text-transform: uppercase; padding:10px 0; }

/* Datepicker */
.ui-datepicker { padding:16px !important; width:95% !important; max-width:360px; }
.ui-datepicker-calendar a { font-family:'Lato', Helvetica, tahoma; font-size:13px; }
span.showOptions { float: right; }
.ui-widget-content { background: rgba(0,0,0,.5) !important; color: #fff !important; }
.ui-widget-header { border: none !important; background: #888 !important; color: #fff !important; text-transform: uppercase; margin-top:5px; }
.ui-datepicker .ui-datepicker-title { font-size:16px; }
.ui-datepicker th { width:13%; }

.ui-widget-header .ui-icon {
    display: none !important;
    background: none !important;
    position: relative !important;
    text-indent: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.ui-datepicker-prev:before, .ui-datepicker-prev-hover:before {
    content: "\f104";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 28px;
    padding-left:8px;
}
.ui-datepicker-next:before, .ui-datepicker-next-hover:before {
    content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 28px;
    padding-left:12px;
}

.ui-datepicker .ui-datepicker-prev-hover { background:#666 !important; border-color:transparent !important;  }

.ui-datepicker .ui-datepicker-next { right:0px !important; }
.ui-datepicker .ui-datepicker-next-hover { right:1px !important; background:#666 !important; border-color:transparent !important;  }


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: rgba(0,0,0,.5) !important;
    color: #fff !important;
    border-radius: 5px;
    border-width: 2px !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 2px solid #00af52 !important; background: #00af52 !important; color: #fff !important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 2px solid #00af52 !important; }

.ui-timepicker-wrapper {
    width: 50% !important;
    background: #fff !important;
    height: 150px !important;
    overflow: auto !important;
    text-align: center;
}

ul.ui-timepicker-list { padding: 0; margin: 0; }
.ui-timepicker-wrapper  li { list-style-type: none; }
li.ui-timepicker-am.ui-timepicker-selected { background: #00af52; color: #fff; font-weight: bold; }
.ui-state-hover { border-color:#00af52 !important; }

/* Toast */
.toast_window {
	position:absolute;
    width:100%;
	background: #00af52;
	color:#fff;
	font-size:14px;
	font-weight:700;
	padding:12px;
	text-align:center;
	z-index:999;
	top:0;
    border-bottom:3px solid rgba(0,0,0,0.1);
}

/* Modal */
.modal_bg {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 98;
    display: none;
}
.modal_window {
    position: absolute;
    background: rgba(0,0,0,.95);
    width: 100%;
    max-width:320px;
    min-height: 32px;
    z-index: 99;
    padding:20px;
    font-family:tahoma, helvetica;
    font-weight: 400;
    font-size:14px;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    -webkit-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25);
}

.modal_window .fa-ul {
    margin: 0;
    padding: 0 20px;
    list-style-type: square;
}
.modal_button {
    margin-top: 20px !important;
    color:#fff;
    display:inline-block;
    width:100%;
    margin-left: auto;
    margin-right: auto;
}
.modal_check {
    font-size: 64px !important;
    color: #778248;
}
.modal_close {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #555;
    font-size: 16px;
    padding: 21px 23px;
}

.modal_window h1 {
    font-size:20px;
    margin:0 0 10px 0;
    color:#00af52;
}

/* Loader */
.lds-ring {
  display: inline-block;
  position: absolute;
  top:50%;
  left:50%;
  width: 64px;
  height: 64px;
  margin-top:-32px;
  margin-left:-32px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #00af52;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #00af52 transparent transparent transparent;
}
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Restyle checkboxes */
input[type=checkbox] + label { display: block; margin: 0.2em; cursor: pointer; padding: 0.2em; }
input[type=checkbox] { display: none; }
input[type=checkbox] + label:before { content: "\f00c"; font-family: 'FontAwesome'; border: 0.1em solid #000; border-radius: 0.2em; display: inline-block; width: 1em; height: 1em; padding:2px; margin-right: 0.2em; vertical-align: bottom; color: transparent; transition: .2s; }
input[type=checkbox] + label:active:before { transform: scale(0); }
input[type=checkbox]:checked + label:before { background-color: #00af52; border-color: #00af52; color: #fff; }
input[type=checkbox]:disabled + label:before { transform: scale(1); border-color: #aaa; }
input[type=checkbox]:checked:disabled + label:before { transform: scale(1); background-color: #bfb; border-color: #bfb; }

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  /* -webkit-text-fill-color: green; */
  -webkit-box-shadow: inset 0 0 0px 1000px rgba(255,255,255,.5) !important;
}


/* Change Autocomplete styles in Chrome*/
.loginform input:-webkit-autofill,
.loginform input:-webkit-autofill:hover,
.loginform input:-webkit-autofill:focus {
  /* -webkit-text-fill-color: green; */
  -webkit-box-shadow: inset 0 0 0px 1000px #111 !important;
  -webkit-text-fill-color: white !important;
  color:#fff !important;
  border-radius: 0;
}