* {margin: 0;padding: 0;}

body, html {font-size: 12px; margin: 0; padding: 0; width: 100%; height: 100%;font-family: 'Open Sans', sans-serif;font-weight: normal; color: white;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;}


body.bg1 {background: url("/images/bg3.jpg") no-repeat center center fixed;background-size: cover;}
body.bg2 {background: url("/images/bg3.jpg") no-repeat center center fixed;background-size: cover;}
body.bg3 {background: url("/images/bg3.jpg") no-repeat center center fixed;background-size: cover;}
body.bg4 {background: url("/images/bg3.jpg") no-repeat center center fixed;background-size: cover;}
body.bg5 {background: url("/images/bg3.jpg") no-repeat center center fixed;background-size: cover;}

form#mainForm {margin-top: 20px;}


section#content {margin: 50px 3% 0px;width: 94%;background: white;padding: 2%;box-sizing: border-box;color: #3e3e3e;border-radius: 15px;border-top: 5px solid #f58220;position: relative;box-shadow: 0px 0px 30px #6c6c6c;}

.hidden {display: none;}

.datepicker {padding: 5px 5px 5px 12px;margin: 10px 0px;border-radius: 3px;border: 1px solid #ccc;text-align: left;width: 112px;cursor: pointer;}
select#user {width: 170px;height: 30px;margin-right: 15px;}
select#event {width: 170px;height: 30px;margin-right: 15px;}

h1 {margin-bottom: 20px;font-size: 25px;}
h2 {margin-bottom: 15px;font-size: 22px;}

hr {border-top: 1px solid #ccc;border-bottom: 0px;}

span.backlink a {font-size: 13px;margin-left: 20px;float: right;background: #f58220;color: white;text-decoration: none;padding: 5px 10px;border-radius: 5px;font-weight: 300;border: 1px solid transparent;}
span.backlink a:hover {background: white;color: #f58220;border: 1px solid #f58220;}

a {color: #f58220;}

.tac {text-align: center;}
.tar {text-align: right;}
.tal {text-align: left;}

.msg {width: auto;padding: 10px 20px;border: 1px solid green;background: #b4ff9c;color: black;font-weight: bold;text-align: center;margin: 10px 0px;}

.w100 {width: 100%;}
.w50 {width: 50%;}

.clr {clear:both;}


/*
 * Admin
 */

table.users {border: 1px solid #f3f3f4;margin-bottom: 25px;width: 100%;}
table.users tr {}
table.users tr:nth-child(even) {background: #f3f3f4;}
table.users tr:nth-child(odd) {background: #ffffff;}
table.users td {padding: 5px;}
table.users th {padding: 5px;color: white;background: #f58220;font-weight: lighter;}
table.users a {text-decoration: none;}

table.roles {border: 1px solid #f3f3f4;margin-bottom: 25px;width: 98%;}
table.roles tr {}
table.roles tr:nth-child(even) {background: #f3f3f4;}
table.roles tr:nth-child(odd) {background: #ffffff;}
table.roles tr:hover {background: #f8ff81;}
table.roles td {padding: 5px;}
table.roles td input.text {width: 200px;}
table.roles th {padding: 5px;color: white;background: #f58220;font-weight: lighter;}
table.roles a {text-decoration: none;}

table.events {border: 1px solid #f3f3f4;margin-bottom: 25px;width: 100%;}
table.events tr {}
table.events tr:nth-child(even) {background: #f3f3f4;}
table.events tr:nth-child(odd) {background: #ffffff;}
table.events tr:hover {background: #f8ff81;}
table.events td {padding: 5px;}
table.events td input.text {width: 200px;}
table.events th {padding: 5px;color: white;background: #f58220;font-weight: lighter;}
table.events a {text-decoration: none;}

.icon-cross {color: red;}
.icon-checkmark {color: green;}

div.table {display: table;}
div.cell {display: table-cell;}

#bgTable {position: absolute;top: 122px;right: 20px;width: 100px;height: auto;}
#bgTable img {width: 100px;}

input.minibutton {width: 100%;border: 0px;background: #f58220;padding: 5px 10px;border-radius: 3px;color: white;cursor: pointer;}
input.minibutton:hover {background: #c86b1a;}

#settings {}
#settings input.text {width: 200px;height: 25px;padding: 3px;margin: 0px 0px 10px;border-radius: 3px;border: 1px solid #ccc;}
#settings input#changePswd {font-size: 13px;margin-left: 0px;background: #f58220;color: white;text-decoration: none;padding: 5px 10px;border-radius: 5px;font-weight: 300;border: 1px solid transparent;cursor: pointer;}
#settings input#changePswd:hover {background: white;color: #f58220;border: 1px solid #f58220;}


table.bankuser {box-shadow: 0px 0px 3px #ccc;border-radius: 10px;padding: 15px;margin: 10px;width: 500px;border-collapse: collapse;}
table.bankuser td {padding: 10px;border-bottom: 1px solid #ccc;}
table.bankuser tr.noborder td {border: 0px;}

table.bankuser input {width: 94%;padding: 5px;}
input#saveInfo {font-size: 13px;margin-left: 0px;background: #f58220;color: white;text-decoration: none;padding: 5px 10px;border-radius: 5px;font-weight: 300;border: 1px solid transparent;cursor: pointer;}

/*
 * Sheet
 */
 
 
.sheet fieldset {padding: 15px;border: 1px dashed #ccc;border-radius: 3px;background: #F9F9F9;} 
.sheet fieldset legend {position: relative;}
.sheet fieldset legend input {border: 1px solid #f58220;background: #f58220;color: white;font-size: 15px;}
.sheet fieldset legend span {right: 7px;top: 15px;position: absolute;font-size: 20px;color: white;}

.sheet form#selectUsers {margin-bottom: 20px;}
 
.sheet .inner {width: 100%;border-collapse: none;font-size: 14px;}
.sheet .inner tr:nth-child(even) {background: #fff0dc;}
.sheet .inner tr:nth-child(odd) {background: #ffffff;}
.sheet .inner tr td {padding: 5px;cursor: pointer;}
.sheet .inner tr td.name {width: 200px;display: block;}

.sheet .inner .borderChoose {background: rgba(255, 154, 0, 0.5);color: white;}

.sheet .inputko {width: 40px;text-align: center;}

.sheet .minutes {font-size: 10px;color: #ccc;}


.sheet input.submit {font-size: 13px;background: #f58220;color: white;text-decoration: none;padding: 5px 10px;border-radius: 5px;font-weight: 300;border: 1px solid transparent;cursor: pointer;}
.sheet input.submit:hover {background: white;color: #f58220;border: 1px solid #f58220;}



/*
 * Report
 */


.report {}

.report fieldset.reportList {background:#f9f9f9; border: 1px solid #ddd;padding: 15px;margin: 0 20px 20px 0;float: left;width: 97%;border-radius: 5px;}
.report fieldset.reportList legend {background: #000;color: white;padding: 10px 20px;border-radius: 5px;}

.report fieldset.reportList table {width: 100%;}
.report fieldset.reportList table td {height: 35px;}
.report fieldset.reportList table td:first-child {width: 200px;}

.report fieldset.reportDetail {border: 1px dashed #ccc;padding: 15px;margin: 0 20px 20px 0;border-radius: 5px;background: #F9F9F9;}
.report fieldset.reportDetail legend {background: #000;color: white;padding: 10px 20px;border-radius: 5px;}

.report table.reportTable {width: 100%;margin-bottom: 20px;border: 1px solid #ccc;border-collapse: collapse;}
.report table.reportTable tr:hover td {background-color: #f8ff81 !important;}
.report table.reportTable th {background: #ccc;padding: 5px;}
.report table.reportTable td {padding: 5px;}

.report .generateButton {text-align: right;width: 100%;}
.report .generateButton span {margin-right: 8px;}
.report .generateButton a {background: #458411;padding: 8px 12px;color: white;text-decoration: none;border-radius: 3px;}
.report .generateButton a:hover {background: #f58220;}


.report .monthlink {background: white;border: 1px solid orange;color: #c88100;padding: 5px 10px;border-radius: 3px;text-decoration: none;margin-right: 10px;display: inline-block;margin-bottom: 5px;}
.report .monthlink.active {background: orange;border: 1px solid orange;color: #000;font-weight:700;padding: 5px 10px;border-radius: 3px;text-decoration: none;}
.report .monthlink:not(.active):hover {border: 1px solid #000;background:#333;color: #fff;}
/*.report .monthlink.active:hover {background: #f58220;color: white;}*/

.report .monthlink.year2018 {opacity: 0.5;border: 1px solid grey;color: grey;}

/*
 * Login page
 */
#loginPage {background: url("/images/bg3.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
#loginPage,
#loginPage #body {position: relative; height: 100vh; margin: 0; padding: 0;}

#login {position: initial; width: 100%; height: 100%; background: url('/images/bg3.jpg') center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

#login #loginForm #websiteTitle {position: relative; display: block; margin: -50px -50px 20px -50px; padding: 0; background: rgb(245,245,245);}
#login #loginForm #websiteTitle .wrap {display: table; margin: 0 auto; position: relative;}
#login #loginForm #websiteTitle .wrap div {display: block; float: left;}
#login #loginForm #websiteTitle .wrap div.img img {height: 40px; position: relative; margin: 29px 0 0 0;}
#login #loginForm #websiteTitle .wrap div.tex {height: 100px; line-height: 100px; padding: 0 10px; font-size: 20px;color: black;}
#login #loginForm {position: absolute; top: 20%; left: 50%; width: 260px; height: auto; padding: 50px; background: white; margin-left: -181px; border-top: 6px solid #f58220; border-left: 1px solid rgb(200,200,200);border-right: 1px solid rgb(200,200,200);border-bottom: 3px solid rgb(200,200,200); border-radius: 5px;}
#login #loginForm h1 {position: relative; display: block; height: 30px; line-height: 30px; text-align: center; margin: 0 0 15px 0; padding: 0; font-size: 14px; text-transform: uppercase; color: rgb(80,80,80);}
#login #loginForm h1 a {display: block; text-decoration: none; color: rgb(80,80,80);}
#login #loginForm form {display: block; padding: 0; margin: 0;}
#login #loginForm table {position: relative; width: 100%; height: 45px; border: none; border-collapse: collapse;}
#login #loginForm table tr {}
#login #loginForm table tr td {padding: 0; margin: 0;}
#login #loginForm table tr td input[type="text"],
#login #loginForm table tr td input[type="password"] {background: white; height: 35px; line-height: 35px; padding: 0 10px; margin: 0 0 5px 0; border: 1px solid rgb(200,200,200); width: 240px; font-size: 12px;}
#login #loginForm table tr td input[type="text"],
#login #loginForm table tr td input[type="password"]:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset;}
#login #loginForm table tr td label[for="secureLogin"] {cursor: pointer; border-radius: 3px; text-align: center; display: block; -webkit-appearance: none; height: 35px; line-height: 35px; border: 1px solid #f58220; border-bottom: 2px solid #f58220; background: #f58220; color: white; text-transform: uppercase; width: 259px; margin: 15px 0 0 0;}
#login #loginForm table tr td label[for="secureLogin"]:hover {cursor: pointer; background: #f58220; color: white; border: 1px solid #f58220; border-bottom: 2px solid #f58220;}
#login #loginForm table tr td label[for="saveIp"],
#login #loginForm table tr td label[for="saveLogin"] {margin: 9px 0 0 0; display: inline-block;}

#storedUsers {position: relative; margin: 0 -50px; padding: 0; display: block; background: rgb(245,245,245);}
#storedUsers .user {position: relative; display: block; height: auto; border-bottom: 1px solid rgb(200,200,200); padding: 5px 20px;}
#storedUsers .user:first-child {border-top: 1px solid rgb(200,200,200);}
#storedUsers .user .name {height: 20px; line-height: 20px;}
#storedUsers .user .email {height: 20px; line-height: 20px; color: rgb(80,80,80);}
#storedUsers .user [class^="icon-"] {position: absolute; top: 5px; right: 0; font-size: 20px; color: rgb(200,200,200); height: 40px; width: 40px; line-height: 40px; text-align: center;}
#storedUsers .user:hover {cursor: pointer; background: #c3f1c2;}
#storedUsers .user:hover [class^="icon-"] {color: rgb(80,80,80);}
#storedUsers .user .expiration {font-size: 10px; vertical-align: bottom; text-align: right; color: #a9a9a9;}
#storedUsers .user .disabledText {font-size: 10px; vertical-align: top; text-align: right; color: #ff2d2d;}
#storedUsers .user.isDisabled {pointer-events: none; background: #fff3f3;}

#login #loginForm #differentUser {position: relative; margin: 0 -20px -20px -20px;}
#login #loginForm #differentUser a {text-decoration: none; color: #f58220;display: block; height: 40px; line-height: 40px; text-align: center; margin: 20px 0 0 0;}
#login #loginForm #copyright {position: absolute; bottom: -45px; left: 0; width: 100%; line-height: 30px; text-align: center; color: #f1f1f1;}
#login #loginForm #loginProccess {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 999;}
#login #loginForm #loginProccess #loginLoading {display: block; text-align: center;}
#login #loginForm #loginProccess #loginLoading img {width: 100px; margin: 115px auto 30px auto;}
#login #loginForm #loginProccess #loginResponse {display: block; text-align: center;}
#login #loginForm #loginResult {position: absolute;bottom: -30px; left: 0; height: 30px; line-height: 30px; text-align: center; background: rgb(255, 81, 81); color: white; width: 100%;}