/*

Author: Tim Steinz

Description:
Main CSS file for the event dashboard

ONLY MODULE_NAME.CSS FILES ARE LOADED AFTER THIS, THE REST OF THE CSS FILES ARE LOADED BEFORE THIS FILE

The Design is/should be (TODO: improve small screens views) responsive

*/

/* import fonts */

@font-face {
    font-family: 'Open Sans Semi Bold'; //'open_sanssemibold';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans Bold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Font Awesome';
    src: url('../fonts/FontAwesomeSolid.woff') format('woff'),
         url("../fonts/FontAwesomeSolid.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Font Awesome Regular';
    src: url('../fonts/FontAwesomeRegular.woff') format('woff'),
         url("../fonts/FontAwesomeRegular.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular.woff') format('woff'),
         url("../fonts/roboto-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Italic';
    src: url('../fonts/roboto-italic.woff') format('woff'),
         url("../fonts/roboto-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto Bold';
    src: url('../fonts/roboto-700.woff') format('woff'),
         url("../fonts/roboto-700.woff2") format("woff2");
    font-weight: 700;
    font-style: bold;
}

@keyframes spin {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

body{font-family: 'Open Sans', Ariel, sans-serif, 'Font Awesome'; font-size: 100%; font-size: 14px; margin: 0; padding: 0; border: 0; vertical-align: baseline;}

/* Global Reset of Browser Defaults */
body, div, span, h1, h2, h3, h4, h5, h6, hr, p, a, ul, ol, li, dl, dt, dd, blockquote, form, input, select, textarea{position: relative; margin: 0; padding: 0; border: 0; vertical-align: baseline;}

/* Basic styling */
body{background: black; /*background-image: url('../img/bg-big.jpg');*/ background-image: url('../img/bg-big.jpg'); background-attachment: fixed; background-size: cover;}
a, a:visited{text-decoration: none;}

/* Input styling */
input[type=button], input[type=submit], select{font-family:'Font Awesome', 'Open Sans', sans-serif; font-size: 14px; padding: 5px 12px; border-radius: 2px; border: 1px outset #000; background: #ddd; color: #000; cursor: pointer; min-width: 70px;}
input[type=button]:hover, input[type=submit]:hover{background: #ffde00;}
input[type=button]:active, input[type=submit]:active{border: 1px inset #000;}
input[type=text], input[type=password], input[type=number]{font-family: 'Font Awesome', 'Open Sans', sans-serif; font-size: 14px; padding: 6px 12px; border-radius: 2px; border: 1px solid #000; background: #fff;}
textarea{font-family: 'Font Awesome', 'Open Sans', sans-serif; font-size: 14px; padding: 6px 12px; border-radius: 2px; border: 1px solid #000; background: #fff;}
select{border-radius: 2px; border: 1px solid #000; background: #fff;}
hr{width: 100%; border-bottom: 2px solid #888; margin: 20px 0px;}
#nojavascript, noscript{position: relative; display: inline-block; top: 113px; left: 20%; width: 50%; background: #ffde00; color: #000; z-index: 100000; margin-left: auto; margin-right: auto; padding: 10px;}

/* Checkbox styling */
input[type=checkbox].checkbox{position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0px; border:0;}
input[type=checkbox].checkbox + label.checkbox-label {padding: 0px 0px 0px 28px; height: 20px; display: inline-block; line-height: 20px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 20px; vertical-align: middle; cursor: pointer;}
input[type=checkbox].checkbox:checked + label.checkbox-label {background-position: 0px -20px;}
label.checkbox-label {background-image:url('../img/checkbox.png'); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; 	-ms-user-select: none; user-select: none;}

/* Disabled input styling */
input:disabled{background: #D2D2D2; color: #000;}
input:disabled:hover{background: #D2D2D2; color: #000;}
input[type=button]:disabled, input[type=submit]:disabled{background: #CCCCCC; color: #8a8a8a;}
select:disabled{background: #D2D2D2; color: #000;}
select:disabled:hover{background: #D2D2D2; color: #000;}
textarea:disabled{background: #D2D2D2; color: #000;}
textarea:disabled:hover{background: #D2D2D2; color: #000;}

/* URL styling */
a[target=_blank]::after{content: "\f35d"; font-family: "Font Awesome"; font-size: 0.7em; margin-left:2px; position: relative; top: -2px;}
a#menu-header-helplink::after{content: none;}
div[id*=map] a[target=_blank]:after{content: "";}

/* Basic handy classes*/
.header1{padding: 12px 5px 6px 5px; font-family: "Open Sans Semi Bold", Arial, sans-serif; font-size: 16px;}
.fullwidth{display: inline-block; float: left; width: 100px; height: 1px;}
.clearer{clear:both;}
.clear-full-width{clear: both; height: 1px; width: 100%;}
.normal{font-family: "Open Sans", Arial, sans-serif;}
.bold{font-family: "Open Sans Semi Bold", Arial, sans-serif;}
.fa-regular{font-family: "Open Sans", Arial, sans-serif, "Font Awesome Regular";}
.italic{font-style: italic;}
.small{font-size: 14px;}
.verysmall{font-size: 10px;}
.big{font-size: 1.2em;}
.verybig{font-size: 1.8em;}
.smallindent{padding-left: 10px;}
.indent{padding-left: 25px;}
.center{text-align: center;}
.anchor{position: relative;}
.left{text-align: left;}
.right{text-align: right;}
.middle{vertical-align: middle;}
.pointer{cursor: pointer;}
.fakeurl{cursor: pointer; color: blue;}
.fakeurl:hover, .fakeurl:active{text-decoration: underline;}
.hide{visibility: hidden; position: absolute;}
.spinner{position: relative;display: inline-block; animation: spin 1.5s infinite linear 0s; top: 40%; color: #AAA;}
.outline-hover:hover{box-shadow: 0px 0px 20px -2px rgba(0,0,0,1); border-radius: 3px;}

/* Small flotr2 fixes */
.flotr-legend-label{text-align: left;}
.flotr-axis-title-y1{transform: rotate(90deg); transform-origin: center;}
.flotr-axis-title-y2{transform: rotate(270deg); transform-origin: center;}

/* Basic table class */
.table{clear: both; display: table; width: 99.97%; border: 1px solid #888; background: #FFFFFF; margin-top: 5px; margin-bottom: 5px; border-radius: 2px;}
.table-header{display: table-header-group;}
.table-header-row{display: table-row; min-height: 40px; font-size: 15px;}
.table-header-row span{display: table-cell; padding: 6px 3px; background: lightgrey; font-family: "Open Sans Semi Bold", Arial, sans-serif, 'Font Awesome'; border-bottom: 2px solid #000;  text-align: left;}
.table-header-row .sortable{cursor: pointer;}
.table-header-row .sortable:after{display: inline-block; margin-left: 3px; padding: 1px 5px 1px 4px; font-family: "Font Awesome"; content: " \f0dc"; color: #333;}
.table-header-row .sortable:hover:after{color: #000; background: #ffde00; border-radius: 4px;}
.table-header-row span:first-child{padding: 6px 6px 6px 12px;}
.table-header-row span:last-child{padding: 6px 12px 6px 6px;}
.table-header-row span.table-last-span{text-align: right;}
.table-body{position: relative; display: table-row-group; font-size: 0.9em;}
.table-body-row{position: relative; display: table-row; min-height: 40px; font-size: 14px;}
.table-body-row:nth-of-type(even){background-color: #efefef;}
.table-body-row > span{position: relative; display: table-cell; padding: 2px 3px; border-top: 1px solid #888;  text-align: left; vertical-align: middle;}
.table-body-row > span:first-child{padding: 2px 3px 2px 12px;}
.table-body-row a, .table-body-row a:visited{color: blue;}
.table-body-row a:hover{text-decoration: underline;}
.table-body-row-child span:first-child{font-family: "Open Sans", Arial, sans-serif;}
.table-body-row > span.table-last-span{padding: 4px 12px 4px 8px; vertical-align: middle; text-align: right;}
.table-body-row input{display: inline-block; padding: 4px 8px; margin: 1px;}
.table-body-row:last-child{border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#table-body-no-rows{height: 60px; vertical-align: middle; font-family: "Open Sans", Arial, sans-serif;}

/* A basic pagination style buttons */
.pagination{clear: right; float: right; display: block; text-align: center; padding: 2px 0px 0px 20px;}
.pagination a{padding: 0px 8px; border: 1px solid black; border-radius: 3px; color: #000; margin: 0px 2px; cursor: pointer;}
.pagination strong{padding: 0px 8px; border: 1px solid black; border-radius: 3px; background: #ffde00; margin: 0px 2px;}
.pagination a:hover{background: #ffde00;}

/* Notifications styling */
#notification-container{position: fixed; width: 100%; top: 15%; border-radius: 5px; z-index: 101; pointer-events: none;}
#notification-closebutton{position: absolute; top: 0px; right: 0px; padding: 2px 4px;}
.notification{position: relative; display: block; width: 100%; max-width: 600px; min-height: 58px; margin: 5px auto; text-align: center; box-shadow: 0px 0px 3px 5px #888; border-radius: 4px; cursor: pointer; pointer-events: all;}
.notification-image{position: absolute; top: 4px; left: 5px;}
.notification-message{position: relative; padding: 18px 10px; margin-left: 49px; font-size: 16px;}
#notification-container .ok{background: lightgreen;}
#notification-container .warning{background: #ffde00;}
#notification-container .error{background: red;}

/* Generic MODAL class */
.modal{display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100vw; height: 100vh; overflow: auto; background: rgb(0,0,0); background: rgba(0,0,0,0.8) }
.modal .modal-content{position: relative; margin: 10% auto; border: 1px solid #222; background: #eee; background: linear-gradient(135deg, #e1ffff 0%,#f2f2f2 0%,#fdffff 12%,#f7f7f7 32%,#ffffff 61%,#e5e5e5 87%,#edf1f4 100%); width: 100%; max-width: 500px; animation-name: animatemodal; animation-duration: 0.3s; font-size: 14px; color: #000; border-radius: 4px; box-shadow: 0px 0px 3px 3px #FEDD00;}
.modal .modal-header{position: relative; padding: 10px; border-bottom: 1px solid black;}
.modal .modal-header h1{font-size: 1.4em; font-family: "Open Sans Semi Bold", Arial, sans-serif; font-weight: normal; text-align: left; padding-left: 10px;}
.modal .modal-body{position: relative; margin-top: 5px; padding: 10px;}
.modal .modal-body .modal-row{position: relative; padding: 5px 0px; text-align: left;}
.modal .modal-body .modal-row label{display: block; font-weight: bold; padding-bottom: 3px; margin-left: 10px;}
.modal .modal-body .modal-row input{width: 96%; padding: 6px 12px; margin: 0px 2%; box-sizing: border-box; box-shadow: 0px 0px 2px #000000;}
.modal .modal-body .modal-row .fakeinput{width: 96%; padding: 6px 12px; margin: 0px 2%; box-sizing: border-box; box-shadow: 0px 0px 2px #000000; border: 1px solid #000000; background-color: #D2D2D2;}
.modal .modal-body .modal-row textarea{width: 96%; padding: 6px 12px; margin: 0px 2%; box-sizing: border-box; box-shadow: 0px 0px 2px #000000;}
.modal .modal-body .modal-row select{width: 96%; padding: 6px 12px; margin: 0px 2%; box-sizing: border-box; box-shadow: 0px 0px 2px #000000;}
.modal .modal-body .modal-row input[type=checkbox]{position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0px; border:0;}
.modal .modal-body .modal-row .select2-container{width: 96%; margin: 0px 2%; box-sizing: border-box; box-shadow: 0px 0px 2px #000000; border: unset; border-radius: 2px;}
.modal .modal-body .modal-row .select2-container input{box-shadow: unset;}
.modal .modal-body .modal-row .select2-container .select2-selection__choice{padding: 3px 4px;}
.modal .modal-body .modal-row input:invalid,
.modal .modal-body .modal-row textarea:invalid,
.modal .modal-body .modal-row select:invalid{box-shadow: 0px 0px 2px 1px #ff5530;}
.modal .modal-footer{position: relative; text-align: right; padding: 15px 20px;}
.modal .closebutton{position: absolute; top: 0px; right: 0px; font-family: "Font Awesome Regular"; font-size: 2em; z-index: 5; margin: 0px; cursor: pointer; padding: 2px 6px 2px 6px; background: unset; border-left: 1px solid #000; border-bottom: 1px solid #000; border-top-right-radius: 3px; border-bottom-left-radius: 5px; box-shadow: -2px 2px 1px 1px #FEDD00;}
.modal .closebutton:hover, .modal .closebutton:focus{color: #000; background: red;}
.modal .closebutton:active{border: 2px inset black; padding: 2px 5px 2px 6px}
.modal .submitbutton{border: 1px outset #333; border-radius: 3px; padding: 6px 12px;}
.modal .submitbutton:hover, .modal .submitbutton:focus{background-color: #ddd; box-shadow: 0px 0px 1px 1px #FEDD00;}
@keyframes animatemodal{
    from{top: -500px; opacity: 0;}
    to{top: 0; opacity: 1;}
    }


/* A basic overlay window class or modal TODO: Remove when tasks add trigger/edit trigger are updated to the modalstyle of the above */
.popup-container{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 150; overflow: scroll;}
.popup{position: fixed; display: none; left: 50vw; top: 20vh; width: 400px; margin-left: -260px; padding: 20px; color: black; background: white; background:linear-gradient(to right, #ffffff 0%,#f6f6f6 47%,#ededed 100%); z-index: 200; box-shadow: 0px 0px 800px 800px rgba(25, 22, 0, 0.8); font-size: 14px; overflow-y: auto; overflow-x: hidden;}
.popup h1{text-align: center; width: 100%; font-size: 16px; font-family: "Open Sans Semi Bold", Arial, sans-serif; padding-bottom: 7px; margin-top: 5px; margin-bottom: 13px; border-bottom: 1px solid #333;}
.popup-row{margin-bottom: 10px; vertical-align: top;}
.popup-colomn-left{position: relative; top: 0px; left: 0px; display: inline-block; margin: 0px; padding:0px; clear: both; width: 125px; text-align: left; vertical-align: baseline;}
.popup-colomn-right{display: inline-block; text-align: right; vertical-align: baseline;}
.popup-colomn-left span{display: block; min-height: 45px; text-align: left; border: unset; padding: 0px; vertical-align: baseline;}
.popup-colomn-left span:first-child{padding: 0px; font-family: "Open Sans", Arial, sans-serif;}
.popup-colomn-right span{display: block; height: 45px; font-size: 14px; border: unset; padding: 0px; vertical-align: baseline;}
.popup-colomn-right span span{height: unset;}
.popup-colomn-right span:first-child{padding: 0px;}
.popup-colomn-right input{width: 230px; padding: 4px 8px;}
.popup-colomn-right select{width: 249px; padding: 4px 8px; background: #ffffff; border: 1px solid black;}
.popup-colomn-right select:disabled{background: #bbbbbb; color: #999999;}
.popup-colomn-right textarea{width: 222px;}
.popup-colomn-right textarea:disabled{background: #bbbbbb; color: #999999;}
.popup-row .popup-colomn-left > span{height: auto; vertical-align: top; text-align: left; /*padding: unset;*/}
.popup-row .popup-colomn-right > span{height: auto; vertical-align: top; text-align: left; /*padding: unset;*/}
input.popup-submitbutton{float: right; margin: 5px 15px 5px 15px;}
input.popup-closebutton{position: absolute; top: 0px; right: 0px; min-width: 1px; margin: 5px; padding: 1px 3px; cursor: pointer; font-family: "Font Awesome Regular"; font-size: 1.8em; background: unset; border: 0; z-index: 5;}
input.popup-closebutton:hover{color: #D60000; background: unset;}

/* Tooltips */
.tooltip .tooltiptext {visibility: hidden; width: 200px; background-color: #555; background-color: rgba(85,85,85,1); color: #fff; text-align: center; padding: 6px 10px; border-radius: 6px; border: 1px solid #ffde00; position: absolute; z-index: 1000; bottom: 125%; left: 50%; margin-left: -118px; opacity: 0; transition: opacity 0.3s;}
.tooltip .tooltiptext::after {content: ""; position: absolute; top: 100%; left: 50%; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible; opacity: 1;}

/* General Tab functionality */
.tab-header-container{height: 38px; width: 100%; padding: 0; margin: 0; margin-bottom: 10px; border-bottom: 2px solid black; text-align: right; vertical-align: center;}
.tab-header-container a{display: inline-block; height: 28px; padding: 9px 20px 0px 40px; font-size: 15px; color: black; background: #DDD; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid #000; border-bottom: none;}
.tab-header-container a img{position: absolute; top: 6px; left: 5px; height: 24px; box-shadow: 1px 1px 1px 1px #999; border-radius: 5px;}
.tab-header-container a:hover{background: #FFDE00;}
.tab-header-container a:hover img{box-shadow: 1px 1px 1px 1px #111;}
.tab-header-container a.selected{background: #FFF; height: 30px; box-shadow: 2px -2px 2px 0px #BBB;}
.tab-header-container a:last-child{margin-right: 5px;}
.tab-container{}


/* CONTENT */

/* Wrapper */
#wrapper{position: relative; width: 100%; max-width: 1580px; margin-left: auto; margin-right: auto;}

/* Header */
#header{position: fixed; top: 0px; max-width: 1580px; min-height: 99px; padding-left: 10px; padding-right: 10px; padding-bottom: 2px; background: black; color: lightgrey; z-index: 5;}
#header-expand{position: fixed; height: 104px; top: 0px; left: 0px; width: 100%; z-index: 2; background: black;}
#header-logo{float: left; padding: 10px 0px 0px;}
#header-logo img{height: 50px;}
#header-user{float: left; margin: 10px; padding: 5px 10px;}
#header-user a{color: lightgrey;}
#header-user a:hover{color: white; text-decoration: underline;}
#header-user-settings-link{position: relative;}
#header-user-settingspopup{display: none;}
#header-nav{clear: both; z-index: 6;}
#header-nav ul{list-style: none;}
#header-nav ul li{float: left; display: block; padding-right: 11px;}
#header-nav ul li a{position: relative; display: block; padding: 5px 8px; margin-left: 1px; font-size: 16px; color: #EEE; text-transform: uppercase; font-family: "Open Sans Semi Bold", Arial, sans-serif; background: #000; text-transform: uppercase; z-index: 20; border-bottom: 2px solid #000;}
#header-nav ul li a:hover{text-decoration: none; color: #ffde00; border-bottom: 2px solid #ffde00;}
#header-nav ul li a.selected{text-decoration: none; color: #ffde00; border-bottom: 2px solid #ffde00;}
#header-nav a{display: none;}
.header-nav-img{position: absolute; top: 1px; left: 1px; height: 30px;}
#header-bgimage-cities{position: absolute; top: 15px; right: 38px; height: 75px; z-index: -1;}
#header-heightfill{margin-top: 103px; width: 100%; height: 1px;}

/* Content container */
#content-container{position: relative; margin-top: 8px; width: 100%; z-index: 1; margin-bottom: 28px;}

/* Content menu */
#content-nav{position: absolute; left: 0px; top: 5px;}
#content-nav ul{position: relative; list-style: none; width: 100%;}
#content-nav ul li{display: block; width: 100%;}
#content-nav ul li a{display: block; width: 85px; vertical-align: middle; text-align: center; font-size: 13px; padding: 5px; margin-bottom:4px; margin-left: 10px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: black; background: black; background: linear-gradient(to bottom, #ffffff 0%, rgba(240,240,240,0.9) 100%); border: 2px solid #222; border-right: 2px solid black;}
#content-nav ul li a img{text-align: left; margin-top: 5px; width: 45px; border-radius: 14px; box-shadow: 0px 1px 1px 1px #888;}
#content-nav ul li a:hover{text-decoration: none; border-right: white; z-index:1000; background: rgb(204,204,204); background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,1.0) 100%); box-shadow: -2px 0px 3px 2px #ffde00;}
#content-nav ul li a:hover img{box-shadow: 0px 1px 1px 1px #333;}
#content-nav ul li a.selected{background: #FFF; color: black; border-right: 2px solid #FFF; border: 2px solid black; border-right: 2px solid white; box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.8); z-index: 100;}
#content-nav ul li a.selected:hover{border-right: 2px solid #FFF; background: #FFF; box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.8);}

/* Content contents */
#content-main{margin-left: 107px; margin-right: 10px; min-height: 500px; background-color: white; background-color: linear-gradient(to right, #ffffff 0%,#f6f6f6 47%,#ededed 100%); padding: 10px 10px; background-image:url('../img/tent_bg.png'); background-repeat: no-repeat; background-position: right bottom; border: 2px solid #222; border-radius: 3px; box-shadow: 0px 0px 10px 6px rgba(255, 255, 255, 0.8); text-align: center;}
.content-main-header{font-family: "Open Sans Semi Bold", Arial, sans-serif; width: 100%; padding: 5px 0px; text-align: center; margin-bottom: 10px;}
.content-main-summary{width: 100%; min-height: 100px; border: 1px solid #888; margin-bottom: 15px;}
#content-main-header{font-size: 16px; font-family: "Open Sans Semi Bold", Arial, sans-serif;float: left; padding: 12px 5px 6px 5px;}
.content-main-optionsheader{float: right; padding: 5px 0px 7px 5px; text-align: right;}
.content-main-optionsheader input[type=button], .content-main-optionsheader input[type=submit]{margin: 0px 0px 6px 6px; padding-left: 20px; padding-right: 20px; width: unset;}
.content-main-optionsheader input[type=text]{position: relative; width: 300px; box-shadow: 0px 0px 2px #000000; margin: 0px 0px 6px 6px; font-family: 'Open Sans', 'Font Awesome';}
.content-googlemap{width: 100%; height: 350px; border: 1px solid #888; margin-bottom: 15px;}

/* Project Summary header*/
.project-summary-header{position: relative; width: 99%; min-height: 49px; border-radius: 3px; border: 1px solid #666; vertical-align: middle; margin: 5px 5px 0px 5px; padding: 20px 0px; text-align: left; background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%); box-shadow: 0px 0px 1px 1px black;}
.project-summary-header span{float: left; padding: 5px 15px 5px 5px;}
#project-summary-header-projectname{width: unset; font-size: 28px; font-family: "Open Sans Semi Bold", Arial, sans-serif; margin-right: 25px; padding: 5px 15px 5px 15px;}
#project-summary-header-projectlocation{}
#project-summary-header-projectperiod{}
#project-summary-header-projectstats{}
#project-summary-header-projecttime{padding-left: 15px; padding-top: 0px; float: right; margin-right: 15px; font-size: 28px; height: 44px; font-family: "Open Sans Semi Bold", Arial, sans-serif; background: #ddd; color: #333; border-radius: 3px; text-align: center; box-shadow: 0px 0px 1px 1px black;}
#project-summary-header-projectdate{font-size: 11px; font-family: 'Open Sans', Ariel, sans-serif; position: relative; display: block; top: -8px; }

/* Project Summary Module Tiles */
.project-summary-module{float: left; width: 335px; height: 290px; margin: 5px 0px 0px 5px; padding: 5px 8px; border: 1px solid #666; border-radius: 3px; overflow: hidden; color: #000; background: #fff; background: linear-gradient(to bottom, #ffffff 90%, #eeeeee 100%); box-shadow: 0px 0px 1px 1px black;}
.project-summary-module:hover{box-shadow:0px 0px 2px 2px #ffde00;}
.project-summary-container{clear: both;}
.project-summary-module-header{position: relative; text-align: left; }
.project-summary-module-header::after{content:"\f0b2"; text-align: center; font-family: 'Font Awesome'; position: absolute; top: 0; right: 0; color: #555; padding: 2px 2px 3px 3px; border-radius: 3px;}
.project-summary-module:hover .project-summary-module-header::after{background: #ffde00;}
.project-summary-module-header-container{padding: 6px 5px; min-height: 25px;}
.project-summary-module-header p{margin-left: 30px; font-size: 15px; font-family: "Open Sans Semi Bold", Arial, sans-serif; padding: 0px;}
.project-summary-module-header img{position: absolute; top: 3px; left: 0px; width: 25px; max-height: 45px; overflow: hidden; border-radius: 8px; box-shadow: 0px 1px 1px 1px #888;}
.project-summary-module-body{clear: both; position: relative; margin-top: 5px; /*padding: 3px 5px 10px 5px;*/ font-size: 14px; text-align: left;}
.project-summary-projectinfo-left{display: inline-block; min-width: 80px;}

/* Projectdevices and modules page */
#devices-modules-table-body span{padding: 6px 8px;}
#devices-modules-table-body span:hover{background: #ffde00;}
#project-modules span:last-child{text-align: left;}
.project-modules-container{text-align: right;}
label.checkbox-label.moduleselect{width: 96%;}
.project-devices-add-devices-multiselect{height: 250px;}
.project-devices-child-device-arrow{width: 15px; height: 15px;}

/* Project Users Slack layout */
#tasks-slack-api-token-container{clear: both; width: 100%; box-sizing: border-box; padding: 10px 10px; margin-bottom: 5px; border: 1px solid #dddddd; text-align: left; border-radius: 3px;}
#tasks-slack-api-token{width: 400px;}
.tasks-slack-options-container{text-align: center;}
.tasks-slack-option{position: relative; width: 100%; box-sizing: border-box; padding: 10px 10px; margin-bottom: 5px; border: 1px solid #dddddd; text-align: left; border-radius: 3px;}
.tasks-slack-option input{position: relative; top: 2px; left: 0px;}
.tasks-slack-option label{}
.tasks-slack-workspace{font-size: 26px; padding: 20px 20px 20px 35px;}
.tasks-slack-workspace-remove-button{float: right;}
.tasks-log-timestamp{width: 170px;}

/* Login content*/
#welcome-container{display: table; width: 98%; margin-left: 1%; margin-right: 1%; vertical-align: top; border-collapse: collapse; box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.8); font-family: "Roboto", Arial, sans-serif; font-size: 15px;}
#welcome-container h1{font-family: "Open Sans Semi Bold", Arial, sans-serif;}
#welcome-container h2{font-family: "Open Sans Semi Bold", Arial, sans-serif;}
#welcome-container #table-row{display: table-row;}
#welcome-container #dashboard-ad-section{display: table-cell; height: 400px; padding: 25px 40px 40px 40px; background: white; background: linear-gradient(to right, #ffffff 0%, #fcfcfc 47%, #fafafa 100%); border: 1px solid #333;}
#dashboard-ad-section div{display: block;}
#welcome-container #login-section{display: table-cell; width: 270px; height: 255px; padding: 25px 40px 40px 40px; background: white; background: linear-gradient(to right, #ffffff 0%,#f6f6f6 47%,#ededed 100%); border: 1px solid #333;}
#login-section{display: block;}
#login-title{width: 100%; font-size: 1.1em; font-family: "Open Sans Semi Bold", Arial, sans-serif; text-align: center;}
#login-subtitle{width: 100%; text-align: center;}
#login-spacer{margin-top: 20px;}
.login-label{font-size: 14px; margin-top: 10px;}
#login-section input[type=text], #login-section input[type=password]{position: relative; width: 257px; padding: 5px 5px;}
#forgot-password-modal input[type=text]{width: 96%; padding: 2% 5px;}
#login-buttons{width: 100%; text-align: right;}
#login-forgot-password{}
#login-submit-button{padding: 5px 5px; margin-top: 20px; margin-right: 1px; text-align: center;}

/* Footer */
#footer{clear: both; position: fixed; left: 0; bottom: 0; width: 98%; padding: 3px 1%; background: black; color: lightgrey; z-index: 1; border-bottom: 1px solid #555;}
#footer p{float: right; font-size: 0.7em; background: black;}

/* Adddevice */
#adddevice-qr-scanner-overlay{position: fixed; width: 100vw; height: 100vh; z-index: 50; background: #FFF;}
#adddevice-qr-scanner-closebutton{position: absolute; top: 0; right: 0; padding: 6px 6px; z-index: 100; font-size: 2.5em; font-family: "Font Awesome Regular"; background: red; border-radius: 5px; border: 1px solid #000; cursor: pointer;}
#adddevice-camera-canvas{position: fixed; width: 100vw; height: 100vh; background: #FFF; z-index: 55;}
#adddevice-camera-status{position: absolute; width: 80vw; top: 20%; left:0; right:0; margin: 0px auto; background: #DDD; border-radius: 5px; padding: 20px 10px; text-align: center; z-index: 60; font-size: 1.3em; border: 3px solid #111;}
#adddevice-wrapper{position: relative; margin: 0px auto; border: 2% solid #000; width: 96%; max-width: 400px; background: #EEE; border-radius: 5px;}
#adddevice-header{position: relative; width: 100%;}
#adddevice-header img{float: left; padding: 2px 2%; width: 96%; max-width: 200px; margin: 6px auto;}
#adddevice-header-user{float: left; padding: 2px 2%; z-index: 2;}
.adddevice-body{clear: both; position: relative; border-top: 1px solid #888; width: 96%; padding: 5px 2%;}
input.adddevice-buttons{width: 48%; height: 45px; margin: 5px auto; font-size: 1.1em;}
select#project-selector{width: 95%; margin: 5px auto; height: 40px;}
#login-email, #login-password{position: relative; display: block; width: calc(100% - 26px); }
#login-email-label, #login-password-label{position: relative; display: block; width: 100%; /*font-size: 1.1em; font-weight: bold;*/}
#login-submit{font-size: 1.2em; height: 50px; width: 100%;}
input#adddevice-location{width: 88%; margin: 5px auto; height: 26px;}
input#adddevice-label{width: 88%; margin: 5px auto; height: 26px;}
input#adddevice-gps-lat{width: 88%; margin: 5px auto; height: 26px;}
input#adddevice-gps-long{width: 88%; margin: 5px auto; height: 26px;}


/* end normal/desktop 'browser' styles */

/* mobile responsive*/
@media screen and (max-width: 900px) {
    #header{position: relative; z-index: 0;}
    #header-expand{display: none;}
    #header-nav{position: relative; display: block;}
    #header-heightfill{display:none; min-height: 109px; padding-left: 10px; padding-right: 10px; padding-bottom: 2px; background: black; color: lightgrey; z-index: 5;}
    #header-bgimage-cities{display: none;}
    #header-nav ul li{float: left; display: block; position: relative;}

    .hide1000{display: none;}
    #content-container{margin: 0;}
    #content-nav{position:relative; width: 100%; top: 0px;}
    #content-nav ul{background: white; border: 2px solid #000; padding: 3px; width: unset;}
    #content-nav ul li{display: inline-block; float:left; width: unset;}
    #content-nav ul li a:selected{display:}
    #content-nav ul li a{min-height: unset; padding: 2px 5px; margin: 1px; border-radius: 4px; border: 2px solid #000; height: 51px; width: auto; min-width:105px;}
    #content-nav ul li a:hover, #content-nav ul li a:active{border: 2px solid #000; box-shadow: 0px 0px 2px 2px #ffde00;}
    #content-nav ul li a.selected{border: 2px solid #000; box-shadow: 0px 0px 2px 2px #ffde00;}
    #content-nav ul li a.selected:hover{border: 2px solid #000; box-shadow: 0px 0px 2px 2px #ffde00;}
    #content-nav ul li a img{width: 25px; border-radius: 9px; margin-top: 2px;}
    #content-main{margin-left: 0px; margin-right: 0px; box-shadow: unset;}
    }

@media screen and (max-width: 700px) {
    #header-nav.selected ul li a:not{display: none;}
    #header-nav a.icon{float: right; display: block;}
    #header-nav a img{height: 35px;}
    #header-nav.responsive a.icon{position: absolute; top: 0; right: 0; z-index: 200;}
    #header-nav.responsive ul li{float: none; display: block;}
    #header-nav.non-responsive ul li{display: none;}
    #header-nav.non-responsive ul li:first-child{display: block;}

    #welcome-container #dashboard-ad-section{display: none;}

    .project-summary-header{width: 92%; padding: 2%; margin: 2px 2%;}
    .project-summary-module{width: 92%; padding: 2%; margin: 2px 2%;}
    .project-summary-module-header::after{content:none;}

    .modal{display: none; position: fixed; z-index: 200; left: 0; top: 0; width: 100vw; height: 100vh; overflow: auto; background: rgb(0,0,0); background: rgba(0,0,0,0.8) }
    .modal .modal-content{position: relative; margin: 10% 0; border: 1px solid #222; background: #eee; background: linear-gradient(135deg, #e1ffff 0%,#f2f2f2 0%,#fdffff 12%,#f7f7f7 32%,#ffffff 61%,#e5e5e5 87%,#edf1f4 100%); width: 95%; left: 3px; animation-name: animatemodal; animation-duration: 0.3s; font-size: 14px; color: #000; border-radius: 4px; box-shadow: 0px 0px 3px 3px #FEDD00;}

    .popup{position: fixed; top: 0; left: 0; z-index: 200; margin: 0; width: 96%; padding: 2%; overflow-y: auto;}
    .popup-submitbutton{clear: both;}
    input.popup-closebutton{position: absolute; top: 5px; right: 15px; z-index: 5;}

    /* basic table class */
    .table{clear: both; display: block; width: 100%; background: #FFFFFF; margin-top: 5px; margin-bottom: 5px; border-radius: 2px; border: unset;}
    .table-header{display: none;}
    .table-header-row{display: none; min-height: 40px; font-size: 15px;}
    .table-header-row span{display: none; padding: 6px 3px; background: lightgrey; font-family: "Open Sans Semi Bold", Arial, sans-serif, 'Font Awesome'; border-bottom: 2px solid #000;  text-align: left;}
    .table-body{position: relative; display: block; font-size: 0.9em;}
    .table-body-row{position: relative; display: block; min-height: 40px; font-size: 14px; margin-bottom: 15px; border: 2px solid #000; border-radius: 3px;}
    .table-body-row > span{position: relative; display: block; width: calc(100% - 15px); padding: 2px 3px; border-top: 1px solid #888;  text-align: left; vertical-align: middle;}

    #footer{position: relative; left:0; top: 0; }
    }

@media screen and (max-height: 550px) {
    #header{position: relative; z-index: 0;}
    #header-expand{display: none;}
    #header-nav{position: relative; display: block; z-index: 0;}
    #header-heightfill{display: none;}
    .popup{position: fixed; top: 0; left: 0; margin: 0; z-index: 200; overflow-y: auto; width: 90%; padding: 5%; max-height: 90%;}
    #footer{position: relative; left:0; top: 0; overflow: hidden;}
    }

/* DATEPICKER JQUERY ADDON CSS */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }



/* Project Page*/
#popa-header{height: 400px; width: 100%; border-bottom: 1px solid #000;}
#popa-summary{display: inline-block; float: left; width: 22%; height: 400px; text-align: left;}
#popa-summary-header{position: relative; font-size: 16px; text-align: left; width: 100%; padding: 10px 0px;}
#popa-summary-header-options{position: absolute; bottom:0px; left:0px; width: 99%;}
.popa-summary-button {margin: 2px 0px; width: 100%; text-align: left;}
#popa-gmap{display: inline-block; float: right; width: 78%; height: 400px; outline: 1px solid #000;}

#popa-contents{clear: both; width: 100%; margin-top: 10px;}

#popa-damage-comment{display: none;}
input[type=checkbox].checkbox:checked ~ #popa-damage-comment{display: block;}


/* Devices Page*/
.popa-runninghours-label{display: block; text-align: center; padding: 5px; border-radius: 4px; border: 1px solid #777; width: 80px; font-family: "Open Sans Semi Bold", Ariel, sans-serif; background-color: unset; box-shadow: 0px 0px 1px 0px #000;}

/* Projects Page */
.popa-hide{display: none;}